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

**URL:** <https://discourse.threejs.org/t/move-entire-part-of-a-glb-and-not-the-single-part/58045>\
**Category:** Questions\
**Tags:** object3d\
**Created:** [November 11, 2023, 6:25pm UTC](https://discourse.threejs.org/t/move-entire-part-of-a-glb-and-not-the-single-part/58045 "2023-11-11T18:25:41Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Tiziana\_Fergi1](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/tiziana_fergi1/32/41731_2.png) [@Tiziana\_Fergi1](https://discourse.threejs.org/u/Tiziana_Fergi1)\
**Post date:** [November 11, 2023, 6:25pm UTC](https://discourse.threejs.org/t/move-entire-part-of-a-glb-and-not-the-single-part/58045/1 "2023-11-11T18:25:41Z")

</div>

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?

```javascript
	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')
	})

```

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [November 11, 2023, 7:47pm UTC](https://discourse.threejs.org/t/move-entire-part-of-a-glb-and-not-the-single-part/58045/2 "2023-11-11T19:47:15Z")

</div>

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” ?

---

<div class="post-metadata">

**Author:** ![Tiziana\_Fergi1](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/tiziana_fergi1/32/41731_2.png) [@Tiziana\_Fergi1](https://discourse.threejs.org/u/Tiziana_Fergi1)\
**Post date:** [November 12, 2023, 8:07am UTC](https://discourse.threejs.org/t/move-entire-part-of-a-glb-and-not-the-single-part/58045/3 "2023-11-12T08:07:02Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![agargaro](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/agargaro/32/35529_2.png) [@agargaro](https://discourse.threejs.org/u/agargaro)\
**Post date:** [November 12, 2023, 9:15am UTC](https://discourse.threejs.org/t/move-entire-part-of-a-glb-and-not-the-single-part/58045/4 "2023-11-12T09:15:52Z")

</div>

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

https://codepen.io/agargaro/embed/preview/MWLoJZp?default-tabs=js%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=MWLoJZp

If you don’t use react or other frameworks, I wrote a library that might be useful for you: [three.ez](https://discourse.threejs.org/t/three-ez-library-for-events-drag-drop-binding-focus-management-smart-rendering-tweening-and-more/56007)

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [November 12, 2023, 3:33pm UTC](https://discourse.threejs.org/t/move-entire-part-of-a-glb-and-not-the-single-part/58045/5 "2023-11-12T15:33:46Z")

</div>

You can for example assign the top-most mesh in the [userData](https://threejs.org/docs/index.html?q=obje#api/en/core/Object3D.userData) of the loaded model and all of it’s children. Then retrieve only that top-most model reference when raycasting:

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

```

Then in the dragging code:

```js
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);
}

```