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

Publicada el por

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