GLTF loaded object drag and drop

Questions
1

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
2

Have you already checked out this example?

https://threejs.org/examples/misc_controls_drag

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.

4

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.

5

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
6

@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

7

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
8

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
9

@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 .

10

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().

1 Like
11

@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

12

You are like a super hero.

When I grow up, I want to be just like you!

13

objects.push(gltf); is not working for me.
can anyone help me…
i am facing two problems.
THREE.DragControls is not a constructor and not able to push 3d model in array

14

Please ensure to import DragControls since the class is no part of the core. Check out the following example in order to study the respective setup:

https://threejs.org/examples/misc_controls_drag

What do you mean with “not working”. Please try to avoid such vague phrases and always formulate as concrete as possible.

15 
use following code to drag multi mesh GLTF. It is Work for me.

 var dragobjects =[];
 //add following code in init function
 var gltfobject = addGLTFObjectIntoScene();
 scene.add(gltfobject);

dragControls = new THREE.DragControls(dragobjects, camera, renderer.domElement);
dragControls.addEventListener('dragstart', onDragStart, false);
dragControls.addEventListener('drag', onDrag , false);
dragControls.addEventListener('dragend', onDragEnd, false);

//end init function code
//add following function after or before init function

 function drawBox(objectwidth,objectheight,objectdepth){
 var geometry, material, box;
 geometry = new THREE.BoxGeometry(objectwidth,objectheight,objectdepth);
 material = new THREE.MeshBasicMaterial({color: 0xffff00, transparent: true, opacity: 0,depthTest:false});
 box = new THREE.Mesh(geometry, material);
 dragobjects.push(box);
 box.position.set(0, 0, 0);
 return box;
};  
function addGLTFObjectIntoScene(){ 
 group = new THREE.Group();
 var loader = new THREE.GLTFLoader();
 loader.load( 'W1230/W1230.gltf', ( gltf ) => {
    mesh = gltf.scene;
    mesh.scale.set( 30, 30, 30);
    var gltfbox = new THREE.Box3().setFromObject( mesh );
    var objectwidth = Math.floor(gltfbox.getSize().x);
    var objectheight = Math.floor(gltfbox.getSize().y);
    var objectdepth = Math.floor(gltfbox.getSize().z);
    objectwidth = objectwidth + parseInt(2);
    objectheight = objectheight + parseInt(2);
    objectdepth  = objectdepth + parseInt(1);
    mesh.position.set(0, -objectheight/2, 0);
    box  = drawBox(objectwidth,objectheight,objectdepth); 
    group.add(box);
    group.name = "quadrant";
    console.log(mesh);
    box.add( mesh);
 });
 return group;
};
16

There is actually a PR that should fix this issue in a more clean way. Meaning, it’s not necessary anymore to change app level code. All you need to do is to set a flag in DragControls and you will be able to drag a 3D object with children as a group.