用ThreeJS製作門戶

Question

我試圖用ThreeJS製作門戶。我發現這個頁面Mini-Portals這解釋瞭如何使用OpenGL製作門戶。所以我試圖複製TJS中的門戶視圖功能。現在，這是我的結果：

左門（右相機）是正常的攝像頭和右門（左照相機）從教程得到視圖矩陣。正如你所看到的，右側的門戶視圖非常奇怪。

這裏的主要問題是圖像的縮放是錯誤的，並且在門戶中看到圖像的角度是錯誤的。目前它的平面和顯示我指向相機的位置，但我想要的是縮放比例正確的門戶網站（門戶網站上的圖像與世界本身的尺寸相同）以及門戶網站中看到的內容取決於我正在觀看的角度。

我在做什麼錯，我應該怎麼做才能解決它？

Answer 1

它已經有一段時間。但我找到了一種方法來做我需要的。第四個參數不需要。基本上我發送相機，我的2門戶對象（網格）我的功能。而不是使用矩陣乘法的方式（在ThreeJS中不起作用，因爲ThreeJS用它做了一些奇怪的事情），我把矩陣分成幾部分。然後手動計算新的位置和旋轉並從中構建新的矩陣。我將這個新矩陣設置爲我的相機worldMatrix。 Voila是一個工作門戶。下一步是傾斜視圖fusrum，因爲我們希望我們的近平面成爲門戶，否則我們可以在相機和門戶之間有一些對象。

而渲染過程本身使用模板緩衝區來正確呈現門戶。如果有人需要，這將幫助你：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; 
      } 

注： 我搬到我的回答的答案，所以我可以標記一個答案。

Answer 2

誰想要一個偉大的門戶網站系統three.js所的人： https://github.com/markotaht/Portals