Three.js - 视图宽度

Question

有没有办法找出场景渲染部分的宽度？

例如，如果我们有一个宽度为 100 的网格，但以一定程度的缩放进行渲染...我如何计算在屏幕中渲染的网格部分的宽度？

Answer 1

这里你必须准确。

您可以根据相机的视野

camera.fov

和距相机的给定距离

dist

来计算可见矩形区域。

由于对象可能具有深度，因此您必须通过网格选择一个平面，并在该距离处进行计算。

以下是如何计算距相机给定距离

height

的可见

width

和

dist

。

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

const height = 2 * Math.tan( vFOV / 2 ) * dist; // visible height
    
const width = height * camera.aspect;           // visible width

编辑：现在有一个内置方法可用：

PerspectiveCamera.getViewSize()

：

const target = new THREE.Vector2(); // create once and reuse it

camera.getViewSize( distance, target ); // result written to target

三.js r162

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 度视野