Trying to trigger an event in a specific zone of a Mesh

Hi, i’m fairly new and i’m trying to get a Model of a Human being and when the user made a click in a part of the body trigger and event. i.e, click in the shoulder and in the console appear “You touch Shoulder”.

For my porpose i’m using Three.js lastest Build, a Free Human model i download from sketchfab.

I loaded with GLTFLoader, but i cant make the “mapping” or the event triggers in a spicify zone.

I tried with raycasting but failed miserable, trying to replicate the examples always got an error.

¿Somebody can tell me if i wanna do is possible with Three.js or do i need more tools?

If you make a live fiddle with what you have tried and the model, we can help you easier :wink:

Hi, i make it a Fiddle.js

What i’m trying to do is get that model of human body clickeable, and trigger an event depends in the ara of the body, for example, shoulder, head, cheeks, butt cheeks, belly etc.

Is any way i can do it? Like mapping certain areas?
https://jsfiddle.net/az_cotic/f1tLers2/28/

Hi,

You almost got it. Please try my modifications to raycast on mouse click:

https://jsfiddle.net/zjfpe86k/

The problem to select parts of the body is that your model is only one object. If you can divide it using a 3D editor, or obtain another model which is composed of the parts, the code already would work (selecting only one part on mouse click), since I used:
intersects[ 0 ].object.traverse (...

Hi Yombo, i could’t find a model human body i parts, BUT i trying with a tutorial to Split the model i have in parts, here we go. Thank you so much for your help. Is there a way to set this question to Solved?

1 Like

I would enhance Yombo’s code like this

function getMouseVector(event) {

const mouse = new THREE.Vector2();

mouse.x = (event.clientX / window.innerWidth) * 2 - 1;

mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

return mouse;

}

export function setMouseEventOnMesh({

eventName = 'click',    // optional

mesh,                   // required

callback = console.log, // optional

camera,                 // required

canvas,                 // optional

}) {

const raycaster = new THREE.Raycaster();

(canvas || document).addEventListener(eventName, (event) => {

    const mouse = getMouseVector(event);

    raycaster.setFromCamera(mouse, camera);

    const intersects = raycaster.intersectObject(mesh, true);

    const isObjectIntersecting = intersects.length > 0;

    if (isObjectIntersecting) {

        const [firstIntersected] = intersects;

        firstIntersected.object.traverse((object3D) => {

            const canExecuteCallback = object3D.isMesh && callback;

            if (canExecuteCallback) callback(object3D);

        });

    }

});

}