web-dev-qa-db-ja.com

THREE.JS：カメラと画面上のオブジェクトの位置に関するオブジェクトのサイズを取得します

私は3Dプログラミングの初心者ですが、Three.JSを使用してWebGLから3Dの世界を探索し始めました。

Camera.position.zとオブジェクトの「Z」位置を変更するときに、オブジェクトのサイズを事前に決定したいと思います。

例：サイズが100x100x100。の立方体メッシュがあります

cube = new THREE.Mesh(
        new THREE.CubeGeometry(100, 100, 100, 1,1,1, materials),     
        new THREE.MeshFaceMaterial()
    );

アスペクト比が1.8311874のカム

camera = new THREE.PerspectiveCamera( 45, aspect_ratio, 1, 30000 );

画面上のその立方体オブジェクトのサイズ（2D幅と高さ）を知りたいのですが、

camera.position.z = 750;
cube.position.z = 500;

それを見つける/事前に決定する方法はありますか？

three.js
19
Baskar.M

Three.js-ビューの幅 で説明されている式を使用して、カメラからの特定の距離の可視高さを計算できます。

var vFOV = camera.fov * Math.PI / 180;        // convert vertical fov to radians
var height = 2 * Math.tan( vFOV / 2 ) * dist; // visible height

あなたの場合、カメラのFOVは45度なので、

vFOV = PI/4.

（注：three.jsでは、カメラの視野FOVは垂直であり、水平ではありません。）

カメラから立方体の前面（重要！）までの距離は750-500-50 = 200です。したがって、ケースは

height = 2 * tan( PI/8 ) * 200 = 165.69.

立方体の前面は100x 100であるため、立方体で表される表示される高さの割合は次のようになります。

fraction = 100 / 165.69 = 0.60.

したがって、ピクセル単位のキャンバスの高さがわかっている場合、ピクセル単位の立方体の高さはその値の0.60倍になります。

私が提供したリンクは、表示幅を計算する方法を示しているので、必要に応じて同様の方法で計算を行うことができます。

36
WestLangley