javascript - 使用 THREE.Frustum 计算近/远平面顶点

Question

我需要一些帮助来处理 THREE.Frustum 对象。

我的问题：

我需要计算近/远平面顶点；我看过这些教程

我已经勾勒出了这个函数，它完全实现了（我希望如此）解释的过程（只是为了获得左上/右顶点，假设相机只能看左和右）：

        // Near Plane dimensions
        hNear = 2 * Math.tan(camera.fov / 2) * camera.near; // height
        wNear = hNear * camera.aspect; // width

        // Far Plane dimensions
        hFar = 2 * Math.tan(camera.fov / 2) * camera.far; // height
        wFar = hFar * camera.aspect; // width

getVertices : function() {
        var p = camera.position.clone();
        var l = getCurrentTarget(); // see below
        var u = new THREE.Vector3(0, 1, 0);

        var d = new THREE.Vector3();
        d.sub(l, p);
        d.normalize();

        var r = new THREE.Vector3();
        r.cross(u, d);
        r.normalize();

        // Near Plane center
        var dTmp = d.clone();
        var nc = new THREE.Vector3();
        nc.add(p, dTmp.multiplyScalar(camera.near));

        // Near Plane top-right and top-left vertices
        var uTmp = u.clone();
        var rTmp = r.clone();
        var ntr = new THREE.Vector3();
        ntr.add(nc, uTmp.multiplyScalar(hNear / 2));
        ntr.subSelf(rTmp.multiplyScalar(wNear / 2));

        uTmp.copy(u);
        rTmp.copy(r);
        var ntl = new THREE.Vector3();
        ntl.add(nc, uTmp.multiplyScalar(hNear / 2));
        ntl.addSelf(rTmp.multiplyScalar(wNear / 2));

        // Far Plane center
        dTmp.copy(d);
        var fc = new THREE.Vector3();
        fc.add(p, dTmp.multiplyScalar(camera.far));

        // Far Plane top-right and top-left vertices
        uTmp.copy(u);
        rTmp.copy(r);
        var ftr = new THREE.Vector3();
        ftr.add(fc, uTmp.multiplyScalar(hFar / 2));
        ftr.subSelf(rTmp.multiplyScalar(wFar / 2));

        uTmp.copy(u);
        rTmp.copy(r);
        var ftl = new THREE.Vector3();
        ftl.add(fc, uTmp.multiplyScalar(hFar / 2));
        ftl.addSelf(rTmp.multiplyScalar(wFar / 2));

getCurrentTarget : function() {
        var l = new THREE.Vector3(0, 0, -100);
        this.camera.updateMatrixWorld();
        this.camera.matrixWorld.multiplyVector3(l);
        return l;
    }

这似乎有效，但是......

我的问题：

我可以使用 THREE.Frustum 对象以更优雅（也许更正确）的方式获得相同的结果吗？

score 7 · Accepted Answer

Three.Frustum并不能真正帮助你——它是一组平面。好消息是您的解决方案似乎是正确的，但有一种更简单的方法来考虑这一点。

近平面的右上角是相机空间中的一个点，具有以下坐标：

var ntr = new THREE.Vector3( wNear / 2, hNear / 2, -camera.near );

使用您对wNearand的定义hNear，这是正确的。

现在，确保camera.matrixWorld已更新，您将该点转换为世界坐标，如下所示：

camera.updateMatrixWorld();
ntr.applyMatrix4( camera.matrixWorld );

现在，翻转标志以获得其他三个角，然后对远平面重复计算。

看，你说得对；你只是走了一条更复杂的路线。:-)

编辑：更新到three.js r.66

javascript - 使用 THREE.Frustum 计算近/远平面顶点

1 回答 1

Related

Reference