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

问题描述

我工作的一个应用程序至极显示一些3D模型。我们加载模式，建立网格，将其添加到现场...标准程序。最后目加入后，我们计算以移动摄像机和覆盖所有的场景，使用总几何图形的大小和视口的大小做数学的边界框。

I've working on an app wich 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 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 );

其中，宽度和高度是相机的长方体形截锥中测得的宽度和高度的世界空间的单位。

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

附近和据是世界空间的距离的远近所述平截头体平面。无论附近和据应大于零。

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.

要prevent失真，您通常会希望正视相机的纵横比（宽/高）来匹配渲染的画布的纵横比。

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.

不幸的是，许多例子通过three.js的 window.innerWidth 和 window.innerHeight 为ARGS这个构造。这样做才有意义，如果该正视相机用于渲染到纹理。

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.

three.js r.58

three.js r.58

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