How to select gltf (whole object) model using raycaster?

Questions
1

i am able to select different mesh of gltf object using raycaster using gltf.scene.traverse() function.
but not able to select whole object using raycaster.
any help will be appreciate?

2

You could give your gltf a name or tag as soon as its loaded (this also works if you want different parts of the model. You have to seperate your model and give them the tag. Object name in Blender will also be the name in Threejs. Also possible to give custom properties via Blender, youll find them in userData.property)

gltfLoader.load('....', (gltf)=> {

   let model = gltf.scene
   model.name = 'tagName' // OR
   model.userData.isContainer = true

})

Then when raycasting from your mouse, you could go from child to parent and look for the tag/name

let intersects = this.raycaster.intersectObject(objs, true)

if(intersects.length > 0) {
   
   container = getContainerObjByChild(intersects[0].object);
}


// Recursive function - this function calls itself again, when isContainer is undefined/false passing its parent as new child

function getContainerObjByChild(child) {
  
   if(obj.userData.isContainer) return obj

   else if(obj.parent != null) return this.getContainerObjByChild(obj.parent)

   else return null
}
1 Like
3

Hi @shubham_soni, how did you manage to select different parts of gltf? I have the opposite issue - can select the whole object but not it’s part. Here is an example: https://codepen.io/yaroslavnikiforov/project/editor/DaVpyx
I want to catch the click only on the arm or leg, for example, of the model.