Este tópico discute câmeras em perspectiva e como configurar um tronco de visualização adequado para ambientes distantes.
Recomendação: Use o editor NSDT para criar rapidamente cenas 3D programáveis
Câmera de Perspectiva é um modo de projeção projetado para imitar a maneira como os humanos veem as coisas no mundo real. Este é o modo de projeção mais comum para renderizar cenas 3D. - três.js
Se você observar o construtor da câmera em perspectiva nos documentos do Three.js, terá a seguinte aparência:
new THREE.PerspectiveCamera( fov, aspect, near, far )
em:
- fov: campo de visão da câmera
- aspecto: proporção da câmera;
- perto: câmera perto do avião
- longe: Plano distante da câmera.
Juntos esses parâmetros definem o tronco de visualização da câmera – a área da cena 3D que será renderizada e aparecerá na tela.
Por exemplo:
const camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 );
Basicamente, você pode definir fov, próximo, distante para qualquer intervalo que desejar. Por exemplo, ajuste o fov para cerca de 10 ou 20 e você verá facilmente a frente do objeto, ou na verdade tudo ampliado na tela, enquanto que se você definir o fov para cerca de 90 de 100, tudo na cena se moverá distante.
E quanto ao perto e ao longe?
Claro, você também pode definir valores arbitrários para os planos próximos e distantes, mas se os alcances próximos e distantes forem grandes, haverá mais combates z a curta distância, e se os alcances forem muito pequenos, será quebrar a cena.
Idealmente, se você definir próximo = 0,01, então longe deverá ser 1000, ou próximo = 1, então você poderá definir ainda mais longe = 10000.
No entanto, se você realmente precisa de algo como longas distâncias, use perto = 0,0000000001 e longe = 10000000000000. Mas neste caso você pode precisar de outra opção para configurar o WebGLRenderer.
Por que?
A razão é que a GPU tem precisão limitada e não consegue determinar se um objeto está na frente ou atrás de outros objetos. Essa precisão é distribuída perto e longe. Para piorar a situação, a precisão perto da câmera é detalhada por padrão, enquanto a precisão longe é grosseira. Essas unidades começam próximas e se expandem lentamente à medida que se aproximam. - Threejsfundamentals.org
Para ilustrar a situação, temos uma cena simples com modelo 3D, câmera e renderizador configurados da seguinte forma:
// camera
this.camera = new THREE.PerspectiveCamera(
45,
window.innerWidth / window.innerHeight,
0.00000001,
10000
);
this.camera.position.set(10, 6, 10);
// renderer
this.renderer = new THREE.WebGLRenderer({ antialias: true });
this.renderer.setPixelRatio(window.devicePixelRatio);
this.renderer.setSize(window.innerWidth, window.innerHeight);
this.renderer.physicallyCorrectLights = true;
this.renderer.outputEncoding = THREE.sRGBEncoding;
O que você acha que acontecerá
Algo está errado com o modelo 3D, você pode ver que as texturas estão todas quebradas. Este é um exemplo de z-fighting, onde a GPU de um computador não tem precisão suficiente para determinar quais pixels estão na frente e quais estão atrás.
Uma solução é que você precisa dizer ao Three.js para usar um método diferente para calcular quais pixels estão na frente e quais estão atrás. Podemos fazer isso habilitando logarithmicDepthBuffer no construtor WebGLRenderer.
Então nosso renderizador agora fica assim:
// renderer
this.renderer = new THREE.WebGLRenderer({
antialias: true,
logarithmicDepthBuffer: true
});
// ...
Confira o resultado, deve funcionar...
logarithmicDepthBuffer pode obviamente resolver este problema, mas seu uso nem sempre é recomendado, pois pode ser mais lento que a solução padrão, especialmente na maioria dos dispositivos móveis.
Isso significa que você deve sempre ajustar suas distâncias curtas e longas para atender às suas necessidades. Agora, observe que se você deseja desenhar uma cena enorme e distante sem destruir nenhum objeto da cena, existe uma opção alternativa que você pode tentar.
Espero que isto ajude!
Link original: Parâmetros da câmera e solução z-fighting - BimAnt