Three.js – Ejemplo mover cámara (OrbitControl)

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 una forma sencilla (un plugin lo hará por nosostros)

Three.js tiene multitud de plugins que facilitan la vida del programador. Uno de estos plugins es OrbitControl. Con cargarlo, asignarlo a la cámara y ponerlo en la función que renderiza, ya podemos coger el control de nuestra cámara. Podremos usar la rueda para acercarnos o alejarnos, y arrastrar para girar la cámara. Veamos en acción Orbit con el siguiente código:

Pon el cursor del ratón sobre el cubo, pulsa y arrastra sin dejar el botón. O mueve la ruedecilla del ratón.

See the Pen ThreeJS – Orbit control by Trescomatres (@trescomatres) on CodePen.

De esta manera, aunque perdemos un poco el movimiento específico que pudiéramos hacer, ganamos en sencillez. Dicho de otro modo, nos ahorramos crear el evento que captura ratón o teclado, hacer girar o mover la cámara… lo hace todo Orbit.

Plugins como éste son los que hacen que la curva de aprendizaje de la librería Three.js sea suave, y de este modo, poder avanzar con nuestros ejemplos de forma sencilla.

Espero que os sea sencillo interpretar el código de ejemplo que os dejo, y que podáis hacer vuestras cosillas con Three.js

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 ...
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,...
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 – 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 *

*