CODEWITHSUNDEEP
three.js
Naushad
Naushad

Reputation: 23

Add an event listener to a particular part of a 3D Object in Three.js

I am having a human body object and what I want is that my code should open a popup whenever I click on any of the specified body parts such as eyes, nose, arms, etc. The object is a single compiled .obj file and I'm unable to figure out as to how should I attach an event listener to the multiple body parts. Any kind of help is much appreciated!

PS: - I am also using orbit controls to handle the zoom and rotation of object.

Thanks in advance..

Upvotes: 2

Views: 639

Answers (1)

Mugen87
Mugen87

Reputation: 31026

To solve this issue, it's necessary to design your model in a way such that individual components like arms, eyes etc. are independent 3D objects grouped together to build a more complex asset. This is something you have to ensure during the design phase with a tool like Blender.

In the next step export to glTF instead of OBJ, load the model with THREE.GLTFLoader into your app and then perform a recursive raycasting with the entire asset via:

raycaster.intersectObject( gltf.scene, true, intersects );

By executing this code in a pointermove or pointerdown event listener you can find out whether the user interacts with the model or not.

Notice that three.js has no system to directly assign event listeners to 3D objects. You have to use a different solution like raycasting for this.

Upvotes: 1

Related Questions