Repolode
Enviar
yomotsu

yomotsu/camera-controls

Una biblioteca de control de cámara para three.js que añade transiciones fluidas y más funciones a la órbita al estilo de OrbitControls.

Ver en GitHubSitio web
Estrellas
2,446
Forks
300
Issues abiertos
104
Último commit
hace 17 días

¿Qué es?

camera-controls es una biblioteca de TypeScript para controlar una cámara de three.js con interacciones de rotación orbital, dolly y truck (desplazamiento lateral), similar en concepto a THREE.OrbitControls. Su principal aporte son las transiciones animadas: métodos como setLookAt, fitToBox o rotateTo pueden mover la cámara suavemente a lo largo del tiempo y devuelven Promises, por lo que las transiciones se pueden encadenar con await.

La biblioteca ofrece más que los controles básicos de órbita con mouse y pantalla táctil. Incluye detección de colisiones con meshes, límites de movimiento, desplazamiento focal, movimiento en primera persona y al estilo pointer lock, rotación automática, compatibilidad con cámaras ortográficas y asignación configurable de botones del mouse y de la pantalla táctil. También emite eventos como rest y sleep para que una aplicación pueda reaccionar cuando la cámara deja de moverse.

Antes de crear una instancia, hay que pasar los objetos de three.js mediante CameraControls.install y llamar al método update en el bucle de renderizado. En el sitio de documentación del proyecto hay ejemplos interactivos de muchas de sus funciones.

Funciones clave

  • 01Transiciones animadas y fluidas para setLookAt, fitToBox, rotateTo y métodos similares, con compatibilidad con Promise.
  • 02Controles de órbita, dolly y truck, con asignación configurable de botones del mouse y de la pantalla táctil.
  • 03Detección de colisiones con meshes y límites de movimiento para el objetivo de la cámara.
  • 04Compatibilidad con cámaras en perspectiva y ortográficas.
  • 05Eventos como rest y sleep para reaccionar cuando se detiene el movimiento.

Casos de uso

  • Crear visores interactivos de productos en 3D que se desplacen a vistas específicas o ajusten un objeto a la pantalla.
  • Añadir recorridos de cámara o secuencias cinematográficas programadas que se encadenen con await.
  • Crear navegación en primera o tercera persona en una escena de three.js con comprobación de colisiones.

Inicio rápido

  1. 1

    Instala three.js, que es un requisito de camera-controls; el README no incluye un comando de instalación para ninguno de los dos paquetes

  2. 2

    Importa la biblioteca y registra THREE con CameraControls.install antes de crear una instancia

  3. 3

    Crea una instancia de CameraControls con tu cámara y el elemento DOM, y luego llama a update(delta) en tu bucle de animación

Antes de usarlo

  • Es necesario instalar three.js por separado y registrarlo mediante CameraControls.install; de lo contrario, se producirán errores en tiempo de ejecución.
  • El uso de colliderMeshes puede reducir el rendimiento, ya que las pruebas de colisión usan raycasters en cada fotograma.

Temas

#threejs#camera#3d#webgl#orbit-controls#animation#typescript#orbitcontrols

Preguntas frecuentes

¿Qué es camera-controls?
Una biblioteca de control de cámara para three.js que añade transiciones fluidas y más funciones a la órbita al estilo de OrbitControls. camera-controls es una biblioteca de TypeScript para controlar una cámara de three.js con interacciones de rotación orbital, dolly y truck (desplazamiento lateral), similar en concepto a THREE.OrbitControls. Su principal aporte son las transiciones animadas: métodos como setLookAt, fitToBox o rotateTo pueden mover la cámara suavemente a lo largo del tiempo y devuelven Promises, por lo que las transiciones se pueden encadenar con await.
¿camera-controls es gratuito? ¿Qué licencia tiene?
camera-controls es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿camera-controls sigue mantenido?
Mantenimiento activo. El último commit de camera-controls fue el 21 oct 2026.
¿Para qué puedo usar camera-controls?
Crear visores interactivos de productos en 3D que se desplacen a vistas específicas o ajusten un objeto a la pantalla. Añadir recorridos de cámara o secuencias cinematográficas programadas que se encadenen con await. Crear navegación en primera o tercera persona en una escena de three.js con comprobación de colisiones.
¿Cómo se instala camera-controls?
Instala three.js, que es un requisito de camera-controls; el README no incluye un comando de instalación para ninguno de los dos paquetes Importa la biblioteca y registra THREE con CameraControls.install antes de crear una instancia Crea una instancia de CameraControls con tu cámara y el elemento DOM, y luego llama a update(delta) en tu bucle de animación
¿Dónde consigo camera-controls?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/yomotsu/camera-controls

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados