# Mesh on the surface of another mesh. I need help)

**URL:** <https://forum.babylonjs.com/t/mesh-on-the-surface-of-another-mesh-i-need-help/53094>\
**Category:** Questions\
**Created:** [August 29, 2024, 6:48pm UTC](https://forum.babylonjs.com/t/mesh-on-the-surface-of-another-mesh-i-need-help/53094 "2024-08-29T18:48:45Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![simon](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/simon/32/45590_2.png) [@simon](https://forum.babylonjs.com/u/simon)\
**Post date:** [August 29, 2024, 6:48pm UTC](https://forum.babylonjs.com/t/mesh-on-the-surface-of-another-mesh-i-need-help/53094/1 "2024-08-29T18:48:45Z")

</div>

Hello, guys!

I need some help again…  
I saw some topics RE my problem and implement approaches that I saw there:

> [@How can I make a mesh sit on the surface of another mesh?](https://forum.babylonjs.com/t/how-can-i-make-a-mesh-sit-on-the-surface-of-another-mesh/315):
>
> 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…

> [@Moving an item along the surface of a mesh using the keyboard or numeric input for (x,y)](https://forum.babylonjs.com/t/moving-an-item-along-the-surface-of-a-mesh-using-the-keyboard-or-numeric-input-for-x-y/21212):
>
> Hello, i need to be able to move a marker along the surface of a mesh without using the mouse. With the mouse it was kind of easy, just using the scene.pick() method. Now with the numeric / keyboard control this is a tad more difficult. What I’d like to achieve is that the user can use two keys or numeric inputs to control the position in the 2D space which then gets translated to the meshes 3D space. I have found this thread: But I am not sure if there might be a different, simpler optio…

> [@Ride on surface of mesh](https://forum.babylonjs.com/t/ride-on-surface-of-mesh/7960):
>
> Hey guys, do you know how it possible to move mesh on face of other custom mesh? May be you have any examples on babylon? Thank you. It should be like this original game is here [https://play.google.com/store/apps/details?id=io.voodoo.paper3](https://play.google.com/store/apps/details?id=io.voodoo.paper3)

But unfortunatelly this approaches doesnt work for me because I want to prevent changing of moving direction.

**Problem**  
So when I move mesh by +Y/-Y +X/-X +Z/-Z surfaces  
And when mesh moves from Z surface to Y everything works fine as well as from X to Z etc. But when I move mesh from X to Y I have a strange behaviour that you can see in the video…

**PG** (Use arrows to move the mesh by surface):

> **[Babylon.js Playground](https://playground.babylonjs.com/#CPWF6B%232)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

**Illustration**  
And I also prepare video that illustrate the problem:

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [August 29, 2024, 9:27pm UTC](https://forum.babylonjs.com/t/mesh-on-the-surface-of-another-mesh-i-need-help/53094/2 "2024-08-29T21:27:28Z")

</div>

cc @Cedric

---

<div class="post-metadata">

**Author:** ![Tricotou](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tricotou/32/5844_2.png) [@Tricotou](https://forum.babylonjs.com/u/Tricotou)\
**Post date:** [August 30, 2024, 7:49am UTC](https://forum.babylonjs.com/t/mesh-on-the-surface-of-another-mesh-i-need-help/53094/3 "2024-08-30T07:49:03Z")

</div>

Hello 🙂

> [@simon](#):
>
> I want to prevent changing of moving direction

Then I think your approach is not right, since your are defining the orientation of your box globaly, starting from the picked (ray) point, and the normal of the surface :

```javascript
box.position = pick.pickedPoint!;
let normal = pick.getNormal() as BABYLON.Vector3;
let quaternion = BABYLON.Quaternion.Identity();
BABYLON.Quaternion.FromUnitVectorsToRef(
    new BABYLON.Vector3(0,0,1),
    normal,
    quaternion
);
box.rotationQuaternion = quaternion;

```

While you should take into consideration, your speed (delta move from previous position)

* * *

Let me explain better.  
As far as I understood you are happy with this :  
 ![ok](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/3/b/3b952cd78e3f125cba8fcd79c1ec0238ab69a537.gif)  
But you are unhappy with this :  
 ![no_ok](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/2/a/2a0e27c85859a3956acdb275c9ccbf7bd52ca729.gif)

* * *

So what you are looking for (if I understood right) is, when going from X plane to Z plane, you want this :

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/b/b/bb632db89e5ff6327d157ad7dad5d3c22ef60a55.png)

* * *

But that’s inconsistent with the working version (first GIF). Have a look when going from Z plane to Y plane, to axis would not be in the same direction (orange points references) :

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/8/d/8d70d558d091c78b762f85c3b4099f97f3457211.png)

If the final orientation depends on where you come from, you cannot set it up globally from current position + normal …

* * *

I don’t know if it’s clear, ahah 😅

++  
Tricotou

---

<div class="post-metadata">

**Author:** ![simon](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/simon/32/45590_2.png) [@simon](https://forum.babylonjs.com/u/simon)\
**Post date:** [August 30, 2024, 10:16am UTC](https://forum.babylonjs.com/t/mesh-on-the-surface-of-another-mesh-i-need-help/53094/4 "2024-08-30T10:16:40Z")

</div>

Hello! Thanks for reply!

You understand me right

This is not problem:  
 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/7/d/7df1a589aa5ce8caabc10570a7bc8f44233fa958.png)

For my case changing of axis direction in the way we have on image is fine

---

<div class="post-metadata">

**Author:** ![Tricotou](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tricotou/32/5844_2.png) [@Tricotou](https://forum.babylonjs.com/u/Tricotou)\
**Post date:** [August 30, 2024, 11:09am UTC](https://forum.babylonjs.com/t/mesh-on-the-surface-of-another-mesh-i-need-help/53094/5 "2024-08-30T11:09:21Z")

</div>

> [@simon](#):
>
> For my case changing of axis direction in the way we have on image is fine

Sure ! What I was pointing, is that in the image both axis (on both orange points) have the same normal, while not the same orientation. So they cannot be set by a function which takes only the normal as reference. You must add a new var, such as the move direction…

---

<div class="post-metadata">

**Author:** ![simon](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/simon/32/45590_2.png) [@simon](https://forum.babylonjs.com/u/simon)\
**Post date:** [August 30, 2024, 11:42am UTC](https://forum.babylonjs.com/t/mesh-on-the-surface-of-another-mesh-i-need-help/53094/6 "2024-08-30T11:42:12Z")

</div>

Ahh… Thanks. I will think about how I can do it

---

<div class="post-metadata">

**Author:** ![simon](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/simon/32/45590_2.png) [@simon](https://forum.babylonjs.com/u/simon)\
**Post date:** [August 30, 2024, 5:36pm UTC](https://forum.babylonjs.com/t/mesh-on-the-surface-of-another-mesh-i-need-help/53094/7 "2024-08-30T17:36:13Z")

</div>

Your reply push me very close to solution! (I quess 😅)

> **[Babylon.js Playground](https://playground.babylonjs.com/#CPWF6B%234)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

But there is strange behaviour. Object rotates by 90 degrees when intersects the x-\>y and stucks when intersects -y -x. Why it could happens?

---

<div class="post-metadata">

**Author:** ![simon](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/simon/32/45590_2.png) [@simon](https://forum.babylonjs.com/u/simon)\
**Post date:** [September 2, 2024, 7:56pm UTC](https://forum.babylonjs.com/t/mesh-on-the-surface-of-another-mesh-i-need-help/53094/8 "2024-09-02T19:56:05Z")

</div>

@Tricotou  
I updated the PG and as I understand I took in account direction of my mesh, using “forward”. But I still have this inverting of the axis when I go from +z to +y

> **[Babylon.js Playground](https://playground.babylonjs.com/#CPWF6B%237)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

---

<div class="post-metadata">

**Author:** ![Tricotou](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tricotou/32/5844_2.png) [@Tricotou](https://forum.babylonjs.com/u/Tricotou)\
**Post date:** [September 3, 2024, 12:31pm UTC](https://forum.babylonjs.com/t/mesh-on-the-surface-of-another-mesh-i-need-help/53094/9 "2024-09-03T12:31:26Z")

</div>

Hello @simon

I had a look in your code, I think the problem comes from the new logic you are trying to apply (merging the previous “moving with keyboard forward, backward, left, right” and the new “orientation depending on the move direction”)

I tried to draw the “loop” in a picture. Let’s say forward (up arrow) is toward `X>0`. No problem.  
But now backward is toward `X<0`

 ![backward](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/2/7/27cf26bbbdf84db4099e1dc08a2ceb7c732f59ea.png)  
Then :

1. Backward toward `X<0`
2. `New orientation` with red axis following the move
3. Backward again toward a new `X<0` (still pushing down arrow)
4. `New orientation` again
5. etc… (`LOOP`)

* * *

Using for example the pointer as the new position it would not create this behavior :  
 ![Screencast from 03-09-2024 14:06:42](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/6/c/6cf27976b8a26953d6e868cd7cd06c8b6596a696.gif)

> **[Babylon.js Playground](https://playground.babylonjs.com/#CPWF6B%238)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

---

<div class="post-metadata">

**Author:** ![simon](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/simon/32/45590_2.png) [@simon](https://forum.babylonjs.com/u/simon)\
**Post date:** [September 3, 2024, 12:57pm UTC](https://forum.babylonjs.com/t/mesh-on-the-surface-of-another-mesh-i-need-help/53094/10 "2024-09-03T12:57:46Z")

</div>

Thank you! I’ll thinking through how I can apply it for my case
