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

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 ...
Apuntes librería JavaScript 3D Three.js Este fin de semana, y aprovechando las fiestas Navideñas, me he puesto a curiosear la librería Three.js Como normalmente tengo la cabeza casi llena de...
Three.js – Proyectos de ejemplo (1) Aquí os dejo algunos enlaces a ejemplos de proyectos creados con Three.js. Con esta librería 3D con el que poder trabajar WebGL, o lo que es lo mismo,...
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 continuaci...

Deja un comentario

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

*