Three.js – Mover un cubo con teclado

Otro ejemplo en Three.js en el que podemos ver cómo mover un objeto capturando el teclado al que llamamos ejemplo three.js teclado . Moveremos a derecha e izquierda el cubo según si se pulsa la tecla izquierda o derecha.

Observad que hemos declarado dos variables globales que serán las que utilicemos para mover el objeto (al final del artículo tenéis el ejemplo en tiempo real con su código):

1
2
var xSpeed= 1.0;
var direction= "stop";

La primera indica los saltos que hará el objeto en el eje de las X. La segunda variable indica qué dirección está tomando el cubo. Inicialmente está parado.

Veamos el código que trata la captura del teclado. Como podéis ver si se pulsa izquierda, actuará de dos maneras: si está parado, empezará a moverse a la izquierda. Si se estaba moviendo a la derecha, entonces se parará. Lo mismo será el tratamiento de la tecla derecha.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
document.addEventListener("keydown", onDocumentKeyDown, false);
function onDocumentKeyDown(event) {
    var keyCode = event.which;
    // Izquierda
    if (keyCode == 37) {
      if (direction=="left"){
        direction= "stop";
      } else if (direction=="stop"){
        direction= "right";
      }
    // Derecha
    } else if (keyCode == 39) {
      if (direction=="right"){
        direction= "stop";
      } else if (direction=="stop"){
        direction= "left";
      }
    }
};

Por último, veamos el tratamiento del movimiento en la función render(). Si el movimiento es Left, entonces sumamos XSpeed a la posición X del cubo. Si el movimiento es Right restamos xSpeed a la posición X del cubo. Como está dentro del render, esto se ejecutará cada X tiempo, con lo que conseguimos que el cubo se mueva automáticamente.

1
2
3
4
5
6
7
8
9
10
function render() {
  requestAnimationFrame(render);
  if(direction=="right"){
    cube.position.x -= xSpeed;  
  } else if (direction=="left"){
    cube.position.x += xSpeed;
  } else {
  }
  renderer.render(scene, camera);
};

Veamoslo en acción haciendo clic en el cubo y después pulsando las teclas Izquierda o derecha:

See the Pen Three.js – Move a cube by Trescomatres (@trescomatres) on CodePen.

Espero que os sea de utilidad.

Más información

Artículos relacionados

Three.js – Ejemplo creación cubo Retomamos el mundo de la programación WebGl con ThreeJS. Veamos un pequeño ejemplo que trata la renderización de un cubo en movimiento. A continu...
Three.js – Ejemplo mover cámara (OrbitContro... Si ya vimos en el anterior artículo, un ejemplo sencillo en Three.js de cómo crear un cubo, en éste vamos a mostrar la manera de mover la cámara de un...
Habilitar WebGL en navegador FireFox Hace dos días os mostré cómo habilitar la aceleración gráfica en vuestro navegador Chrome (en mi caso lo necesitaba para probar programas creados con ...
Three.js – WW2Viewer añadiendo Spitfire MK I... Este fin de semana he añadido un nuevo vehículos de la Segunda Guerra Mundial a mi catálogo 3D online. WW2Viewer es un pequeño proyecto realizado con ...

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*