我正在开发一个显示一些 3D 模型的应用程序。我们加载模型,创建网格,将它们添加到场景中……标准程序。添加最后一个网格后,我们计算边界框以移动相机并覆盖所有场景,使用总几何体的大小和视口(viewport)的大小进行数学计算。
if (bounds.bx / bounds.by < camera.aspect) {
/* Vertical max */
r = bounds.by / (2 * Math.tan(Math.PI / 8));
} else {
/* Horizontal max */
hFOV = 2 * Math.atan(Math.tan(Math.PI / 8) * camera.aspect);
r = bounds.bx / (2 * Math.tan((hFOV / 2)));
}
bounds
是一个对象,包含边界框的宽度和高度。在这个计算之后,我们移动相机(加上一点比例,只是为了美观,我们想要在几何图形和屏幕边框之间留一点空间:))并渲染
camera.position.z = r * 1.05;
到目前为止,这已经实现并运行正常。这是通过 PerspectiveCamera 完成的。现在我们想改变它并使用 OrthographicCamera……结果是一团糟。模型太小,我们失去了 TrackBall Controls 的鼠标滚轮缩放功能,并且移动相机的算法不再起作用。我也不明白相机构造函数的参数...这些宽度和高度是用于几何图形还是视口(viewport)?
最佳答案
在 three.js 中实例化正交相机的模式是:
var camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, near, far );
其中 width
和 height
是以世界空间为单位测量的相机长方体形截锥体的宽度和高度。
near
和 far
是到平截头体的近平面和远平面的世界空间 距离。 near
和 far
都应该大于零。
为防止失真,您通常希望正交相机的纵横比 (width/height
) 与渲染 Canvas 的纵横比相匹配。 (见下面的*注释)
不幸的是,许多 three.js 示例将 window.innerWidth
和 window.innerHeight
作为参数传递给此构造函数。仅当正交相机用于渲染纹理,或者正交场景的世界单位以像素为单位时,这样做才有意义。
*注意:实际上,相机纵横比应与渲染器视口(viewport)的纵横比相匹配。视口(viewport)可以是 Canvas 的子区域。如果您不直接使用 renderer.setViewport()
设置渲染器的视口(viewport),视口(viewport)将与 Canvas 大小相同,因此具有与 Canvas 相同的纵横比。
three.js r.73
关于javascript - Three.js - 正交相机,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17558085/