THREE.JS:根据相机和屏幕上的对象位置获取对象大小 [英] THREE.JS: Get object size with respect to camera and object position on screen

查看：34 发布时间：2021/9/7 18:41:10 three.js

本文介绍了THREE.JS:根据相机和屏幕上的对象位置获取对象大小的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

我是 3D 编程的新手，我确实开始使用 Three.JS 从 WebGL 探索 3D 世界.

I am newbie to 3D programming, I did started to explore the 3D world from WebGL with Three.JS.

我想在更改 camera.position.z 和对象的Z"位置时预先确定对象大小.

I want to predetermine object size while I change the camera.position.z and object's "Z" position.

例如:我有一个尺寸为 100x100x100 的立方体网格.

For example: i have a cube mesh at size of 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 );

我想知道屏幕上那个立方体对象的大小(二维宽度和高度)，

I want to know size (2D width & height) of that cube object on screen when,

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

有什么办法可以找到它/预先确定它吗?

Is there is any way to find it/predetermine it?

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

在你的情况下，相机 FOV 是 45 度，所以

In your case the camera FOV is 45 degrees, so

vFOV = PI/4.

(注意:在three.js中，相机的视野FOV是垂直，而不是水平的.)

(Note: in three.js the camera field-of-view FOV is the vertical one, not the horizontal one.)

从相机到立方体的正面(很重要！)的距离是 750 - 500 - 50 = 200.因此，您的案例中的可见高度是

The distance from the camera to the front face (important!) of the cube is 750 - 500 - 50 = 200. Therefore, the visible height in your case is

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

由于立方体的正面是 100 x 100，所以立方体所代表的可见高度的分数是

Since the front face of the cube is 100 x 100, the fraction of the visible height represented by the cube is

fraction = 100 / 165.69 = 0.60.

因此，如果您知道以像素为单位的画布高度，则以像素为单位的立方体高度是该值的 0.60 倍.

So if you know the canvas height in pixels, then the height of the cube in pixels is 0.60 times that value.

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

The link I provided shows how to compute the visible width, so you can do that calculation in a similar fashion if you need it.

这篇关于THREE.JS:根据相机和屏幕上的对象位置获取对象大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文