# Normals mesh is misdirected

**URL:** <https://forum.babylonjs.com/t/normals-mesh-is-misdirected/54752>\
**Category:** Questions\
**Created:** [November 14, 2024, 8:51am UTC](https://forum.babylonjs.com/t/normals-mesh-is-misdirected/54752 "2024-11-14T08:51:54Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![marius\_margueray](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/marius_margueray/32/42474_2.png) [@marius\_margueray](https://forum.babylonjs.com/u/marius_margueray)\
**Post date:** [November 14, 2024, 8:51am UTC](https://forum.babylonjs.com/t/normals-mesh-is-misdirected/54752/1 "2024-11-14T08:51:55Z")

</div>

Hello, I’d like to make sure that every time I click the mouse, it sets a cylinder. So far, everything is working the way I want. But I would also like the cylinder when I place it to be in the same orientation as the ground where it is. So I get the normals to be able to rotate, the cylinder is oriented but not at all as I want…  
I’ve tried to condense the playground as much as possible… but for me it only comes from the normals, which are either not recovered properly or I’m doing it wrong. the only places where I use the normals are from line 165 to 197. thank you in advance for your reply.

> **[Babylon.js Playground](https://playground.babylonjs.com/?BabylonToolkit#AX3HQ9%236)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes

---

<div class="post-metadata">

**Author:** ![Joe\_Kerr](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/joe_kerr/32/39017_2.png) [@Joe\_Kerr](https://forum.babylonjs.com/u/Joe_Kerr)\
**Post date:** [November 14, 2024, 9:14am UTC](https://forum.babylonjs.com/t/normals-mesh-is-misdirected/54752/2 "2024-11-14T09:14:33Z")

</div>

[Wrong orientation and ‘getHeightAtCoordinates’ error](https://forum.babylonjs.com/t/wrong-orientation-and-getheightatcoordinates-error/54727) ?

---

<div class="post-metadata">

**Author:** ![marius\_margueray](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/marius_margueray/32/42474_2.png) [@marius\_margueray](https://forum.babylonjs.com/u/marius_margueray)\
**Post date:** [November 14, 2024, 9:15am UTC](https://forum.babylonjs.com/t/normals-mesh-is-misdirected/54752/3 "2024-11-14T09:15:41Z")

</div>

no, it’s not the same problem

---

<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:** [November 14, 2024, 10:24am UTC](https://forum.babylonjs.com/t/normals-mesh-is-misdirected/54752/4 "2024-11-14T10:24:14Z")

</div>

Hello 🙂

> [@marius\_margueray](#):
>
> no, it’s not the same problem

Same description, same playground, like @Joe_Kerr I feel like you are doubling the topic here…

* * *

About your issue, the problem is here :

```javascript
var rotation = pickresult.getNormal();

```

The function `pickresult.getNormal()` returns a normal, not a rotation.  
You need to convert this normal to a rotation, for example using `BABYLON.Vector3.RotationFromAxis` :

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

* * *

The above playground solves the rotation issue, but I think if you want to “paint” using the sphere, it’s not the good way, since you are using only the mouse pick, while the sphere is bigger. Best would be to trigger some new Ray Picking, from the points in the sphere, so that each new cylinder is oriented well.

* * *

Also, I think you playground has several other issues, such as detaching camera control on click even if no pick hit (no way to rotate, then), etc…

++  
Tricotou

---

<div class="post-metadata">

**Author:** ![marius\_margueray](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/marius_margueray/32/42474_2.png) [@marius\_margueray](https://forum.babylonjs.com/u/marius_margueray)\
**Post date:** [November 14, 2024, 10:49am UTC](https://forum.babylonjs.com/t/normals-mesh-is-misdirected/54752/5 "2024-11-14T10:49:41Z")

</div>

thank you very much for your help, for me the calculation was made directly on the fact of returning normals … as I said I have condensed so there is not everything I have in my code. the suggestions that you say and that you have brought moreover is already present in my software.  
Thank you again and good luck!

---

<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:** [November 14, 2024, 10:50am UTC](https://forum.babylonjs.com/t/normals-mesh-is-misdirected/54752/6 "2024-11-14T10:50:57Z")

</div>

Example with using Ray Picking from the sphere itself :  
 ![Screencast from 14-11-2024 11:47:54](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/8/0/802740e2cc91ee3f5940cd9e2c5e8041fb6de5b0.gif)

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