Three.js基础探寻二-安度博客

时间：2019-02-04 14:52:50 作者：来源：阅读：106 评论：0

内容摘要：　　本篇主要先容照相机中的正交投影照相机。　　　　第一篇传送门：Three.js基础探寻一1.照相机　　图形学中的照相机界说了三维空间到二维屏幕的投影方式。　　针对投影方式照相机分为正交投影照相机和透视投影照相机。2.两种相机的区别与适用规模　　正交投影：　　透视投影：　　正交投......

　　本篇主要先容照相机中的正交投影照相机。　　
　　第一篇传送门：Three.js基础探寻一

1.照相机
　　图形学中的照相机界说了三维空间到二维屏幕的投影方式。
　　针对投影方式照相机分为正交投影照相机和透视投影照相机。
2.两种相机的区别与适用规模
　　正交投影：
　　透视投影：
　　正交投影就像数学课上画的；而透视投影有一个基本点，就是远处的物体比近处的物体小，远大近小。
　　对于制图、建模软件通常使用正交投影；而对于其他大多数应用，通常使用透视投影。
3.正交投影照相机
　　正交投影照相机的结构函数：
```
Three.OrthographicCamera(leftrighttopbottomnearfar)
```
　　六个参数划分代表正交投影照相机拍摄到的六个面的位置。
　　其中，near体现近平面与相机中心点的垂直距离；far体现远平面与相机中心点的垂直距离。
图片泉源
　　若要保持照相机的横纵比例，(right-left)与(top-bottom)的比例需与canvas的宽高比例一致。
　　由图可见near与far的值应为正值，且far>near。如果最后两个值是(0，0)，也就是near和far值相同了，视景体深度没有了，整个视景体都被压成个平面了，就会显示不正确。
4.正交投影照相机实例
　　源码：
```
<!DOCTYPE html><html> <head> <meta charset=&＃39;UTF-8&＃39;><title>3.js测试二</title> </head> <body onload=&＃39;init()&＃39;> <canvas id=&＃39;mainCanvas&＃39; width=&＃39;400px&＃39; height=&＃39;300px&＃39; ></canvas> <script type=&＃39;text/javascript&＃39; src=&＃39;js/three.min.js&＃39;></script> <script type=&＃39;text/javascript&＃39;> function init() { var renderer = new THREE.WebGLRenderer({ canvas: document.getElementById(&＃39;mainCanvas&＃39;) }); renderer.setClearColor(0x000000); var scene = new THREE.Scene(); // 设置照相机 var camera = new THREE.OrthographicCamera(-2 2 1.5 -1.5 1 10); camera.position.set(0 0 5); //camera.lookAt(new THREE.Vector3(0 0 0)); scene.add(camera); // 建设立方体 var cube = new THREE.Mesh(new THREE.CubeGeometry(1 1 1) new THREE.MeshBasicMaterial({ color: 0xff0000 wireframe: true }) ); scene.add(cube); // render renderer.render(scene camera); } </script> </body></html> 
```
　　带详细注释的请参考第一篇。
　　其中，THREE.MeshBasicMaterial（基础网格材质）的wireframe属性如果为true，则将材质渲染成线框。
可以看到当前位置后面的边会与前面的完全重合：
　　4.1 改变视景体长宽比例
　　这里canvas的宽高比为4:3，照相机的水平距离为4，垂直距离为3，因此长宽比例保持稳定（1:1）。
　　若将照相机的水平距离减小为2，
```
var camera = new THREE.OrthographicCamera(-111.5-1.5110);
```
　　物体会被拉长：
　　照相机的视野规模变窄了，导致正方体在视野规模内的横向比例增加了，因此体现为正方体变宽了。
　　4.2 改变相机位置
　　例子中的相机位置是（005），由于照相机默认是面向z轴负偏向放置的，所以能看到原点处的正方体。
　　将照相机的位置向右移动1个单元：
```
var camera = new THREE.OrthographicCamera(-221.5-1.5110);camera.position.set(105);
```
　　照相机面临着物体，所以照相机右移，所照的物体向左移：
　　4.3 改变视景体位置
　　将视景体设置的更靠右：
```
var camera = new THREE.OrthographicCamera(-131.5-1.5110);camera.position.set(105);
```
　　和右移照相机一样。
　　4.4 改变照相机角度
```
camera.position.set(4-35);camera.lookAt(new THREE.Vector3(0 0 0));
```
　　可是现在照相机沿z轴负偏向视察的，因此视察不到正方体，只看到一片黑。我们可以通过lookAt函数指定它看着原点偏向：
```
camera.lookAt(new THREE.Vector3(0 0 0));
```
　　注意，lookAt函数接受的是一个THREE.Vector3的实例，不要写成camera.lookAt(0 0 0)。
　　下一篇会先容透视投影照相机。

分享到：微信新浪微博腾讯微博 QQ空间腾讯朋友百度新首页

上一篇：$.when(deferreds)-安度博客
下一篇：Three.js基础探寻五正二十面体圆环面等-安度博客

精彩推荐

阅读排行

本站所有站内信息仅供娱乐参考，不作任何商业用途，不以营利为目的，专注分享快乐，欢迎收藏本站！

所有信息均来自：百度一下 (威尼斯人官网)

Three.js基础探寻二-安度博客

最近更新

精彩推荐

阅读排行