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

Question

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

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

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

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

我想知道下面是否解释了你的剪辑。

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

相反，您需要计算圆柱/螺旋半径，如第二张图片所示，即您需要 radius2。如果左侧图像的大 Angular 是 fov (再次强调，vFOV？或 hFOV？等，具体取决于您的螺旋线是上下还是左右移动等.)，那么它的半 Angular 就是fov/2。这与圆柱体中心显示的 Angular 相同。因此，您需要按如下方式减小螺旋半径:radius2 = radius1 * cos(fov/2)。