使用三个js拖放GLTF加载对象答案

【问题标题】：GLTF loaded object drag and drop using three js使用三个js拖放GLTF加载对象
【发布时间】：2020-05-25 20:09:14
【问题描述】：

当我尝试选择并拖动对象时，我尝试加载由多个元素组成的 gltf（对象），我只能拖动一个元素。请帮我解决这个问题。

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

GLTF 演示屏幕截图：

拖动前：https://prnt.sc/pu940g

拖动后：https://prnt.sc/pu93g3

【问题讨论】：

标签： javascript jquery reactjs three.js

【解决方案1】：

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

//结束初始化函数代码 //在init函数之后或之前添加以下函数

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

【讨论】：

【解决方案2】：

即使您加载单个 glTF 资产，视觉对象也可以由许多单独的 3D 对象组成。由于THREE.DragControls 在对象级别上工作，所以提到的结果就是预期的行为。

解决此问题的最简单方法是在 Blender 等内容创建工具中合并对象的单个部分，然后导出新的glTF。否则，您必须通过three.js 将单个网格合并成一个更大的网格。或者您更改THREE.DragControls，以便它也能够根据其边界框选择组对象。

three.js R113

【讨论】：