Three.js - 正交相机 [英] Three.js - Orthographic camera

问题描述

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

I've working on an app which displays some 3D models. We load the models, create the meshes, add them to the scene...standard procedure. After the last mesh is added, we compute the bounding box in order to move the camera and cover all the scene, using the size of the total geometry and the size of the viewport to do the math.

    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 是一个包含边界框宽度和高度的对象.经过这个计算，我们移动相机(加上一点比例，只是为了美观，我们希望几何体和屏幕边框之间有一点空间:))并渲染

bounds is an object containing the width and height of the bounding box. After this calculation, we move the camera(plus a little ratio, just aesthetics, we want a little room between the geometry and the screen border :) ) and render

    camera.position.z = r * 1.05;

到目前为止，这已实现并运行正常.这是通过 PerspectiveCamera 完成的.现在我们想改变它并使用 OrthographicCamera ......结果是一团糟.模型太小，我们失去了轨迹球控件的鼠标滚轮缩放，并且移动相机的算法不再起作用.另外我不明白相机构造函数的参数......这些宽度和高度是用于几何图形还是视口?

So far this is implemented and runs ok. This has been done with PerspectiveCamera. Now we want to change that and use OrthographicCamera...turns out to be a mess. Models are too small, we lose the mousewheel zoom from the TrackBall Controls and the algorithm to move the camera is not working anymore. Also I don't understand the parameters of the constructor for the camera...these width and height are for the geometry or the viewport?

推荐答案

在three.js中实例化正交相机的模式是:

The pattern for instantiating an orthographic camera in three.js is:

var camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, near, far );

其中width 和height 是以世界空间 为单位测量的相机长方体截头体的宽度和高度.

where width and height are the width and height of the camera's cuboid-shaped frustum measured in world-space units.

near 和 far 是到截锥体的近平面和远平面的世界空间距离.near 和 far 都应该大于零.

near and far are the world-space distances to the near and far planes of the frustum. Both near and far should be greater than zero.

为了防止失真，您通常希望正交相机的纵横比 ( width/height ) 与渲染画布的纵横比相匹配.(见下面的*注)

To prevent distortion, you will typically want the aspect ratio of the orthographic camera ( width / height ) to match the aspect ratio of the render's canvas. (see *Note below)

不幸的是，three.js 示例中的许多示例都将 window.innerWidth 和 window.innerHeight 作为参数传递给此构造函数.仅当正交摄影机用于渲染纹理，或者正交场景的世界单位以像素为单位时，这样做才有意义.

It is unfortunate that many of the three.js examples pass window.innerWidth and window.innerHeight as args to this constructor. Doing so only makes sense if the orthographic camera is used for rendering to a texture, or if the world units for your orthographic scene are in pixels.

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

*Note: Actually, the camera aspect ratio should match the aspect ratio of the renderer's viewport. The viewport can be a sub-region of the canvas. If you do not set the renderer's viewport directly using renderer.setViewport(), the viewport will be the same size as the canvas, and hence have the same aspect ratio as the canvas.

three.js r.73

three.js r.73

这篇关于Three.js - 正交相机的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！