Get Location On Click of skinned mesh object

Questions
,
1

Hey,

I am using the model found in this link.
https://threejs.org/examples/#webgl_animation_skinning_additive_blending

const loader = new GLTFLoader();
loader.load( '../model/Xbot.glb', function ( gltf ) {
    model = gltf.scene;
    scene.add(model);       
    skeleton = new THREE.SkeletonHelper( model );
    skeleton.visible = true;
    scene.add(skeleton);
    renderer.render(scene, camera);
    animate();
} );

I am calling this model in my code by downloading it and rendering it.

The model displays fine. I am trying to get the location of the point where the user clicks the skinned mesh model and generate a sphere there. I have tried using raycasting but since the model is of type skinned mesh it’s hard to get the exact mouse location. Thanks!

EDIT:

mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
raycaster.setFromCamera( mouse, camera );
const intersects = raycaster.intersectObjects(scene.children);
for ( let i = 0; i < intersects.length; i ++ ) {
    console.log(intersects[i].object);
}

This is the code I used for raycasting. On clicking on the skeleton model, it returns the skeleton helper object (whose position is 0,0,0) but not the exact coordinates of the point clicked.

Thanks!

2

SkinnedMesh does support raycasting since transformed bones are taking into account. Can you please demonstrate with a live example what you have tried so far? This would make it possible to debug the issue.

3

SkinnedMesh does support raycasting since transformed bones are taking into account.

I thought this was addressed recently in PR #19178 by accounting for bone transforms when raycasting with SkinnedMesh.

If everything else looks right it could be that the bounding box isn’t encapsulating the skinned mesh properly.

1 Like
4

How have I missed this… /facepalm I’ve been wanting this for years lol!

Thanks to all the contributors!