Compartilhamento de tecnologia

Tutorial conciso da câmera Three.js

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

A calibração da câmera é um conceito fundamental em computação gráfica 3D que envolve a configuração de uma câmera virtual para simular a perspectiva e o comportamento de uma câmera do mundo real. No Three.js, uma popular biblioteca JavaScript de renderização 3D, compreender a calibração da câmera é crucial para criar cenas 3D realistas e envolventes. Neste artigo, exploraremos os fundamentos da calibração de câmera em Three.js, para iniciantes que buscam melhorar suas habilidades gráficas 3D.

Pré-requisitos: antes de mergulhar na calibração da câmera, você deve ter um conhecimento básico de JavaScript, HTML e Three.js. A familiaridade com coordenadas 3D, transformações e renderização também será útil.

Recomendação de ferramenta NSDT: Kit de desenvolvimento de textura AI Three.js - Gerador de dados sintéticos YOLO - Edição on-line de GLTF/GLB - Conversão online de formato de modelo 3D - Editor de cena 3D programável - Plug-in de exportação de modelo 3D do REVIT - Mecanismo de pesquisa semântica de modelo 3D - Kit de desenvolvimento de eixo virtual Three.js - redução de superfície online modelo 3D - Corte online modelo STL 

1. Configure o ambiente

Primeiro, crie um arquivo HTML contendo o código padrão necessário, incluindo a biblioteca Three.js:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Camera Calibration in Three.js</title>
  5. <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
  6. </head>
  7. <body>
  8. <script>
  9. // Your Three.js code will go here
  10. </script>
  11. </body>
  12. </html>

2. Crie cenas e câmeras

Para inicializar o Three.js, crie uma cena, uma câmera e um renderizador:

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

3. Posicione a câmera

A posição da câmera determina o ponto de vista a partir do qual a cena é renderizada. Você pode posicionar a câmera no espaço 3D usando sua propriedade position:

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

Este código define a posição da câmera como (0, 5, 10), o que significa que ela está em x=0, y=5 e z=10 no mundo 3D.

4. Aponte para a câmera

CâmeralookAtO método permite definir o ponto que deve ser observado:

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

Neste exemplo, a câmera está orientada para o ponto (0, 0, 0), que é a origem da cena.

5. Campo de visão (FOV)

O campo de visão da câmera (FOV) determina a extensão da cena visível através da câmera. Quanto maior o valor do FOV, mais amplo será o campo de visão, e quanto menor o valor, mais ampliado será o campo de visão.você pode usarfovAjuste de atributos FOV:

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

6. Proporção de aspecto

A proporção da câmera determina a forma da cena renderizada. Geralmente é definido como a largura da janela de visualização dividida pela sua altura:

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

7. Plano de recorte próximo e plano de recorte distante

Os planos de recorte próximos e distantes definem o intervalo de distância visível da câmera. Objetos que estão mais próximos do plano próximo ou mais distantes do que o plano distante serão cortados e não renderizados.você pode usarnearefarAs propriedades definem estes valores:

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

8. Abertura

A abertura, também conhecida como “abertura da câmera” ou “abertura da lente”, é um fator chave na calibração da câmera e afeta a profundidade de campo e a quantidade de luz que entra na câmera. No Three.js, podemos simular o efeito de abertura ajustando a propriedade de abertura da câmera.

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

9. Adicione objetos à cena

Antes de renderizar a cena, vamos adicionar alguns objetos 3D para tornar a calibração mais visível:

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

10. Renderize a cena

Agora que configuramos a cena, a câmera e os objetos, podemos renderizar a cena:

  1. function animate() {
  2. requestAnimationFrame(animate);
  3. renderer.render(scene, camera);
  4. }
  5. animate();

11. Conclusão

Parabéns! Você deu o primeiro passo no mundo da calibração de câmeras Three.js. Ao compreender as propriedades da câmera e seu impacto na cena renderizada, você pode criar experiências 3D visualmente envolventes e envolventes. Experimente diferentes posições de câmera, valores de FOV e objetos na cena para aproveitar todo o potencial do Three.js e da calibração da câmera.


Links originais:Um breve tutorial sobre a câmera Three.js - BimAnt