计算螺旋半径，使螺旋中的模型位于平截头体内

Question

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

螺旋位于屏幕中心 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 参数，但结果不一致...

Answer 1

不知下面是否解释了你的剪裁。

你计算你的截头体特征，然后使用截头体宽度计算螺旋半径 （宽度或高度取决于屏幕方面......我可能在这里弄错了一些细节因为你的问题并没有完全说明细节，但是大体的概念还是成立的）。下图是场景的俯视图，其中显示了一个圆圈，代表包围螺旋的圆柱体。相信你已经计算好了radius1。如果是这样，请注意在圆柱体中心的 "front" 处会出现圆柱体（阴影区域）和螺旋线的剪裁。

相反，您需要计算 cylinder/helix 半径，如第二张图片所示，即您需要 radius2。如果图像左侧的大角度是 fov （再次，vFOV？或 hFOV？等，取决于您的螺旋线是 up-down 还是 side-to-side，等)，则其半角为fov/2。这与圆柱体中心显示的角度相同。因此，您需要按如下方式减小螺旋半径：radius2 = radius1 * cos(fov/2).

计算螺旋半径，使螺旋中的模型位于平截头体内

Calculate radius of helix so that models in helix are inside the frustum

javascript

3d

frustum

viewport

three.js