Three.js - 视图宽度

Posted 2023-02-27

【中文标题】Three.js - 视图宽度

【英文标题】：Three.js - Width of view

【发布时间】：2012-11-01 07:11:10

【问题描述】：

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

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

【参考方案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

three.js r.117

【讨论】：

dist 是来自相机属性的 FAR 值的值吗？

dist 必须小于FAR，否则该位置将不可见。

真的...我误会了，从dist 发生什么.. 在代码中看不到它值的先前定义，请描述一下，dist 是什么？ Dtis = 远 - 近与否？谢谢！

dist 是与相机的距离。如果您需要帮助，请发一个新帖子。谢谢。

@XåpplI'-I0llwlg'I- 谢谢。更新了答案。

【参考方案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 - 请参阅：90 degree field of view without distortion in THREE.PerspectiveCamera