# Cannot drag GLTF mesh

**URL:** <https://discourse.threejs.org/t/cannot-drag-gltf-mesh/29834>\
**Category:** Questions\
**Tags:** drag-controls\
**Created:** [September 11, 2021, 4:03pm UTC](https://discourse.threejs.org/t/cannot-drag-gltf-mesh/29834 "2021-09-11T16:03:02Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Calpgrmr](https://avatars.discourse-cdn.com/v4/letter/c/3bc359/32.png) [@Calpgrmr](https://discourse.threejs.org/u/Calpgrmr)\
**Post date:** [September 11, 2021, 4:03pm UTC](https://discourse.threejs.org/t/cannot-drag-gltf-mesh/29834/1 "2021-09-11T16:03:02Z")

</div>

In the following code, I add a cube and a GLTF mesh - which is a simple cone.

And Drag Controls.

The cube drags as expected but the mesh does not.

Can anyone see what I’m doing wrong?

Thanks!

CODE:

```
	<script type="module">
		import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r132/build/three.module.js';
		import {GLTFLoader} from 'https://threejsfundamentals.org/threejs/resources/threejs/r132/examples/jsm/loaders/GLTFLoader.js';
		import { DragControls } from 'https://threejsfundamentals.org/threejs/resources/threejs/r132/examples/jsm/controls/DragControls.js';
		
		const scene = new THREE.Scene();
		const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

		const renderer = new THREE.WebGLRenderer();
		renderer.setSize( window.innerWidth, window.innerHeight );
		document.body.appendChild( renderer.domElement );

		const objects = [];
		
		const geometry = new THREE.BoxGeometry();
		const material = new THREE.MeshBasicMaterial( { color: 0x444400 } );
		const cube = new THREE.Mesh( geometry, material );
		scene.add( cube );
		objects.push( cube );

		const loader = new GLTFLoader();
		let model, mixer;

		loader.load( 'cone.glb', function ( gltf ) {
			model = gltf.scene;

			scene.add( model );
			
			gltf.scene.traverse( function( object ) {

			   if ( object.isMesh) {
					objects.push( object );
			   }
			} );
		} );

		const directionalLight = new THREE.DirectionalLight( 0xFAEBD7, 20 );
		scene.add( directionalLight );
		
		camera.position.z = 5;

		let controlsDrag, group;

		controlsDrag = new DragControls( [... objects], camera, renderer.domElement );

		const animate = function () {
			requestAnimationFrame( animate );

			cube.rotation.x += 0.01;
			cube.rotation.y += 0.01;

			renderer.render( scene, camera );
		};

		animate();
	</script>
```

---

<div class="post-metadata">

**Author:** ![Calpgrmr](https://avatars.discourse-cdn.com/v4/letter/c/3bc359/32.png) [@Calpgrmr](https://discourse.threejs.org/u/Calpgrmr)\
**Post date:** [September 11, 2021, 5:34pm UTC](https://discourse.threejs.org/t/cannot-drag-gltf-mesh/29834/2 "2021-09-11T17:34:04Z")

</div>

Update: Here it is on a server…

[http://therawaudio.com/radioc/LIL3D.html](http://therawaudio.com/radioc/LIL3D.html)

---

<div class="post-metadata">

**Author:** ![hblee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hblee/32/19532_2.png) [@hblee](https://discourse.threejs.org/u/hblee)\
**Post date:** [September 15, 2021, 1:45am UTC](https://discourse.threejs.org/t/cannot-drag-gltf-mesh/29834/3 "2021-09-15T01:45:06Z")

</div>

I have checked the ‘LeeB4.glb’, and the hierarchy is like:

```javascript
Group
|- Camera
|- Lee (Object3D)

```

So, the actual mesh is not a Mesh but an Object3D. Below code does not work:

```javascript
gltf.scene.traverse( function( object ) {
        // Object3D does not have .isMesh, so it will never been pushed
	if ( object.isMesh) {
		objects.push( object );
	}
} );

```