Hit boxes on an animated model (gLTF)?

I have a 3D animated model from a gLTF file in my ThreeJS scene. I want to do different things based on what part of the model they are looking at. For example, if it is a human model: the head, the feet, etc.

Is there a way to place hit boxes in a gLTF model so that the ThreeJS raycasting feature would tell me what hit box the user (camera) is looking at, just like it does for non-animated 3D objects in the scene? If not, is there a way to get this done?

the way I did that at one of my models was adding names to my model bones and then:

let i=0;
for(let mod of this.model.skeleton.bones){
          
  if(mod.name=="head" || mod.name=="left_feet" || mod.name=="right_feet"|| mod.name=="left_arm" || mod.name=="right_arm"){
    
    this.hitbox[i] = new THREE.Mesh(new THREE.BoxBufferGeometry(0.7,1,1),this.vars.basicMaterial);
    this.hitbox[i].visible=false;
    this.hitbox[i].name=mod.name;
    this.scene.add( this.vars.hitbox[i] );  
    mod.getWorldPosition(this.vars.hitbox[i].position)
    mod.attach ( this.vars.hitbox[i]) 
   
    i++;

  }
1 Like

Thanks. I’m a programmer and not an animator. Is changing the bone names an easy task like modifying a text file somewhere? Or do I need an advanced editor like Maya or something and decent animator skills, so I’ll probably have to hire someone to do that?

I see you´re importing a gLTF file. try to do a console.log and see if the model has bones. if it does, maybe the bones already has names. Another way is importing the model to a 3D editor like Blender and see if it has bones.

For the animations. Depends. If you need to do complex animations (like human moves), I suggest you create them in an editor. If the animations you need are more like rotating objects and/or moving them from point A to point B. Then I think threejs should be enough or you can even use gsap