Three.js – câmera ortogonal

Eu tenho trabalhado em um aplicativo que exibe alguns modelos 3D. Carregamos os modelos, criamos as malhas, adicionamos à cena … procedimento padrão. Depois que a última malha é adicionada, calculamos a checkbox delimitadora para mover a câmera e cobrir toda a cena, usando o tamanho da geometry total e o tamanho da viewport para fazer a matemática.

if (bounds.bx / bounds.by < camera.aspect) { /* Vertical max */ r = bounds.by / (2 * Math.tan(Math.PI / 8)); } else { /* Horizontal max */ hFOV = 2 * Math.atan(Math.tan(Math.PI / 8) * camera.aspect); r = bounds.bx / (2 * Math.tan((hFOV / 2))); } 

bounds é um object que contém a largura e a altura da checkbox delimitadora. Após este cálculo, nós movemos a câmera (mais uma pequena proporção, apenas estética, queremos um pequeno espaço entre a geometry e a borda da canvas :)) e renderizar

  camera.position.z = r * 1.05; 

Até agora isso é implementado e funciona ok. Isso foi feito com o PerspectiveCamera. Agora queremos mudar isso e usar OrthographicCamera … acaba por ser uma bagunça. Os modelos são muito pequenos, perdemos o zoom do mouse dos controles TrackBall e o algoritmo para mover a câmera não está mais funcionando. Também não entendo os parâmetros do construtor para a câmera … estas largura e altura são para a geometry ou a viewport?

O padrão para instanciar uma câmera ortográfica em three.js é:

 var camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, near, far ); 

onde width e height são a largura e a altura do tronco em forma de cubóide medido em unidades de espaço-mundo .

near e far estão as distâncias do espaço mundial para os planos próximo e distante do tronco. Tanto near quanto far deve ser maior que zero.

Para evitar a distorção, você normalmente desejará que a proporção da câmera ortográfica ( width / height ) corresponda à proporção da canvas da renderização. (ver nota abaixo)

É lamentável que muitos dos exemplos de window.innerWidth passem window.innerWidth e window.innerHeight como argumentos para este construtor. Fazer isso só faz sentido se a câmera ortográfica for usada para renderização em uma textura, ou se as unidades do mundo para sua cena ortográfica estiverem em pixels.


* Observação: na verdade, a proporção da câmera deve corresponder à proporção da viewport do renderizador. A janela de visualização pode ser uma sub-região da canvas. Se você não definir a viewport do renderizador diretamente usando renderer.setViewport() , a viewport terá o mesmo tamanho que a canvas e, portanto, terá a mesma proporção que a canvas.

three.js r.73

  camera.top = (.95*camera.top); camera.bottom = (.95*camera.bottom); camera.left = (.95*camera.left); camera.right = (.95*camera.right); 

Para referência futura: bom vídeo 5min

 var w = container.clientWidth; var h = container.clientHeight; var viewSize = h; var aspectRatio = w / h; _viewport = { viewSize: viewSize, aspectRatio: aspectRatio, left: (-aspectRatio * viewSize) / 2, right: (aspectRatio * viewSize) / 2, top: viewSize / 2, bottom: -viewSize / 2, near: -100, far: 100 } _camera = new THREE.OrthographicCamera ( _viewport.left, _viewport.right, _viewport.top, _viewport.bottom, _viewport.near, _viewport.far );