GLTF loaded object drag and drop using three js

Question

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.

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.traverse(function(object) {
    if (object.isMesh) objects.push(object);
    if (object.isMesh) objects.castShadow = true;
  });
});

Screenshot for GLTF Demo:

Before Drag: https://prnt.sc/pu940g

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

Answer 1

Even if you load a single glTF asset, the visual object can be composed of many individual 3D objects. Since THREE.DragControls works on object level, the mentioned result is the intended behavior.

The easiest way to fix this problem is to merge the single parts of your object in a content creation tool like Blender and then export a new glTF . Otherwise you have to merge the single meshes into a bigger one via three.js . Or you change THREE.DragControls so it is also able to select the group object based on its bounding box.

three.js R113

Answer 2

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;
};