7

我正在构建一个应用程序，在其中我呈现一些带有纹理的平面。但是，我想根据平截头体宽度和相机位置动态计算螺旋的半径（我在计算中使用它来创建螺旋）。

螺旋线位于屏幕中心 x=0, y=0, z=0。

我希望这考虑到屏幕方向（横向/纵向）。到目前为止，这是我拥有的代码，但似乎我遗漏了一些东西，因为左侧和右侧的平面不在视口内。

App.prototype.calculateHelixRadius = function(){

    // plane width = height =  512;

    var friend = this.getFriend();
    var vFOV = friend.camera.fov * Math.PI / 180;
    var dist = utils.getAbsPointsDistance3D(friend.camera.position, friend.scene.position);
    var aspect = friend.settings.container.clientWidth / friend.settings.container.clientHeight;

    var frustumHeight = 2.0 * dist * Math.tan(0.5 * vFOV);
    var frustumWidth = frustumHeight * aspect;

    return utils.isLandscape() ? frustumHeight / 2 : frustumWidth / 2 ;

};

我做错了什么，为什么屏幕边缘的飞机不在里面？

这里也供参考的是代码getAbsPointsDistance3D

var utils = {

   // other helpers...

   getAbsPointsDistance3D: function(p1, p2) {

        var xd = p2.x - p1.x;
        var yd = p2.y - p1.y;
        var zd = p2.z - p1.z;

        return Math.sqrt(xd * xd + yd * yd + zd * zd);
    }

};

更新

我尝试减小 dist 参数，但结果并不一致...

4

1 回答 1

1

我想知道以下是否解释了您的剪辑。

您计算您的截锥体特征，然后使用截锥体宽度（宽度或高度取决于屏幕纵横比）计算螺旋半径......我可能在这里弄错了一些细节，因为您的问题没有完全解释细节，但一般概念仍然成立）。下图是场景的俯视图，其中显示了一个圆圈，表示包围螺旋的圆柱体。相信你已经算过radius1。如果是这样，请注意圆柱体（阴影区域）会被剪裁，因此在圆柱体中心的“前面”会有螺旋线。

在此处输入图像描述

相反，您需要计算圆柱/螺旋半径，如第二张图像所示，即您需要radius2. 如果左边图像的大角度是fov （再次，vFOV？或hFOV？等，取决于你的螺旋是上下还是左右等），那么它的半角是fov/2。这与圆柱体中心显示的角度相同。因此，您需要按如下方式减小螺旋半径radius2 = radius1 * cos(fov/2)：

在此处输入图像描述

于 2016-03-01T05:19:03.357 回答