19

これは、カメラがインスタンス化される方法です。

var camera = new THREE.PerspectiveCamera(
    VIEW_ANGLE,
    ASPECT,
    NEAR,
    FAR
);

これらの値は何を意味しますか?

4

4 に答える 4

36

同じことが気になったので調べてみたら、「錐台」というビューです。

最近のプロジェクトで書いたコード コメントをここに貼り付けます。

// "What the f*** is a frustum?" you ask. Well I did.
// Think about it as a truncated pyramid. The tip is the camera. From a certain
// point "down" the pyramid (the "near plane"), stuff can be seen on-screen.
// After the "base" of the pyramid (the "far plane"), stuff is too far to be
// seen. Stuff outside the pyramid is off-screen too. There is also the "aspect
// ratio" (the rectangle that makes up the pyramid's base, so this value is
// width/height) and the "field of view" (think of it as a lens or something,
// it distorts the pyramid so there's more objects on screen - it is set in
// degrees and 45° is more-or-less a "natural" perspective. The bigger the
// number, the more "perspective" there is).

                                         ウィキペディアの画像

于 2012-07-01T10:11:50.560 に答える
18

最初のパラメータはFOVで、視野を意味します。三脚に取り付けられたカメラを想像してください。レンズを広角に変更すると、FOVが高くなります。カメラから出てくる円錐を想像してみてください。円錐はその領域のオブジェクトしか見ることができません。

ASPECTはアスペクト比を意味し、ワイドスクリーンTVは16/9で、古いものは4/3でした。通常は、画面の幅/高さ、またはthree.jsで使用するDIVの暗さを指定します。

于 2012-05-23T23:17:52.757 に答える
17

このチュートリアルは、すべてのカメラ パラメータと、 と の違いを理解するのに非常に役立ちPerspectiveCameraますOrthographicCamera。

透視カメラ

  • Fov (視野) - これは、カメラの位置から見ることができるシーンの一部です。ご存じのとおり、私たち人間はほぼ 180 度の視野を持っていますが、一部の鳥は完全に 360 度の視野を持っている場合もあります。ただし、コンピューターの場合、通常は 60 ～ 90 度の視野を使用します。

  • アスペクト - アスペクト比は、出力をレンダリングする領域の水平サイズと垂直サイズの比率です。通常はウィンドウ全体を使用するため、その比率のみを使用します。次のページの図でわかるように、縦横比によって、水平方向の視野と垂直方向の視野の差が決まります。通常値はwindow.innerWidth / window.innerHeightです。

  • Near - このプロパティはThree.js、シーンをレンダリングするカメラからの最小距離を定義します。通常、これは 0.1 などの非常に小さな値です。

  • Far - このプロパティは、カメラの位置からシーンを見る最大距離を定義します。これを低く設定しすぎると、シーンの一部がレンダリングされない可能性があります。設定が高すぎると、場合によってはレンダリング パフォーマンスに影響を与える可能性があります。通常の値は 500 から 2000 の間です。

正投影カメラ

  • Left (Camera frustum left plane) - これは、レンダリングされるものの左の境界線として表示されます。この値を -100 に設定すると、左にあるオブジェクトは表示されなくなります。

  • 右 (カメラ フラスタム ライト プレーン) - 右にあるものはレンダリングされません。

  • Top (Camera frustum top plane) - レンダリングされる最大のトップ位置。

  • Bottom (カメラ フラスタム ボトム プレーン) レンダリングされる下の位置。

  • Near (Camera frustum near plane) - この時点から、カメラの位置に基づいて、シーンがレンダリングされます。

  • Far (Camera frustum far plane) - カメラの位置に基づく、シーンがレンダリングされる最も遠いポイント。

次の図は非常にわかりやすいはずです。

ここに画像の説明を入力

2 つのカメラ モードの主な違いは、OrthographicCamera距離では役割を果たさないため、赤と黄色のボールの場合に見られるように、すべての要素が同じサイズになることです。

最後に、あるカメラから別のカメラに切り替えるために使用できるコードを次に示します。

this.switchCamera = function(SCENE_WIDTH, SCENE_HEIGHT) {
  if (camera instanceof THREE.PerspectiveCamera) {
    camera = new THREE.OrthographicCamera( SCENE_WIDTH / - 2, SCENE_WIDTH / 2, SCENE_HEIGHT / 2, SCENE_HEIGHT / - 2, 0.1, 1000 );
    camera.position.x = 0;
    camera.position.y = 0;
    camera.position.z = -1;
    camera.lookAt(scene.position);
    this.perspective = "Orthographic";
  } else {
    camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 1000 );
    camera.position.x = 0;
    camera.position.y = 0;
    camera.position.z = -1;
    camera.lookAt(scene.position);
    this.perspective = "Perspective";
  }
};

ノート：

  • この関数camera.lookAt(scene.position)は、シーンが配置されている場所にカメラを向けて、それが見えるようにします。
  • の単位three.jsはSI 単位であるため、 の値をピクセルと見なすleft,right,top,bottom べきではありません。
  • カメラの錐台の縦横比は通常、キャンバスの縦横比と一致する必要があります。
  • SCENE_WIDTH, SCENE_HEIGHT、シーンに追加されたジオメトリによって決定できます。正射錐台はシーンよりもはるかに大きくなる可能性がありますが、それほど節約的ではありません。

便利なリンク:

于 2016-05-11T18:11:21.170 に答える