GLTF loaded object drag and drop

How can i actually do drag and drop on a object(move with mouse) i loaded in with GLTF loader in Three.js. I couldn’t make it working with DragControls.js. If i load in basic model in three.js -

 var loader = new THREE.GLTFLoader();
            loader.load(
                `objekt.gltf`,
                ( gltf ) => {
                  this.scene.add(gltf.scene);
                    gltf.scene.scale.set(100000, 100000, 1000);
					gltf.scene.position.set(500,23232,32323)

        gltf.scene.rotation.copy(new THREE.Euler(0, -3 * Math.PI / 4, 0));
        gltf.scene.position.set(2, 1, 0);

                },
                null,
                null
            );

How can i actually move it with mouse?

1 Like

Have you already checked out this example? https://threejs.org/examples/#webgl_interactive_draggablecubes

You have to add your draggable objects to a separate array. In the next step, you use this array as a parameter for the DragControls constructor.

Emm, even when i load model with GLTFLoader - into example u gave me - @Mugen87 and push into Objects array…i’m getting error - object.raycast is not a function three.js:42091:3 I guess i’m missing something important about ray cast.

var loader = new THREE.GLTFLoader();
        loader.load(
            `objekt.gltf`,
            ( gltf ) => {
              this.scene.add(gltf.scene);
                gltf.scene.scale.set(1000, 1000, 1000);
				gltf.scene.position.set(500,500,500)
    gltf.scene.position.set(0, 0, 0);
    scene.add(gltf.scene);
    objects.push(gltf);
            },
            null,
            null
        )

Also i deleted stackflow post, cause i didnt know there is such a help forum as this.

It’s because of objects.push(gltf);. gltf.scene contains objects of type Group that don’t implement a raycast method. Try something like this:

gltf.scene.traverse( function( object ) {

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

} );
2 Likes

@Mugen87 Big ups for helping a newbie like me! :slight_smile:

Cubes are movable again, but when i click on the “table mesh” its just randomly moves somewhere and i can’t even find it.

GITHUB

Well its mooving around now, but the movement is way way way to fast

I’ve edited your file a bit. The movement was so fast because gltf.scene was scaled that much.

BTW: There is still a problem since the bolts and the table are separate meshes. You should try to combine both into a single one.

webgl_interactive_draggablecubes.html (2.7 KB)

3 Likes

Super! Thank you so much! I just were not able to figure this out for a couple of day to be honest.Thanks again! <3

1 Like

@Mugen87 I am trying to move a GLTF object by THREE.DragControl with this implementation:

gltf.scene.traverse( function( object ) {

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

} );

This results in drag enable for each individual object present in the parent GLTF object.My question is how can I combine all the child objects in a single object which as a whole can be dragged.

Thanks .

You can merge objects in a DCC tool (like Blender), so before loading the asset into your app. Otherwise you can try to use BufferGeometryUtils.mergeBufferGeometries().

@Mugen87 I tried to load the gltf (object) which is made up of multiple elements,when I try to select and drag the object , I am able to drag only one element .Please help me to fix this issue.

Here is my code:

var loader = new THREE.GLTFLoader();
loader.load( ‘W3030/W3030.gltf’, ( gltf ) => {
this.scene.add( gltf.scene );
gltf.scene.scale.set(1, 1, 1);
// gltf.scene.position.set(400,400,400)
gltf.scene.traverse( function( object ) {
if ( object.isMesh ) objects.push( object );
if ( object.isMesh ) objects.castShadow = true;
} );
});

Here is the screenshot for gltf:

Normal : https://prnt.sc/pu940g
After Drag : https://prnt.sc/pu93g3