THREE.JS：获取物体相对于相机的大小和物体在屏幕上的位置

Question

我是3D编程新手，开始探索Three.JS的WebGL世界。

我想在改变相机位置和物体“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;

有没有办法找到它/预先确定它？

- Baskar.M

Answer 1

你可以使用在Three.js - Width of view中解释的公式来计算相机到给定距离时的可见高度。

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

在您的情况下，摄像机视野角度为45度，因此

vFOV = PI/4. 

（注：在three.js中，相机的视野FOV是垂直方向的，而不是水平方向的。）

相机到正方体“前面”（很重要！）的距离为750-500-50=200。因此，在您的情况下，可见高度为

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

由于魔方的正面是100 x 100，所以魔方所代表的可见高度部分是

fraction = 100 / 165.69 = 0.60.

如果您知道画布高度的像素值，那么立方体的高度就是该值的0.60倍。

我提供的链接展示了如何计算可见宽度，如果需要，您可以类似地进行计算。

- WestLangley

---

在使用正交相机时，有没有一种方法可以获取立方体的可见宽度和高度？ - Fluqz