Tutorial conciso de la cámara Three.js

2024-07-12

La calibración de la cámara es un concepto fundamental en los gráficos por computadora en 3D que implica configurar una cámara virtual para simular la perspectiva y el comportamiento de una cámara del mundo real. En Three.js, una popular biblioteca JavaScript de renderizado 3D, comprender la calibración de la cámara es crucial para crear escenas 3D realistas e inmersivas. En este artículo, exploraremos los conceptos básicos de la calibración de la cámara en Three.js, para principiantes que buscan mejorar sus habilidades con gráficos 3D.

Requisitos previos: antes de sumergirse en la calibración de la cámara, debe tener conocimientos básicos de JavaScript, HTML y Three.js. También será útil estar familiarizado con las coordenadas, transformaciones y renderizados 3D.

Recomendación de herramienta NSDT： Kit de desarrollo de texturas AI de Three.js - Generador de datos sintéticos YOLO - Edición en línea GLTF/GLB - Conversión en línea de formato de modelo 3D - Editor de escenas 3D programable - Complemento de exportación de modelos 3D de REVIT - Buscador semántico de modelos 3D - Kit de desarrollo de eje virtual Three.js - Reducción de superficie en línea modelo 3D - Corte en línea de modelos STL

1. Configurar el entorno

Primero, cree un archivo HTML que contenga el código repetitivo necesario, incluida la biblioteca Three.js:


<!DOCTYPE html>
<html>
<head>
    <title>Camera Calibration in Three.js</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
</head>
<body>
    <script>
        // Your Three.js code will go here
    </script>
</body>
</html>

2. Crea escenas y cámaras.

Para inicializar Three.js, cree una escena, una cámara y un renderizador:


// Set up the scene, camera, and renderer
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

3. Coloca la cámara

La posición de la cámara determina el punto de vista desde el que se representa la escena. Puede colocar la cámara en el espacio 3D usando su propiedad de posición:

camera.position.set(0, 5, 10);

Este código establece la posición de la cámara en (0, 5, 10), lo que significa que está en x=0, y=5 y z=10 en el mundo 3D.

4. Apunta a la cámara

cámaralookAtEl método le permite definir el punto que debe mirar:


const target = new THREE.Vector3(0, 0, 0);
camera.lookAt(target);

En este ejemplo, la cámara está orientada hacia el punto (0, 0, 0), que es el origen de la escena.

5. Campo de visión (FOV)

El campo de visión (FOV) de la cámara determina la extensión de la escena visible a través de la cámara. Cuanto mayor sea el valor del FOV, más amplio será el campo de visión y cuanto menor sea el valor, más ampliado será el campo de visión.puedes usarfovFOV de ajuste de atributos:

camera.fov = 60; // Example FOV value in degrees

6. Relación de aspecto

La relación de aspecto de la cámara determina la forma de la escena renderizada. Generalmente se establece en el ancho de la ventana gráfica dividido por su altura:


const aspectRatio = window.innerWidth / window.innerHeight;
camera.aspect = aspectRatio;

7. Plano de recorte cercano y plano de recorte lejano

Los planos de recorte cercano y lejano definen el rango de distancia visible desde la cámara. Los objetos que estén más cerca que el plano cercano o más lejos que el plano lejano serán recortados y no renderizados.puedes usarnearyfarLas propiedades establecen estos valores:


camera.near = 0.1;
camera.far = 1000;

8. Apertura

La apertura, también conocida como "apertura de la cámara" o "apertura de la lente", es un factor clave en la calibración de la cámara y afecta la profundidad de campo y la cantidad de luz que ingresa a la cámara. En Three.js, podemos simular el efecto de apertura ajustando la propiedad de apertura de la cámara.


// Aperture (Camera's f-stop) - Controls depth of field and light gathering
const aperture = 0.1; // Increase this value for a shallower depth of field
camera.aperture = aperture;

9. Agrega objetos a la escena.

Antes de renderizar la escena, agreguemos algunos objetos 3D para que la calibración sea más visible:


const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

10. Renderiza la escena

Ahora que tenemos la escena, la cámara y los objetos configurados, podemos renderizar la escena:


function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();

11. Conclusión

¡Felicidades! Ha dado su primer paso en el mundo de la calibración de cámaras Three.js. Al comprender las propiedades de la cámara y su impacto en la escena renderizada, puede crear experiencias 3D inmersivas y visualmente atractivas. Experimente con diferentes posiciones de la cámara, valores de FOV y objetos en la escena para aprovechar todo el potencial de Three.js y la calibración de la cámara.

Enlace original:Un breve tutorial sobre la cámara Three.js - BimAnt

Compartir tecnología