Question

如何从定义的场景中独立地在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？

Answer 1

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

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

Answer 2

<!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>

试试这个例子

如何在threejs中移动gltf模型？

2 个答案: