Question

我正在开发一个小型WebVR Web metaverse项目，其中THREE.js场景使用门户连接（就像您在Valve游戏中找到的那样）。

我找到了一个很棒的OpenGL.ES教程，它帮助我完成了渲染。我无法弄清楚的是如何将用于确定相对相机矩阵的C / C ++代码转换为js / three.js。

以下是OpenGL snippet。它旁边的图片非常棒（我无法嵌入两个以上的链接）。C'是我想要确定的，C, P1, P2。

以下是我的3次尝试，toPortal和this是网格（这是与相机相同的场景中的门户网站，toPortal是另一个门户网站（退出））。

//Attempt 1
//Commented out Y rotation, as without it is already very wrong.
Portal.prototype.getPortalViewMatrix1 = function (camera) {
    var inverse_view_to_source = new THREE.Matrix4().getInverse(camera.matrixWorld).multiply(this.matrix);
    var new_mat = this.toPortal.matrix.clone().multiply(inverse_view_to_source);
    var rot = new THREE.Matrix4().makeRotationY(Math.PI);

    // new_mat.rotateY(3.14);
    //return new_mat;
    return rot.multiply(new_mat);
};

//Attempt 2
//Commented out Y rotation, as without it is already very wrong.
Portal.prototype.getPortalViewMatrix2 = function (originalView) {
    var mv = originalView.multiply(this.matrix);
    var portalCam = mv.multiply(new THREE.Matrix4().getInverse(this.toPortal.matrix));

    return portalCam;
};

//Wrong, but the most right attempt, syncs up the two different scenes,
//but doesn't take into account goal portal position, rotation
//Only works with portals on (0,0,0), unrotated.
Portal.prototype.getPortalViewMatrix = function (originalView) {
    return this.toPortal.matrix.clone().multiply(originalView);
};

这些是我当前的调试场景，箭头指示门户入口 https://dl.dropboxusercontent.com/u/43693599/scenes.png

这是JSFiddle和JSBin链接

我会将其添加到评论中，我无法在此处添加

请注意，您必须在不同的窗口中查看结果才能使全屏和指针锁定工作。 在JSbin中，您可以通过按顶部的箭头轻松完成此操作结果屏幕右侧。

修改我一直在尝试其他事情，而且我似乎能够正确地获得翻译矩阵（仅限位置）。当然，现在我无法旋转门户（它们必须面向正好相反）。

        getPortalViewMatrix3(originalView: THREE.Matrix4) {
        var t = new THREE.Matrix4().makeTranslation(this.position.x - this.toPortal.position.x, this.position.y - this.toPortal.position.y, this.position.z - this.toPortal.position.z);
        t.getInverse(t);
        return t.multiply(originalView);
    }

在three.js中确定门户摄像机世界矩阵

0 个答案: