Three.js – Mover un cubo con teclado

Publicada el por

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):

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.

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.

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 Multimèdia S.L. (@trescomatres) on CodePen.

Espero que os sea de utilidad.

Más información