# Ray picking in SkinnedMesh

**URL:** <https://forum.babylonjs.com/t/ray-picking-in-skinnedmesh/58029>\
**Category:** Questions\
**Created:** [April 24, 2025, 11:37am UTC](https://forum.babylonjs.com/t/ray-picking-in-skinnedmesh/58029 "2025-04-24T11:37:42Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![KallkaGo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/kallkago/32/45789_2.png) [@KallkaGo](https://forum.babylonjs.com/u/KallkaGo)\
**Post date:** [April 24, 2025, 11:37am UTC](https://forum.babylonjs.com/t/ray-picking-in-skinnedmesh/58029/1 "2025-04-24T11:37:43Z")

</div>

How to achieve in babylonjs that SkinnedMesh can be picked up by ray like threejs?  
Threejs seems to have updated the SkinnedMesh transformation at the CPU level （guess）

I need to pick up the mesh faceId and normal and update my annotation position

Here is compare of video

---

<div class="post-metadata">

**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\
**Post date:** [April 24, 2025, 1:37pm UTC](https://forum.babylonjs.com/t/ray-picking-in-skinnedmesh/58029/2 "2025-04-24T13:37:50Z")

</div>

Try this

```auto
// Create your skinned mesh
const skinnedMesh = /* your mesh with skeleton */;

// Generate normals
skinnedMesh.createNormals(true); // true for updatable

// Then in your pick handler
const pickResult = scene.pick(scene.pointerX, scene.pointerY, (mesh) => mesh === skinnedMesh);
if (pickResult.hit) {
    const faceId = pickResult.faceId;
    const normal = pickResult.getNormal(true); // true to useWorldCoordinates
    console.log("Face ID:", faceId, "Normal:", normal);
}

```

---

<div class="post-metadata">

**Author:** ![KallkaGo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/kallkago/32/45789_2.png) [@KallkaGo](https://forum.babylonjs.com/u/KallkaGo)\
**Post date:** [April 24, 2025, 1:49pm UTC](https://forum.babylonjs.com/t/ray-picking-in-skinnedmesh/58029/4 "2025-04-24T13:49:46Z")

</div>

If I load a skeleton mesh, do I need to do this for every skinnedMesh?

---

<div class="post-metadata">

**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\
**Post date:** [April 24, 2025, 3:59pm UTC](https://forum.babylonjs.com/t/ray-picking-in-skinnedmesh/58029/5 "2025-04-24T15:59:21Z")

</div>

Logically speaking - yes, considering that skeleton is not a mesh 🙂

Here is the example with Hat picking - [https://playground.babylonjs.com/#W2D1C2#3](https://playground.babylonjs.com/#W2D1C2#3)  
And another example with Ray picking - [Babylon.js Playground](https://playground.babylonjs.com/#PH7TAX)

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [April 24, 2025, 4:05pm UTC](https://forum.babylonjs.com/t/ray-picking-in-skinnedmesh/58029/6 "2025-04-24T16:05:26Z")

</div>

> [@labris](#):
>
> Here is the example with Hat picking

Someone has a good time 😃

---

<div class="post-metadata">

**Author:** ![KallkaGo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/kallkago/32/45789_2.png) [@KallkaGo](https://forum.babylonjs.com/u/KallkaGo)\
**Post date:** [April 24, 2025, 4:53pm UTC](https://forum.babylonjs.com/t/ray-picking-in-skinnedmesh/58029/7 "2025-04-24T16:53:24Z")

</div>

I tried the PG you provided. When the character moves horizontally, I click on the hat and he can’t pick it up. I also tried it in my project. Since mine is a robotic arm, I can’t pick it up when the robotic arm is raised.

---

<div class="post-metadata">

**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\
**Post date:** [April 24, 2025, 4:57pm UTC](https://forum.babylonjs.com/t/ray-picking-in-skinnedmesh/58029/8 "2025-04-24T16:57:52Z")

</div>

Ray picking should be much more precise

---

<div class="post-metadata">

**Author:** ![KallkaGo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/kallkago/32/45789_2.png) [@KallkaGo](https://forum.babylonjs.com/u/KallkaGo)\
**Post date:** [April 24, 2025, 5:15pm UTC](https://forum.babylonjs.com/t/ray-picking-in-skinnedmesh/58029/9 "2025-04-24T17:15:19Z")

</div>

i use threejs make a demo for your reference ，when the robot arm moves, it shoots a camera to the mouse position and it can pick up the

Is this possible in Babylon?

[https://codesandbox.io/p/devbox/cy2pyk](https://codesandbox.io/p/devbox/cy2pyk)

---

<div class="post-metadata">

**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\
**Post date:** [April 24, 2025, 5:18pm UTC](https://forum.babylonjs.com/t/ray-picking-in-skinnedmesh/58029/10 "2025-04-24T17:18:32Z")

</div>

```auto
(skinnedMesh as BABYLON.Mesh).refreshBoundingInfo(true);

```

Now it seems one is always able to click the Hat 🙂 - [https://playground.babylonjs.com/#W2D1C2#4](https://playground.babylonjs.com/#W2D1C2#4)

---

<div class="post-metadata">

**Author:** ![KallkaGo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/kallkago/32/45789_2.png) [@KallkaGo](https://forum.babylonjs.com/u/KallkaGo)\
**Post date:** [April 24, 2025, 5:33pm UTC](https://forum.babylonjs.com/t/ray-picking-in-skinnedmesh/58029/11 "2025-04-24T17:33:39Z")

</div>

cool that’s great, but I have a question. If the model is uploaded by the user, can I determine whether it belongs to skinnedMesh like threejs, and then update the bounding box information in the pointermve event to reduce unnecessary performance consumption?

---

<div class="post-metadata">

**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\
**Post date:** [April 24, 2025, 5:50pm UTC](https://forum.babylonjs.com/t/ray-picking-in-skinnedmesh/58029/12 "2025-04-24T17:50:08Z")

</div>

```auto
        for (const m of allModelMeshes) {
            console.log((m as BABYLON.Mesh).validateSkinning())
        }

```

Docs - [validateSkinning](https://doc.babylonjs.com/typedoc/classes/BABYLON.Mesh#validateskinning)  
Example - [https://playground.babylonjs.com/#W2D1C2#5](https://playground.babylonjs.com/#W2D1C2#5)

---

<div class="post-metadata">

**Author:** ![KallkaGo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/kallkago/32/45789_2.png) [@KallkaGo](https://forum.babylonjs.com/u/KallkaGo)\
**Post date:** [April 24, 2025, 6:08pm UTC](https://forum.babylonjs.com/t/ray-picking-in-skinnedmesh/58029/13 "2025-04-24T18:08:25Z")

</div>

Thanks for your answer, this is very useful 😆

---

<div class="post-metadata">

**Author:** ![KallkaGo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/kallkago/32/45789_2.png) [@KallkaGo](https://forum.babylonjs.com/u/KallkaGo)\
**Post date:** [April 25, 2025, 2:39am UTC](https://forum.babylonjs.com/t/ray-picking-in-skinnedmesh/58029/14 "2025-04-25T02:39:14Z")

</div>

How to find the corresponding bone through the picked up mesh and attach the sprite to this bone?

---

<div class="post-metadata">

**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\
**Post date:** [April 25, 2025, 3:17am UTC](https://forum.babylonjs.com/t/ray-picking-in-skinnedmesh/58029/15 "2025-04-25T03:17:03Z")

</div>

One of possible ways - [https://playground.babylonjs.com/#W2D1C2#6](https://playground.babylonjs.com/#W2D1C2#6)  
(again with the Hat 🙂 )

---

<div class="post-metadata">

**Author:** ![KallkaGo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/kallkago/32/45789_2.png) [@KallkaGo](https://forum.babylonjs.com/u/KallkaGo)\
**Post date:** [April 25, 2025, 5:11am UTC](https://forum.babylonjs.com/t/ray-picking-in-skinnedmesh/58029/16 "2025-04-25T05:11:24Z")

</div>

Thanks, it is really useful, but what if I want the sprite to be at the position where I click? It just follows the bone to make the same movement. Now it seems to be at the position of the root node of the bone that I found.

PG for robot：[https://playground.babylonjs.com/#W2D1C2#10](https://playground.babylonjs.com/#W2D1C2#10)

---

<div class="post-metadata">

**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\
**Post date:** [April 25, 2025, 6:10am UTC](https://forum.babylonjs.com/t/ray-picking-in-skinnedmesh/58029/17 "2025-04-25T06:10:03Z")

</div>

One needs to calculate the local offset from the bone to the picked point.

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

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/7/7/775e1eac2d677474c7522344bf87481ee11cd8cb.jpeg)

---

<div class="post-metadata">

**Author:** ![KallkaGo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/kallkago/32/45789_2.png) [@KallkaGo](https://forum.babylonjs.com/u/KallkaGo)\
**Post date:** [April 25, 2025, 7:34am UTC](https://forum.babylonjs.com/t/ray-picking-in-skinnedmesh/58029/18 "2025-04-25T07:34:47Z")

</div>

Great ! I use `TransformNode’ to help me ,it automatically calculate the location for me 😀

This is PG using TransformNode. If someone encounters this problem in the future, I hope he can find another solution.

[https://playground.babylonjs.com/#W2D1C2#13](https://playground.babylonjs.com/#W2D1C2#13)

---

<div class="post-metadata">

**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\
**Post date:** [April 25, 2025, 7:38am UTC](https://forum.babylonjs.com/t/ray-picking-in-skinnedmesh/58029/19 "2025-04-25T07:38:41Z")

</div>

I believe something is possible as well with Hotspots queries - [Babylon.js docs](https://doc.babylonjs.com/features/featuresDeepDive/mesh/hotspot/)