How move a gltf model in threejs?

Question

How move a gltf model in threejs indipendently from the scene defined?

In my code I have updated an gltf model and I tried to move it using KeyboardState.js. The control used is OrbitControl.js.

KeyboardState.js : https://searchcode.com/codesearch/view/69477532/

This is the load function that I use:

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' );

                        }
                    );

        }

This is the update function that I use for the Keyboard input:

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();
        }

But actually what happens is that the object moves with all the scene and not independly from that. If I use the same code to move e.g a sphere it works. Why? Maybe the gltf file is inside dependent from scene in a implicit way, instead a simple THREE.SphereGeometry is not?

Not an answer to your question but you might find [this article](https://threejsfundamentals.org/threejs/lessons/threejs-load-gltf.html) useful — gman, Apr 21 '19 at 21:23

score 1 · Answer 1 · answered Apr 21 '19 at 09:28

It seems you are not using KeyboardState correctly. The idea is to used the pressed() method in order to verify if a certain key is pressed. You can also see at the following live example, that only the glTF model is translated and not the entire scene (since the axes helper stays at the center).

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

Iron Man · Answer 2 · 2022-01-19T07:46:24.427

<!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 avtar;
        var loader = new THREE.GLTFLoader();
        loader.load(
          "https://rawcdn.githack.com/siouxcitizen/3DModel/a1c2e47550ca20de421f6d779229f66efab07830/yuusha.gltf",
          function (gltf) {
            avtar = gltf.scene;
            scene.add(avtar);
          }
        );

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

        document.onkeydown = function (e) {
          switch (e.keyCode) {
            case 37:
              avtar.scale.z += 0.1;
              break;
            case 39:
              avtar.scale.z -= 0.1;
              break;
          }
        };
        
        function animate() {
          requestAnimationFrame(animate);
          renderer.render(scene, camera);
        }

        animate();
      }

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

Try this example

Please add some explanation to your answer – Sfili_81 Mar 18 '21 at 14:09 — Sfili_81, Mar 18 '21 at 14:09

How move a gltf model in threejs?

2 Answers2