How can I make a mesh sit on the surface of another mesh?

I am importing STL objects into my scene. Once the scene is loaded with the imported STL, I am trying to place “pins” (a sphere and cube joined mesh) on the imported stl item by double clicking in the scene. The problem is currently the “pins” are upright and therefore sometimes hidden inside the imported STL item.

Is there something I can do so that the pins are touching the stl mesh but always point away from it?

For example, the red pin in the upper right of the image is vertical but I want it to be more horizontal so it looks like it is coming out of the side of the imported stl mesh.

Playground: Babylon.js Playground

I’ve looked into using a combination of lookAt and collision checks but neither have worked for me so far.

i guess you can use scene.pickWithRay in order to find the surface point of contact.
pickWithRay will return a PickingInfo where you can get the surface normal. Then just align your pin with the normal and place it at surface contact point :slight_smile:

1 Like

Thanks for the suggestion!

Is pickWithRay the same as scene.pick? I’m currently using the scene.pick function to get the x,y,z coords on dbl click to know where to place the “pin”.

I made a playground so you can see:
https://playground.babylonjs.com/#RDLDNZ

It is kind of the same except that you can give a ray instead of a 2d coordinates

Okay, making progress. Thanks again. I now have the surface normal but I’m struggling with aligning the pin by placing it at the surface contact point. Can you give me an example of how to do this with a mesh given I have the surface normal?

this could help: Babylon.js Documentation

Thanks. Are you suggesting I look at using Euler Angles or using Quaternions? This whole section of the docs is new to me.

both are fine here. Please pick the one you prefer :wink:

a good read as well: Babylon.js Documentation

Hi guys. I think a key term here is “orthogonal”.
A search of old forum for “orthogonal” does okay.

Interesting playgrounds found…
https://www.babylonjs-playground.com/#2C8LVE#16
https://playground.babylonjs.com/#2A0HNY
https://www.babylonjs-playground.com/#MZDDK#7

@jerome has made a BUNCH of posts about “direction to rotation”… which is really what you want, @tjshipe. Aligning the object… to the normal of the clicked face. I’m not very good at it.

In that #2A0HNY playground, look carefully at lines 23+.

I hope I’m helpful. I assume you can already get the normal of the double-clicked point. IF you have that, maybe these playground will teach how to convert the normal’s axis… to an object rotation. Maybe. :slight_smile:

1 Like

@Wingnut @Deltakosh This is what I was able to come up with. Let me know if you have any feedback or suggestions.

https://playground.babylonjs.com/#TZTHV1#1

2 Likes

Hi tjshipe! I think you’ve done it! Cool. Every double-click I try… works great! Well done.

Looks good to me :slight_smile:

This is really cool!
Not sure if it is intended but you can double click points.
I made a tower of points! :slight_smile:

2 Likes

I noticed that too, super easy to prevent though: https://playground.babylonjs.com/#TZTHV1#2

1 Like

Good catch! I actually didn’t intend to double click points.

3 Likes