web-dev-qa-db-ja.com

Three.js-正投影カメラ

私はいくつかの3Dモデルを表示するアプリに取り組んでいます。モデルをロードし、メッシュを作成し、シーンに追加します...標準的な手順です。最後のメッシュが追加された後、ジオメトリ全体のサイズとビューポートのサイズを使用して計算を行い、カメラを移動してすべてのシーンをカバーするために境界ボックスを計算します。

    if (bounds.bx / bounds.by < camera.aspect) {
        /* Vertical max */
        r = bounds.by / (2 * Math.tan(Math.PI / 8));
    } else {
        /* Horizontal max */
        hFOV = 2 * Math.atan(Math.tan(Math.PI / 8) * camera.aspect);
        r = bounds.bx / (2 * Math.tan((hFOV / 2)));
    }

boundsは、境界ボックスの幅と高さを含むオブジェクトです。この計算の後、カメラを移動し（少し比率を加え、見た目だけを考慮し、ジオメトリと画面の境界線の間に少し余裕を持たせます:)）、レンダリングします

    camera.position.z = r * 1.05;

これまでのところ、これは実装され、問題なく実行されます。これはPerspectiveCameraで行われました。今、それを変更してOrthographicCameraを使用したいと思います...混乱していることがわかります。モデルが小さすぎます。トラックボールコントロールからマウスホイールのズームが失われ、カメラを移動するアルゴリズムが機能しなくなります。また、カメラのコンストラクターのパラメーターがわかりません。これらの幅と高さは、ジオメトリまたはビューポート用ですか？

javascript3dthree.js
13
Leprosy

Three.jsで正投影カメラをインスタンス化するパターンは次のとおりです。

_var camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, near, far );
_

ここで、widthとheightは、カメラの直方体形状の錐台の幅と高さをworld-space単位で測定したものです。

nearとfarは、錐台のニアプレーンとファープレーンまでのworld-space距離です。 nearとfarはどちらもゼロより大きくなければなりません。

歪みを防ぐために、通常は正射投影カメラのアスペクト比（_width / height_）をレンダーのキャンバスのアスペクト比と一致させる必要があります。 （*下の注を参照）

残念なことに、three.jsの例の多くが_window.innerWidth_および_window.innerHeight_を引数としてこのコンストラクターに渡します。これは、正投影カメラがテクスチャへのレンダリングに使用されている場合、または正投影シーンのワールド単位がピクセル単位である場合にのみ意味があります。

*注意：実際には、カメラのアスペクト比はレンダラーのビューポートのアスペクト比と一致している必要があります。ビューポートは、キャンバスのサブ領域にすることができます。レンダラーのビューポートをrenderer.setViewport()を使用して直接設定しない場合、ビューポートはキャンバスと同じサイズになるため、キャンバスと同じアスペクト比になります。

three.js r.73

34
WestLangley

今後の参考のために： 良い5分のビデオ

var w = container.clientWidth;
var h = container.clientHeight;
var viewSize = h;
var aspectRatio = w / h;

_viewport = {
    viewSize: viewSize,
    aspectRatio: aspectRatio,
    left: (-aspectRatio * viewSize) / 2,
    right: (aspectRatio * viewSize) / 2,
    top: viewSize / 2,
    bottom: -viewSize / 2,
    near: -100,
    far: 100
}

_camera = new THREE.OrthographicCamera ( 
    _viewport.left, 
    _viewport.right, 
    _viewport.top, 
    _viewport.bottom, 
    _viewport.near, 
    _viewport.far 
);
6
Ivan Bacher
            camera.top = (.95*camera.top);
            camera.bottom = (.95*camera.bottom);
            camera.left = (.95*camera.left);
            camera.right = (.95*camera.right);
1
contehhh