Three.js - 視圖的寬度

Question

有沒有辦法找出場景渲染部分的寬度？

例如，如果我們有一個寬度為 100 的網格，但以一定的縮放級別進行渲染……我如何計算正在屏幕中渲染的網格部分的寬度？

Answer 1

你必須在這里精確。

您可以在給定相機的視野、 camera.fov和與相機的給定距離dist下計算可見矩形區域。

由於對象可能具有深度，因此您必須通過網格選擇一個平面，並在該距離處進行計算。

以下是如何計算距相機給定距離dist的可見height和width 。

var vFOV = THREE.MathUtils.degToRad( camera.fov ); // convert vertical fov to radians

var height = 2 * Math.tan( vFOV / 2 ) * dist; // visible height

var width = height * camera.aspect;           // visible width

三.js r.117

Answer 2

對於（完美的）球形物體，它將覆蓋更多的近距離視圖，因為您需要考慮切線，即您看不到“極點”。

對球形對象使用以下內容：

// we're using the following triangle: camera - tangent point on sphere - centre of sphere
var targetAngle = 2 * Math.asin(objectRadius / distanceToCamera);

var vFOV = THREE.Math.degToRad(this.fov);

var normalizedHeight = targetAngle / vFOV;

將此與您的視口寬度相乘以獲得屏幕高度。 對於寬度，您需要應用 hFOV - 請參閱： THREE.PerspectiveCamera 中無失真的 90 度視野