A human body with clickable areas

[john-evan08]

Is it possible to load a 3d human body model with clickable areas (like shoulder,neck ...) ?
It seems that the interaction is with the full model and it's not possible to create areas. I would like to imitate the behaviour in 2D html

[conor-v]

hey @john-evan08 depends on how many meshes your 3d human is made out. With this link you can convert glb files to ready code for r3f. And you can see how many meshes your 3d object has. After importing the 3d model. You have to put the materials in a different color to see which mesh is which part. Once you know that, it's about putting onClick events on the right meshes.

link --> https://gltf.pmnd.rs/

example:

e.stopPropagation() --> only clicks that part no part behind it (stops event on object)
more info on e.stopPropagation() --> https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation

<mesh
  castShadow
  receiveShadow
  geometry={nodes.rear.geometry}
  material={materials.layout}
  rotation={[Math.PI / 2, 0, 0]}
  onClick={(e) => {
    e.stopPropagation()
    console.log("car part !!!!!!");
  }}
/>

[john-evan08]

Thank you !!

Just to be sure, it means that I need to find a 3D body model with meshes that corresponds to the body part I need to select ?

Else, I will have to create my own body model with one mesh for each part ?

[conor-v]

yes indeed after exporting your model you should see which meshes you need. and put a click event on it.
if you make it yourself you must have a file for each part (in blender or other 3d program). by exporting and testing a few times you will see how your 3D model will turn out. and you can still adjust if necessary.

[conor-v]

@john-evan08 don't forget to mark an answer correct if it helped. this way other people with the same problems can quickly find the answers. and the same question should not be answered over and over again. :)