使用ThreeJS制作门户

Posted 2021-05-02

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

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

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

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

答案

有一阵子了。但我找到了一种方法来做我需要的。第四个参数不需要。基本上我发送相机，我的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;
            }

注意：我将答案移到了答案上，所以我可以标记答案。

另一答案

对于想要一个具有Three.js的伟大Portal系统的人：https://github.com/markotaht/Portals