THREE.JS：獲取物體相對於相機和物體在屏幕上的位置

Question

我是3D編程的新手，我開始從WebGL和Three.JS一起探索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 - 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 

在你的情況下，攝像機的FOV爲45度，所以

vFOV = PI/4. 

（注：在three.js所場的相機視FOV是垂直一個，而不是水平！一個）

從相機到立方體的正面（重要）之間的距離爲750 - 500 - 50 = 200。因此，你的情況可見高度是

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

由於立方體的正面是100×100，通過立方體代表的可見高度的比例是

fraction = 100/165.69 = 0.60. 

所以，如果你知道像素的畫布高度，則高度像素中的立方體是該值的0.60倍。

我提供的鏈接顯示瞭如何計算可見寬度，因此如果需要，您可以以類似的方式進行計算。