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

Question

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

私はcamera.position.zとオブジェクトの "Z"の位置を変更しながら、オブジェクトのサイズを事前に決めたいと思っています。

たとえば、 私は100x100x100のサイズのキューブメッシュを持っています。 1.8311874

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

のアスペクト比

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

とカム私場合、

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

画面にそのキューブのオブジェクトのサイズ（2D幅&高さ）を知りたいですそれを見つける/決める方法はありますか？

Answer 1

Three.js - Width of viewで説明されている式を使用して、カメラから所定の距離の目に見える高さを計算できます。カメラの視野FOV 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ので、

vFOV = PI/4. 

（注45度です！あなたのケースに見える高さは

あり、従って50 = 200 - 500 - 1） 前面（重要）キューブのカメラから

距離は750でありますあなたは、ピクセル単位でキャンバスの高さを知っていれば

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

立方体の前面が100×100であるので、立方体で表される可視高さの割合は、

fraction = 100/165.69 = 0.60. 

だから、次いで高さピクセル単位の立方体はその値の0.60倍です。

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