javascript Three.js - 正交相机
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17558085/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Three.js - Orthographic camera
提问by Leprosy
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.
我正在开发一个显示一些 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)));
}
boundsis 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
bounds是一个包含边界框宽度和高度的对象。经过这个计算，我们移动相机（加上一点比例，只是为了美观，我们希望在几何体和屏幕边框之间留出一点空间:)）并渲染
camera.position.z = r * 1.05;
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?
到目前为止，这已实现并运行正常。这是通过 PerspectiveCamera 完成的。现在我们想改变它并使用 OrthographicCamera ......结果是一团糟。模型太小，我们失去了轨迹球控件的鼠标滚轮缩放，并且移动相机的算法不再起作用。另外我不明白相机构造函数的参数......这些宽度和高度是用于几何图形还是视口？
回答by WestLangley
The pattern for instantiating an orthographic camera in three.js is:
在 Three.js 中实例化正交相机的模式是：
var camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, near, far );
where widthand heightare the width and height of the camera's cuboid-shaped frustum measured in world-spaceunits.
其中width和height是以世界空间单位测量的相机长方体形截锥体的宽度和高度。
nearand farare the world-spacedistances to the near and far planes of the frustum. Both nearand farshould be greater than zero.
near和far是到截锥体的近平面和远平面的世界空间距离。双方near并far应大于零。
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)
为防止失真，您通常希望正交相机 ( width / height) 的纵横比与渲染画布的纵横比相匹配。（见下面的*注）
It is unfortunate that many of the three.js examples pass window.innerWidthand window.innerHeightas 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.
不幸的是，three.js 示例中的许多示例都将window.innerWidth和window.innerHeight作为参数传递给此构造函数。仅当正交摄影机用于渲染纹理，或者正交场景的世界单位以像素为单位时，这样做才有意义。
*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.
*注意：实际上，相机纵横比应该与渲染器视口的纵横比相匹配。视口可以是画布的子区域。如果不直接使用 设置渲染器的视口renderer.setViewport()，则视口将与画布大小相同，因此具有与画布相同的纵横比。
three.js r.73
三.js r.73
回答by Ivan Bacher
For future reference: good 5min video
供将来参考： 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
);
回答by contehhh
camera.top = (.95*camera.top);
camera.bottom = (.95*camera.bottom);
camera.left = (.95*camera.left);
camera.right = (.95*camera.right);
