Cómo crear una cámara en Three.js
Sintaxis para crear una cámara de perspectiva
La cámara de perspectiva en Three.js se crea utilizando la clase THREE.PerspectiveCamera. Su sintaxis es:
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);Donde:
- fov: Campo de visión en grados (generalmente entre 45 y 75).
- aspect: Relación de aspecto, que se obtiene dividiendo el ancho entre la altura de la ventana.
- near: Distancia mínima desde la cámara donde los objetos son visibles.
- far: Distancia máxima desde la cámara donde los objetos aún son visibles.
Ejemplo básico
// Crear una escena
const scene = new THREE.Scene();
// Parámetros para la cámara de perspectiva
const fov = 75; // Campo de visión
const aspect = window.innerWidth / window.innerHeight; // Relación de aspecto
const near = 0.1; // Distancia mínima de visión
const far = 1000; // Distancia máxima de visión
// Crear la cámara
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
// Establecer la posición de la cámara
camera.position.z = 5;
// Añadir la cámara a la escena
scene.add(camera);En este ejemplo, se ha creado una cámara con un campo de visión de 75 grados, una relación de aspecto basada en el tamaño de la ventana, y se ha colocado la cámara a 5 unidades de distancia en el eje Z.
Otros tipos de cámaras
1. Cámara ortográfica (OrthographicCamera)
A diferencia de la cámara de perspectiva, esta no tiene perspectiva (todos los objetos tienen el mismo tamaño sin importar su distancia de la cámara). Se usa principalmente en aplicaciones como gráficos 2D o mapas.
const left = -5, right = 5, top = 5, bottom = -5, near = 0.1, far = 1000;
const camera = new THREE.OrthographicCamera(left, right, top, bottom, near, far);
camera.position.z = 10;
2. Cámara estereoscópica (StereoCamera)
Se utiliza para crear efectos de visión estereoscópica (3D), simulando la visión desde dos cámaras que imitan los ojos humanos.
Movimiento y control de la cámara
Para facilitar la interacción con la cámara, se puede utilizar el controlador OrbitControls, que permite al usuario rotar, hacer zoom y desplazar la cámara.
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.update();Este control permite manipular la cámara con el ratón o el touchpad.
Referencias
Para más información sobre las cámaras en Three.js, puedes consultar la documentación oficial de Three.js.
Jorge García
Fullstack developer