Move entire part of a .glb and not the single part

Questions
1

When I use this code to load a .glb model, happen that if I want to move the object, imported inside .glb file, I can move only thr single part and not the entire object.
Can you help me?

	const loader = new GLTFLoader()
	loader.load('/models/myglb.glb', 
       function(glb){			
        const root = glb.scene;
        root.position.set(0,0,0);
        root.scale.set(100,100,100);     

        scene.add(root);
        objects.push(root);

	}, function(xhr){
		console.log((xhr.loaded/xhr.total * 100) + "% loaded")
	}, function(error){
		console.log('Error')
	})
2

The code you’ve shared moves the entire object (if you want to move a single part instead - you can use root.getObjectByName("name-of-a-subpart") to select a submesh within the loaded model - and the move it separately.)

Could you share a video / codepen showing what you mean by “moving only a single part” ?

1 Like
3

myglb.glb is a parallelepiped. I want to move entire parallelepiped when I click on it and not only the clicked face of parallelepiped.

4

You mean dragging the main object by clicking on any children?

If you don’t use react or other frameworks, I wrote a library that might be useful for you: three.ez

5

You can for example assign the top-most mesh in the userData of the loaded model and all of it’s children. Then retrieve only that top-most model reference when raycasting:

GLTFLoader.load('model.glb', model => {
  model.scene.traverse(child => {
    child.userData.interactionTarget = model.scene;
  });
});

Then in the dragging code:

const hits = raycaster.intersectObjects(scene.children, true);

if (hits[0]) {
  const hitModel = hits[0].object.userData.interactionTarget || hits[0].object;

  // NOTE `hitModel` will now point to the top-most mesh of the loaded GLB, and fallback to intersected mesh, if it wasn't the loaded model

  hitModel.position.set(10.0, 10.0, 10.0);
}