javascript - 如何在 threejs 中移动 gltf 模型？

Question

如何在定义的场景中独立移动threejs中的gltf模型？

在我的代码中，我更新了一个 gltf 模型，并尝试使用 KeyboardState.js 移动它。使用的控件是OrbitControl.js。

键盘状态.js:https://searchcode.com/codesearch/view/69477532/

这是我使用的加载函数:

function loadGLTF(x,y,z,mesh,url){
            var loader = new THREE.GLTFLoader();
                // model
                loader.load(
                        // resource URL
                        url,
                        // called when the resource is loaded
                        function ( gltf ) {

                            mesh = gltf.scene;
                            mesh.position.set(x,y,z);
                            scene.add(mesh);
                        },
                        // called while loading is progressing
                        function ( xhr ) {

                            console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );

                        },
                        // called when loading has errors
                        function ( error ) {
                            console.log(error);
                            console.log( 'An error happened' );

                        }
                    );

        }

这是我用于键盘输入的更新函数:

function update()
        {
            keyboard.update();

            var moveDistance = 50 * clock.getDelta(); 

            if ( keyboard.down("W") ) 
                mesh.translateY( moveDistance );

            if ( keyboard.down("S") ) 
                mesh.translateY(   -moveDistance );

            if ( keyboard.down("A") ){
                console.log("entered in A");
                mesh.translateX( -moveDistance );
            }

            if ( keyboard.down("D") ){
                console.log("entered in D");
                mesh.translateX(  moveDistance );
            }


            controls.update();
            stats.update();
        }

但实际上发生的是对象随所有场景移动，而不是独立于场景移动。如果我使用相同的代码来移动，例如它可以工作的球体。为什么？也许 gltf 文件以隐式方式在内部依赖于场景，而不是简单的 THREE.SphereGeometry 不是吗？

Answer 1

看来您没有正确使用 KeyboardState。这个想法是使用 pressed() 方法来验证是否按下了某个键。您还可以在下面的实例中看到，只有 glTF 模型被翻译，而不是整个场景(因为轴助手位于中心)。

https://jsfiddle.net/kd41ejua/1/