Tenho uma cena em que quero combinar objetos de perspectiva (ou seja, objetos que parecem menores quando estão distantes) com objetos ortograficos (ou seja, objetos que parecem do mesmo tamanho, independentemente da distância). Os objetos de perspectiva fazem parte do "mundo" renderizado, enquanto os objetos ortogográficos são adornos, como rótulos ou ícones. Diferentemente de um HUD, quero que os objetos ortogográficos sejam renderizados "dentro" do mundo, o que significa que eles podem ser cobertos por objetos do mundo (imagine um avião passando antes de um rótulo).

Minha solução é usar um renderizador, mas duas cenas, uma com umPerspectiveCamera e um com umOrthogographicCamera. Eu os renderizo em sequência sem limpar o buffer z (o renderizador doautoClear A propriedade está definida comofalse) O problema que estou enfrentando é que preciso sincronizar o posicionamento dos objetos em cada cena para que um objeto em uma cena receba uma posição z que esteja atrás de objetos em cada cena.a outra cena que estão antes dele, mas antes dos objetos que estão por trás dele.

Para fazer isso, estou designando minha cena em perspectiva como a cena "principal", ou seja. todas as coordenadas de todos os objetos (perspectiva e ortografia) são atribuídas com base nesta cena. Os objetos em perspectiva usam essas coordenadas diretamente e são renderizados nessa cena e com a câmera em perspectiva. As coordenadas dos objetos ortogográficos são transformadas em coordenadas na cena ortogonal e depois renderizadas nessa cena com a câmera ortogográfica. Eu faço a transformação projetando as coordenadas na cena em perspectiva no painel de visualização da câmera em perspectiva e, em seguida, de volta à cena ortogonal com a câmera ortogonal:

position.project(perspectiveCamera).unproject(orthogographicCamera);

Infelizmente, isso não está funcionando como indendido. Os objetos ortogográficos são sempre renderizados antes dos objetos em perspectiva, mesmo que devam estar entre eles. Considere este exemplo, no qual o círculo azul deve ser exibidoatrás o quadrado vermelho, masantes o quadrado verde (o que não é):

var pScene = new THREE.Scene();
var oScene = new THREE.Scene();

var pCam = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 1000);
pCam.position.set(0, 40, 50);
pCam.lookAt(new THREE.Vector3(0, 0, -50));

var oCam = new THREE.OrthographicCamera(window.innerWidth / -2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / -2, 1, 500);
oCam.Position = pCam.position.clone();

pScene.add(pCam);
pScene.add(new THREE.AmbientLight(0xFFFFFF));

oScene.add(oCam);
oScene.add(new THREE.AmbientLight(0xFFFFFF));

var frontPlane = new THREE.Mesh(new THREE.PlaneGeometry(20, 20), new THREE.MeshBasicMaterial( { color: 0x990000 }));
frontPlane.position.z = -50;
pScene.add(frontPlane);

var backPlane = new THREE.Mesh(new THREE.PlaneGeometry(20, 20), new THREE.MeshBasicMaterial( { color: 0x009900 }));
backPlane.position.z = -100;
pScene.add(backPlane);

var circle = new THREE.Mesh(new THREE.CircleGeometry(60, 20), new THREE.MeshBasicMaterial( { color: 0x000099 }));
circle.position.z = -75;

//Transform position from perspective camera to orthogonal camera -> doesn't work, the circle is displayed in front
circle.position.project(pCam).unproject(oCam);

oScene.add(circle);

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

renderer.autoClear = false;
renderer.render(oScene, oCam);
renderer.render(pScene, pCam);

Você podeexperimente o código aqui.

No mundo em perspectiva, a posição z (do mundo) do círculo é -75, que fica entre os quadrados (-50 e -100). Mas na verdade é exibido na frente dos dois quadrados. Se você definir manualmente a posição z dos círculos (na cena ortogonal) para -500, ela será exibida entre os quadrados, portanto, com o posicionamento correto, o que estou tentando deve ser possível em princípio.

Eu sei que não posso renderizar uma cena da mesma forma com câmeras ortograficas e de perspectiva. Minha intenção é reposicionar todos os objetos ortogográficos antes de cada renderização para que elesaparecer estar na posição correta.

O que devo fazer para calcular as coordenadas ortograficas a partir das coordenadas da perspectiva para que os objetos sejam renderizados com os valores de profundidade corretos?

ATUALIZAR:

Eu adicionei uma resposta com a minha solução atual ao problema, caso alguém tenha um problema semelhante. No entanto, uma vez que esta solução não oferece a mesma qualidade que a câmera ortogográfica. Então, eu ainda ficaria feliz se alguém explicasse por que a câmera ortogográfica não funciona como o esperado e / ou fornece uma solução para o problema.