Three.js - 正交相机

Question

我正在开发一款展示3D模型的应用程序.我们加载模型,创建网格,将它们添加到场景......标准程序.添加最后一个网格后,我们计算边界框以移动相机并覆盖所有场景,使用总几何的大小和视口的大小来进行数学运算.

    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控件的鼠标滚轮缩放功能,移动相机的算法不再适用.另外我不明白摄像机构造函数的参数......这些宽度和高度是几何体还是视口？

Answer 1

在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)的纵横比与渲染画布的纵横比相匹配.(见下面*注)

不幸的是,许多three.js所传递的例子window.innerWidth,并window.innerHeight作为参数传递给这个构造函数.只有使用正交相机渲染纹理,或者正交场景的世界单位以像素为单位时,才这样做才有意义.

*注意:实际上,相机纵横比应与渲染器视口的纵横比相匹配.视口可以是画布的子区域.如果未直接使用渲染器的视口设置renderer.setViewport(),则视口的大小与画布大小相同,因此与画布具有相同的宽高比.

three.js r.73

Answer 2

供以后参考： 精彩的5分钟视频

var w = container.clientWidth;
var h = container.clientHeight;
var viewSize = h;
var aspectRatio = w / h;

_viewport = {
    viewSize: viewSize,
    aspectRatio: aspectRatio,
    left: (-aspectRatio * viewSize) / 2,
    right: (aspectRatio * viewSize) / 2,
    top: viewSize / 2,
    bottom: -viewSize / 2,
    near: -100,
    far: 100
}

_camera = new THREE.OrthographicCamera ( 
    _viewport.left, 
    _viewport.right, 
    _viewport.top, 
    _viewport.bottom, 
    _viewport.near, 
    _viewport.far 
);