如何在 3js 中对 GLTF 元素进行分组并拖放答案

【问题标题】：How to group GLTF element and drag and drop in 3js如何在 3js 中对 GLTF 元素进行分组并拖放
【发布时间】：2020-03-07 19:10:45
【问题描述】：

我可以拖放单个 GLTF 元素。但是我无法拖动的元素组。我正在使用以下代码

var loader = new THREE.GLTFLoader();
                loader.load( 'W3030/W3030.gltf', ( gltf ) => {

                    gltf.scene.traverse( function( child ) {
                        if(child.type === "Group")
                        {
                            newObject = true;
                            GLTFobjects.push(child);
                        }
                        if ( child.isMesh ) {
                            child.receiveShadow = true;
                            child.castShadow = true;
                            child.material.transparent = true;
                            child.material.opacity = 1;
                        }

                    });
                     scene.add(GLTFobjects);
                     gltf.scene.scale.set(1, 1, 1);

                });

【问题讨论】：

标签： reactjs three.js

【解决方案1】：

恐怕DragControls 不支持Group 的实例，因为没有Group.raycast() 方法。

您可以通过用不可见的网格替换组来实施解决方法。但是，不是将Object3D.visible 设置为false，而是为Material.visible 执行此操作。否则，光线投射逻辑将不会执行相交测试。然后有必要使用足够大的几何图形来包围各个子节点。

three.js R110

【讨论】：

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; } ); });跨度>
我参考您的以下评论并帮助我。 discourse.threejs.org/t/how-drag-correctly-the-obj-file/7599
你能看到这个吗？ discourse.threejs.org/t/…

【解决方案2】：

您好，感谢您的支持。现在我拖。使用以下代码拖动多网格 GLTF。这是为我工作。

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

【讨论】：