THREE.JS:在屏幕上获取相机和物体位置的物体尺寸

Question

我是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;

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

Answer 1

您可以使用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. 

(注意:在三个.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倍.

我提供的链接显示了如何计算可见宽度,因此如果需要,您可以以类似的方式进行计算.