阅读Threejs学习正交投影相机
前言3djs阅读Three js是一个图书馆，一个更好的在WebGL的开源框架。除了阅读Three js WebGL，也提供了一个基于SVG的渲染画布，标签，和调试建议使用Chrome或Firefox。
1。照相机
图形中的摄像机将三维空间的投影定义为二维屏幕。
投影相机分为正交投影相机和透视投影相机。
2。两种相机的区别及应用范围
正投影：
透视投影：
正交投影就像一个数学课，透视投影有一个基本点，即物体远小于近物体，而且小得多。
正交投影通常用于制图和建模软件；对于大多数其他应用，透视投影通常被使用。
三.正交投影相机
正投影相机的构造：
three.orthographiccamera（左、右、顶部、底部、近、远）
这六个参数表示正交投影相机所拍摄的六个表面的位置。
在这一点上，近距离表示相机的近平面和中心之间的垂直距离，远代表相机的远平面和中心之间的垂直距离。
（左）到（上下）的比例应与画布的宽度与相机的横向和纵向比率之比一致。
可以看出，价值近远应积极的价值观，和远> near.if最后两值（0, 0），即近及远的值是相同的，身体的视觉深度不够，整体的视觉体压缩成一个平面，它不会要正确显示。
4的一个例子。正交投影相机
源代码：
3.js测试两
函数init（）{
VaR渲染=新three.webglrenderer（{
帆布：document.getelementbyid（'maincanvas）
}）；
Renderer.setClearColor（0x000000）；
var场景=新三。场景（）；
相机设置
VaR相机=新three.orthographiccamera（2, 2，1.5，1.5，1, 10）；
（0, 0, 5）camera.position.set；
/ / camera.lookat（新three.vector3（0, 0, 0））；
Scene.add（相机）；
创建一个多维数据集
VaR的立方体=新三。网（新three.cubegeometry（1, 1, 1），
新的three.meshbasicmaterial（{
颜色：0xFF0000，
线框：真
}）
）；
Scene.add（立方体）；
渲染
Renderer.render（场景，相机）；
}
在这方面，对three.meshbasicmaterial线框属性（基本网格材料）呈现为线框，如果这是真的。
你可以看到当前位置后面的边与前面完全重合。
4.1改变视图体长与宽度之比
宽度与高度的比例是4:3画面，摄像机的水平距离为4，垂直距离是3，所以长宽比例不变（1:1）。
如果相机的水平距离减少到2，
VaR相机=新three.orthographiccamera（- 1,1,1.5，- 1.5,1,10）；
对象将被拉长。
摄像机的视野范围缩小，导致立方体的视线范围横向比例增大，从而表现得更宽。
4.2改变相机位置
在摄像机位置的情况（0,0,5），因为相机放在Z轴负方向的默认，所以我们可以看到魔方的起源。
将摄像机位置移动到右边的1个单元：
VaR相机=新three.orthographiccamera（- 2,2,1.5，- 1.5,1,10）；
camera.position.set（1,0,5）；
摄像机面对物体，相机向右移动，物体向左移动。
4.3改变现场的位置
设置视图更正确：
VaR相机=新three.orthographiccamera（- 1,3,1.5，- 1.5,1,10）；
camera.position.set（1,0,5）；
它和右移相机一样。
4.4改变相机角度
camera.position.set（4，-二）；
Camera.lookAt（新three.vector3（0, 0, 0））；
但现在相机视图中沿Z轴负方向，因此没有观察到立方体，只看到一片黑色的。我们可以通过查看功能指定原点的方向：
Camera.lookAt（新three.vector3（0, 0, 0））；
注意看函数接受three.vector3实例，不camera.lookat（0, 0, 0）。
好吧，这些都是阅读Three js学习正交投影相机的所有内容。我希望我可以帮助你学习阅读Three js。萧边也将更新的文章阅读Three js，请继续关注。