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。その場合、円柱 (陰影部分) がクリッピングされ、円柱の中心の「前」にらせんが生じることに注意してください。

ここに画像の説明を入力

代わりに、2 番目のイメージに示すように円柱/らせん半径を計算する必要があります。つまり、 が必要radius2です。画像左の大きな角度がfov (再び、vFOV? または hFOV? など、ヘリックスが上下に移動しているか左右に移動しているかに応じて)である場合、その半角はfov/2です。これは、円柱の中心に示されているのと同じ角度です。したがって、次のようにらせん半径を小さくする必要がありますradius2 = radius1 * cos(fov/2)。

ここに画像の説明を入力

于 2016-03-01T05:19:03.357 に答える