Làm cổng với ThreeJS

Question

Im cố gắng để làm cổng thông tin với ThreeJS. Tôi tìm thấy trang này Mini-Portals Điều đó giải thích cách tạo cổng thông tin với OpenGL. Vì vậy, tôi đã cố gắng để nhân rộng các chức năng xem cổng thông tin trong TJS. Bây giờ đây là kết quả của tôi:

Cổng thông tin trái (máy ảnh phải) là máy ảnh bình thường và cổng bên phải (camera sang trái) là ma trận điểm nhận được từ hướng dẫn. Như bạn có thể thấy khung nhìn cổng thông tin bên phải là khá lạ.

Vấn đề chính ở đây là tỉ lệ của hình ảnh là tất cả những sai lầm và sự im góc nhìn thấy những hình ảnh trong cổng thông tin là sai. Hiện nay phẳng và hiển thị nơi tôi chĩa máy ảnh của mình, nhưng những gì tôi muốn là cổng thông tin nơi rộng là đúng (hình ảnh trên cổng thông tin là cùng quy mô như thế giới riêng của mình) và những gì là thấy trong cổng thông tin phụ thuộc vào góc nơi im xem.

am i làm gì sai và những gì tôi nên làm gì để sửa chữa nó?

Answer 1

của nó được một lúc. Nhưng tôi đã tìm ra cách để làm những gì tôi cần. Tham số thứ 4 không cần thiết. Về cơ bản tôi gửi máy ảnh, và 2 đối tượng cổng thông tin của tôi (Mesh) cho chức năng của tôi. Thay vì sử dụng cách nhân ma trận (không hoạt động trong ThreeJS vì ThreeJS thực hiện một số công cụ lạ với nó), tôi chia các ma trận thành nhiều phần. Sau đó tự tính toán vị trí mới và xoay và xây dựng ma trận mới từ nó. Và tôi đặt ma trận mới này là máy ảnh của tôi worldMatrix. Voila một cổng làm việc. Bước tiếp theo là chế độ xem xiên, vì chúng tôi muốn máy đa năng của chúng tôi là cổng thông tin nếu không chúng tôi có thể có một số đối tượng giữa máy ảnh và cổng thông tin.

Và các thủ tục vẽ chính nó sử dụng bộ đệm stencil để làm cho các cổng thông tin một cách chính xác. Nếu bất cứ ai cần, điều này sẽ giúp bạn: 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; 
      } 

LƯU Ý: tôi chuyển câu trả lời của tôi cho câu trả lời vì vậy tôi có thể đánh dấu một câu trả lời.

Answer 2

Đối với những người muốn có một hệ thống Portal tuyệt vời với Three.js: https://github.com/markotaht/Portals