三轴学习用正交投影相机

序

Three.js是一个3Djs库，是webGL开源框架中的优秀库。除了webGL，Three.js还提供了基于Canvas和SVG标签的渲染器，建议使用Chrome或Firefox进行调试。

1.照相机

图形中的相机定义了从三维空间到2D屏幕的投影模式。

根据投影方式，相机分为正交投影相机和透视投影相机。

2.两种摄像机的区别和适用范围

正交投影：

透视投影：

正交投影就像数学课上的画画；透视投影有一个基本点，就是远物比近物小，近物越大越小。

正交投影通常用于绘图和建模软件。对于大多数其他应用，通常使用透视投影。

3.正交投影照相机

正交投影相机的构造函数：

三的六个参数。正交相机(左、右、上、下、近、远)分别代表正交投影相机拍摄的六个平面的位置。

其中近表示近平面和摄像机中心点之间的垂直距离；“远”表示远平面和摄像机中心点之间的垂直距离。

为了保持相机的水平和垂直比例，(右-左)和(上-下)的比例应该与画布的宽度和高度比例一致。

从图中可以看出，远近的值应该是正的，远近的。如果最后两个值为(0，0)，即远近值相同，则场景深度消失，整个场景被压入一个平面，显示会不正确。

4.正交投影相机示例

源代码：

！doctype HTML HTML Head metharset=' UTF-8 ' Title 3 . js Test 2/Title/Head Body Onload=' init()' Canvas ID=' Main Canvas ' Width=' 400 px ' Height=' 300 px '/Canvas脚本类型=' text/JavaScript ' src=' http 3360 js/THREE . min . js '/脚本脚本类型=' text/JavaScript ' function init(){ var renderer=new THREE。WebGLRenderer({ canvas : document . getelementbyid(' mainCanvas ')})；renderer . SetClearColor(0x 000000)；var场景=新三。场景()；//设置相机var camera=新三。正投影相机(-2，2，1.5，-1.5，1，10)；camera.position.set(0，0，5)；//camera.lookAt(new THREE。Vector3(0，0，0))；scene.add(摄像机)；//创建一个cube varcube=new three . mesh(new three . cubesgemetry(1，1，1)，new three . mesh bisc material({ color 3360 xff 0000，wire frame : true })；scene.add(立方体)；//render render . render(场景、摄像机)；}/script/body/htmlwhere，如果THREE的线框属性。MeshBasicMaterial为真，材质将渲染为线框。

可以看到，当前位置后面的边与前面的边完全重合：

4.1更改场景的纵横比

这里画布的长宽比为4:3，相机的水平距离为4，垂直距离为3，所以长宽比保持不变(1:1)。

如果摄像机的水平距离减小到2，

var camera=new THREE。OrthographicCamera(-1，1，1.5，-1.5，1，10)；对象将被拉长：

摄像机的视场变窄，导致立方体在视场中的横向比例增加，从而显示出立方体变宽。

4.2改变摄像机位置

在该示例中，摄像机位置为(0，0，5)。因为默认情况下，相机面向Z轴的负方向放置，所以可以看到原点的立方体。

将摄像机位置向右移动1个单位：

var camera=new THREE。OrthographicCamera(-2，2，1.5，-1.5，1，10)；camera.position.set(1，0，5)；摄像机面向对象，因此摄像机向右移动，被照亮的对象向左移动：

4.3改变场景的位置

将场景设置在右侧：

var camera=new THREE。OrthographicCamera(-1，3，1.5，-1.5，1，10)；camera.position.set(1，0，5)；就像向右移动相机一样。

4.4更改相机角度

camera.position.set(4，-3，5)；相机。看(新的三。Vector3(0，0，0))；但是现在相机沿着Z轴的负方向观察，所以它观察不到立方体，只看到一片黑色。我们可以通过lookAt函数指定它观察原点的方向：

相机。看(新的三。Vector3(0，0，0))；请注意，lookAt函数接受一个三的实例。矢量3，所以不要把它写成照相机。看(0，0，0)

好了，以上就是Three.js学习的正交投影相机的全部内容，希望对大家学习Three.js有所帮助，关于Three.js的文章会陆续更新。请继续关注我们。