threejs如何对多个外部导入模型（obj）进行拖拽，平移？

Question

1.问题：使用threejs首先将多个外部obj模型导入，然后使用dragControls对每个模型进行鼠标移动拖拽，问题是dragControls可以对type为mesh的进行单个移动，但是无法对obj模型（type为group）进行单个移动？

2.参考链接https://www.cnblogs.com/tracy...

尝试使用过raycaster，但是按照链接进行的情况是执行这句代码的时候
// 获取与射线相交的对象数组，其中的元素按照距离排序，越近的越靠前

var intersects = raycaster.intersectObjects(scene.children);
intersects会为空。

3.代码如下：

//加载mtl
        for (let i =0;i<objUrl.length;i++){

            var onProgress = function ( xhr ) {

                if ( xhr.lengthComputable ) {

                    var percentComplete = xhr.loaded / xhr.total * 100;
                    console.log( Math.round( percentComplete, 2 ) + '% downloaded' );

                }

            };

            var onError = function () { };

            // var cylBleu = new THREE.MeshNormalMaterial( { transparent: true, opacity: 0 });

            new THREE.MTLLoader()
                    .setPath( 'models/obj/female02/' )
                    .load( mtlUrl[i]+'.mtl', function ( materials ) {

                        materials.preload();

                        new THREE.OBJLoader()
                                .setMaterials( materials )
                                .setPath( 'models/obj/female02/' )
                                .load( objUrl[i]+'.obj', function ( object ) {
                                    //设置模型的位置
                                    object.position.x = 2+i*100;
                                    object.position.y = 2;
                                    object.position.z = 2;

                                    object.castShadow = true;
                                    object.receiveShadow = true;

                                    //将模型加入到场景中去
                                    scene.add(object);
                                    objects.push(object);

                                }, onProgress, onError );
                    } );

        }

......
//    实现拖拽外部模型 待完善
    function getIntersects(e){
        e.preventDefault();
        console.log('event.clientX:'+ event.clientX);
        console.log('event.clientY:'+ event.clientY);

        //声明 raycaster 和 mouse 变量
        var raycaster = new THREE.Raycaster();
        var mouse = new THREE.Vector2();

        // 通过鼠标点击位置,计算出 raycaster 所需点的位置,以屏幕为中心点,范围 -1 到 1
        mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
        mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

        //通过鼠标点击的位置(二维坐标)和当前相机的矩阵计算出射线位置
        raycaster.setFromCamera(mouse, camera);

        // 获取与射线相交的对象数组，其中的元素按照距离排序，越近的越靠前
        // var intersects = raycaster.intersectObjects(scene.children);

        //返回选中的对象
        // return intersects;

        //找到场景中所有外部模型
        var scensObjs = [];
        /*for (let i=0;i<scene.children.length;i++){

            if (scene.children[i].type == "Group") {
                var obj=scene.children[i];
                scensObjs.push(obj);
            }
        }*/
        scene.children.forEach(child => {
            for (var i = 0; i < child.children.length; i++) {
                var obj=child.children[i];
                scensObjs.push(obj);
            }

        });


        //返回选中的外部模型对象
        var intersects = raycaster.intersectObjects(scensObjs);

        return intersects;
}

Answer 1

大神，您好，你解决DragControls控件拖动外部整体的模型了没，我也遇到这样的问题，导入外部模型，用DragControls拖动时，模型不能整体被拖动，只有它的子集被单独拖动，好烦恼！！求助大神了，谢谢！！