时间戳

首页 > 解决方案 > 如何在 3js 中对 GLTF 元素进行分组并拖放

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

问题描述

我可以拖放单个 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);

                });

标签： reactjsthree.js

解决方案

由于没有方法，恐怕Group不支持的实例。DragControlsGroup.raycast()

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

three.js R110

推荐阅读