GLTFLoader - Movement using Keyboard

Currently, I have a simple object rendered using the GLTFLoader. However, I would like to know how to move the object using keyboard inputs. Below is the current code. (I’m sorry, I don’t know how to format it properly.)

<html>
<head>
    <title>Brick Game</title>

    <style>
        body { margin; 0; }
        canvas { width: 100%; height 100%; };
    </style>
</head>

<body>
    <script src="js/three.min.js"></script>
    <script src="js/GLTFLoader.js"></script>
        
    <script>
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
        const light = new THREE.PointLight(0xFFFFFF);
        const boxGeometry = new THREE.BoxGeometry(20, 20, 20);
        const basicMaterial = new THREE.MeshNormalMaterial({color: 0x0095DD});
        const cube = new THREE.Mesh(boxGeometry, basicMaterial);
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setClearColor(0xDDDDDD, 1);
        document.body.appendChild(renderer.domElement);

        const loader = new THREE.GLTFLoader()
        loader.load('/models/brick1.glb', (loadedModel) => {
            scene.add(loadedModel.scene)
            console.log('model loaded!')
        })
        

        // Draw.
        function render()
        {
            requestAnimationFrame(render);
            renderer.render( scene, camera );
            camera.position.z = 50;
            scene.add(camera);
            //scene.add(cube);
            light.position.set(-10, 15, 50);
            scene.add(light);
        }
        render();

        function animate()
        {
            requestAnimationFrame(animate);

            // cube.rotation.x += 0.02;
            // cube.rotation.y += 0.02;
    
            renderer.render(scene, camera);
        }

        animate();
    </script>
</body>

@XenonH

It would be roughly something like this…

  document.addEventListener('keydown', function(event) {
    if(event.keyCode == 37) {
        Console.log('Left was pressed');
Cube.position.x +=1;
    }
    else if(event.keyCode == 39) {
        Console.log('Right was pressed');
Cube.position.x -=1;
    }
});

You could also make case statements for each input which is neater and also seperate the event listener from the function so you could call the function in animation loop but this should push you in the right direction…

Safe x

3 Likes

:point_up_2: that for the cube, and in case you meant moving the glTF model - what you can do is basically the same, only save your model to a variable first.

let model;

new GLTFLoader().load('model.glb', (loadedModel) => {
  model = loadedModel.scene;

  scene.add(model);
});

// Then in the render function, something as forerunrun suggested (keep in mind model conditional, since loading is async)
function animate() {
  if (model) {
    if (keyLeft) {
      model.position.x -= 1.0;
    }

    if (keyRight) {
      model.position.x += 1.0;
    }
  }
}
1 Like