Tworzenie portali z ThreeJS

Question

Próbuję tworzyć portale z ThreeJS. Znalazłem tę stronę Mini-Portals To wyjaśnia, jak tworzyć portale z OpenGL. Tak więc próbowałem replikować funkcję widoku portalu w TJS. Teraz to jest mój wynik:

Lewa portal (prawy aparat) jest normalny aparat i prawo portal (lewy aparat) jest macierzą widok dostał od samouczka. Jak widać widok portalu po prawej jest dość dziwny.

Głównym problemem jest to, że skalowanie obrazów jest nieprawidłowe, a kąt widzenia obrazów w portalu jest nieprawidłowy. Obecnie jest to mieszkanie i pokaz, w którym wskazałem kamerę, ale to, czego chcę, to portal, w którym skalowanie jest poprawne (obraz na portalu jest tej samej skali co sam świat), a to, co widać w portalu, zależy od kąta, w którym im się przygląda.

Co robię źle i co należy zrobić, aby to naprawić?

Answer 1

Jego been a. Ale znalazłem sposób, aby zrobić to, co potrzebne. Czwarty parametr nie jest potrzebny. Zasadniczo wysyłam kamerę i moje 2 obiekty portalu (siatki) do mojej funkcji. Zamiast używać metody mnożenia macierzy (nie działa w ThreeJS, ponieważ ThreeJS robi z nią jakieś dziwne rzeczy) dzielę matryce na części. Następnie ręcznie obliczyć nową pozycję i obrót i skonstruować z niej nową macierz. I ustawić tę nową matrycę jako moje kamery worldMatrix. Voila działający portal. Kolejnym krokiem jest ukośny widok fusrusa, ponieważ chcemy, aby nasz bliski samolot był portalem, w przeciwnym razie możemy mieć jakieś obiekty między kamerą a portalem.

Sam proces renderowania wykorzystuje bufor szablonu do poprawnego renderowania portali. Jeśli ktoś potrzebuje, to pomoże Ci: https://th0mas.nl/2013/05/19/rendering-recursive-portals-with-opengl/

function portal_view(camera, src_portal, dst_portal, kordaja) { 
       src_portal.updateMatrixWorld() 
       dst_portal.updateMatrixWorld() 
       camera.updateMatrixWorld() 

       var camerapos = new THREE.Vector3(); 
       var camerarot = new THREE.Quaternion(); 
       var camerascale = new THREE.Vector3(); 
       camera.matrix.decompose(camerapos,camerarot,camerascale); 

       var srcpos = new THREE.Vector3(); 
       var srcquat = new THREE.Quaternion(); 
       var srcscale = new THREE.Vector3(); 
       src_portal.matrix.decompose(srcpos, srcquat, srcscale); 

       var destquat = new THREE.Quaternion(); 
       var destpos = new THREE.Vector3(); 
       var destscale = new THREE.Vector3(); 
       dst_portal.matrix.decompose(destpos,destquat,destscale); 

       var diff = camerapos.clone().sub(srcpos); 

       var ydiff = src_portal.rotation.y - dst_portal.rotation.y - Math.PI; 
       diff.applyAxisAngle(new THREE.Vector3(0,1,0),-ydiff); 
       var newcampos = diff.add(destpos); 
       var yrotvec = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0,1,0),-ydiff); 
       console.log(yrotvec) 
       srcquat = srcquat.multiply(destquat.inverse()); 

       camerarot = camerarot.multiply(yrotvec); 

       var inverse_view_to_source = new THREE.Matrix4(); 
       inverse_view_to_source.compose(newcampos,camerarot,camerascale); 

       return inverse_view_to_source; 
      } 

UWAGA: Przeniosłem moją odpowiedź na odpowiedzi tak mogę zaznaczyć odpowiedź.

Answer 2

Dla ludzi, którzy chcą wielki system portal z Three.js: https://github.com/markotaht/Portals