# help,GLTF not draggable

**URL:** <https://discourse.threejs.org/t/help-gltf-not-draggable/5402>\
**Category:** Questions\
**Tags:** drag-controls\
**Created:** [December 18, 2018, 8:30am UTC](https://discourse.threejs.org/t/help-gltf-not-draggable/5402 "2018-12-18T08:30:45Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![1118](https://avatars.discourse-cdn.com/v4/letter/1/a88e4f/32.png) [@1118](https://discourse.threejs.org/u/1118)\
**Post date:** [December 18, 2018, 8:30am UTC](https://discourse.threejs.org/t/help-gltf-not-draggable/5402/1 "2018-12-18T08:30:45Z")

</div>

[bone\_test.glb](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/d/d0ced46b1f130cb4caf0edc3a7c0553829a81ca8.glb) (511.2 KB)

[example file]  
[threejs.zip](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/0/03c307b845cbc82dddc37b1b6a54cbf7e24c8149.zip) (632.1 KB)

```
			var loader = new THREE.GLTFLoader();
			loader.load( `../temporarilyFile/bone_test.glb`, ( gltf ) => {
				this.scene.add( gltf.scene );
				gltf.scene.traverse( function( object ) {
					if ( object.isMesh ) objects.push( object );
				} );
			});

			var dragControls = new THREE.DragControls( objects, camera, renderer.domElement );
			dragControls.addEventListener( 'dragstart', function ( event ) { controls.enabled = false; });
			dragControls.addEventListener( 'dragend', function ( event ) { controls.enabled = true; });

```

The object has draggable event set The object is not actually moved

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [December 18, 2018, 3:21pm UTC](https://discourse.threejs.org/t/help-gltf-not-draggable/5402/2 "2018-12-18T15:21:26Z")

</div>

I think you need to put `gltf.scene` into the array of draggable objects, not the individual meshes. Mesh positions are controlled by bones if this is a skinned mesh (which from the filename it seems to be).

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [December 18, 2018, 3:29pm UTC](https://discourse.threejs.org/t/help-gltf-not-draggable/5402/3 "2018-12-18T15:29:31Z")

</div>

`DragControls` likely won’t raycast scene’s children:

> <https://github.com/mrdoob/three.js/blob/6736584953fc047698c66cd976edd85961c7c3fa/examples/js/controls/DragControls.js#L88>

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [December 18, 2018, 3:45pm UTC](https://discourse.threejs.org/t/help-gltf-not-draggable/5402/4 "2018-12-18T15:45:04Z")

</div>

Hm. In that case I’m not sure how to use it with a SkinnedMesh. The raycaster would at least need the `recursive=true` option with the scene then. Whether that fixes the issue I don’t know. The problem is that you need to move the bone or a parent, not the mesh, but can’t raycast against the bone.

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [May 18, 2020, 12:00pm UTC](https://discourse.threejs.org/t/help-gltf-not-draggable/5402/5 "2020-05-18T12:00:17Z")

</div>

I solved this problem by creating a secondary cube, binding the drag controls to that, and then updating the gltf.scene to the position of the cube being dragged.  
Example  
[https://sbcode.net/threejs/gltf-animations-drag/](https://sbcode.net/threejs/gltf-animations-drag/)

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/e/e8cb5a263ce8daca50ba14a79f15ab29d256eafa.jpeg)

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [May 18, 2020, 5:13pm UTC](https://discourse.threejs.org/t/help-gltf-not-draggable/5402/6 "2020-05-18T17:13:10Z")

</div>

In the meanwhile, `DragControls` has limited support for dragging entire groups. More information here:

> [@Gltf loader and Drag Controls](https://discourse.threejs.org/t/gltf-loader-and-drag-controls/15166/2):
>
> There is actually limited support for this use case. First, you have to set [DragControls.transformGroup](https://threejs.org/docs/index.html#examples/en/controls/DragControls.transformGroup) to true. Next, you have to ensure to pass only a single glTF object (which is of type THREE.Group) to DragControls. It should then be possible to drag the entire object. The group dragging feature is demonstrated in the official example. [https://threejs.org/examples/misc\_controls\_drag](https://threejs.org/examples/misc_controls_drag)