Three.js - 视图宽度

时间:2012-11-12 20:16:38

标签: javascript three.js

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

例如,如果我们有一个宽度为100的网格,但是使用一定级别的缩放进行渲染...如何计算在屏幕中渲染的网格部分的宽度?

2 个答案:

答案 0 :(得分:28)

你必须在这里确切。

您可以从相机中根据相机的视野camera.fov和给定距离dist计算可见的矩形区域。

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

以下是如何计算相机距离height的可见widthdist

var vFOV = THREE.Math.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.87

答案 1 :(得分:0)

对于(完美的)球形物体,由于需要考虑切线,即看不见“极点”,它将覆盖更多的近景视图。

对球形物体使用以下内容:

// 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