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

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 – 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 derec...
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 ...
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...

Deja un comentario

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

*