使用ThreeJS制作门户

Question

我试图用ThreeJS制作门户网站.我发现这个页面Mini-Portals解释了如何使用OpenGL制作门户.所以我试图在TJS中复制门户视图功能.现在这是我的结果:

左侧门户(右侧摄像头)是普通摄像头,右侧门户(左侧摄像头)是从教程中获取的视图矩阵.正如您所看到的,右侧的门户视图非常奇怪.

这里的主要问题是图像的缩放是完全错误的,并且我在门户中看到图像的角度是错误的.目前它的平面和显示我指向相机的地方,但我想要的是缩放正确的门户(门户网站上的图像与世界本身相同)并且在门户网站中看到的内容取决于我观看的角度.

我做错了什么,我该怎么做才能解决它？

Answer 1

有一阵子了。但我已经找到了一种方法来完成我需要的事情。第四个参数不需要。基本上我将相机和我的 2 个门户对象（网格）发送到我的函数。我没有使用矩阵乘法方式（在 ThreeJS 中不起作用，因为 ThreeJS 用它做了一些奇怪的事情），而是将矩阵分成几部分。然后手动计算新的位置和旋转并从中构造新的矩阵。我将这个新矩阵设置为我的相机世界矩阵。瞧，一个工作门户。下一步是斜视锥体，因为我们希望近平面成为入口，否则我们可以在相机和入口之间放置一些物体。

渲染过程本身使用模板缓冲区来正确渲染门户。如果有人需要，这会对您有所帮助：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;
            }

注意：我将答案移至答案，以便我可以标记答案。