Get Location On Click of skinned mesh object

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!

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.

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

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

Thanks to all the contributors!