如何在threejs中移动gltf模型？答案

【问题标题】：How move a gltf model in threejs?如何在threejs中移动gltf模型？
【发布时间】：2019-09-10 14:53:50
【问题描述】：

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

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

KeyboardState.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？

【问题讨论】：

不是您问题的答案，但您可能会发现 this article 有用

标签： javascript three.js gltf

【解决方案1】：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Demo</title>
  </head>
  <body>
    <script src="https://rawcdn.githack.com/mrdoob/three.js/d9f87fb1a2c5db1ea0e2feda9bd42b39b5bedc41/build/three.min.js
"></script>
    <script src="https://unpkg.com/three@0.85.0/examples/js/controls/OrbitControls.js"></script>
    <script src="https://unpkg.com/three@0.87.1/examples/js/loaders/GLTFLoader.js"></script>

    <script>
      var scene, camera, renderer;

      function init() {
        scene = new THREE.Scene();
        camera = new THREE.PerspectiveCamera(
          75,
          window.innerWidth / window.innerHeight,
          0.1,
          1000
        );

        scene.background = new THREE.Color(0xefefef);
        camera.position.set(5, 5, 5);

        renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
   
        var car;
        var loader = new THREE.GLTFLoader();
        loader.load(
          "https://rawcdn.githack.com/siouxcitizen/3DModel/a1c2e47550ca20de421f6d779229f66efab07830/yuusha.gltf",
          function (gltf) {
            car = gltf.scene;
            scene.add(car);
          }
        );

        controls = new THREE.OrbitControls(camera, renderer.domElement);

        function animate() {
          requestAnimationFrame(animate);
          renderer.render(scene, camera);
        }

        animate();
      }

      init();
    </script>
  </body>
</html>

试试这个例子

【讨论】：

请在您的回答中添加一些解释
这个例子展示了如何使用 gltf 加载器以及如何在该模型上应用轨道控制。

【解决方案2】：

您似乎没有正确使用KeyboardState。这个想法是使用pressed() 方法来验证是否按下了某个键。您还可以在下面的实时示例中看到，只有 glTF 模型被平移，而不是整个场景（因为轴助手保持在中心）。

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

【讨论】：