How to make a plane sit on a surface of another mesh so it is always facing the same direction as the surface

I have a playground here: https://playground.babylonjs.com/#RHRLDW#1. I am trying to have a one sided plane rest on the side of the surfaces that intersect with the cursor.

The code I have doesn’t seem to work. Sometimes the plane disappears (I’m assuming because the forward of the pick Info picked mesh is facing away from the camera). Sometimes the rotation of plane is wrong as well.

The desired outcome is to have the plane always facing towards the direction of the pickInfo ray and to have the plane lay parallel to the pickInfo’s pickedMesh surface. Similar to hanging a painting on a wall.

I am unable to find similar playgrounds on this topic and have been stuck on this issue for quite some time.

Any help is greatly appreciated.

Hi,

I think in your example the plane disappears because it faces away from the camera.

One way to go is computing a new set of axis from the picked position, and use it to generate a quaternion with RotationQuaternionFromAxis

Here’s a playground showing the idea : https://playground.babylonjs.com/#RHRLDW#2

edit : oddly, it seems like the top of the cylinder is not recognized as a pickable surface…

3 Likes

Amazing. Thank you!