前言
Three.js是一个3Djs库，webGL开源框架中比较优秀的一个。除了webGL以外，Three.js还提供了基于Canvas、SVG标签的渲染器，调试建议使用Chrome或者Firefox。
1.照相机
图形学中的照相机定义了三维空间到二维屏幕的投影方式。
针对投影方式照相机分为正交投影照相机和透视投影照相机。
2.两种相机的区别与适用范围
正交投影：
透视投影：
正交投影就像数学课上画的；而透视投影有一个基本点，就是远处的物体比近处的物体小，远大近小。
对于制图、建模软件通常使用正交投影；而对于其他大多数应用，通常使用透视投影。
3.正交投影照相机
正交投影照相机的构造函数：
rush:js;">
Three.OrthographicCamera(left,right,top,bottom,near,far)
六个参数分别代表正交投影照相机拍摄到的六个面的位置。
其中，
near表示近平面与相机中心点的垂直距离
；far表示远平面与相机中心点的垂直距离
。
若要保持照相机的横纵比例
，(right-left)
与(top-bottom)
的比例需与canvas的宽高比例一致。由图可见near与far的值应为正值，且
far>near
。如果最后两个值是(0，0)，也就是near和far值相同了，视景体深度没有了，整个视景体都被压成个平面了，就会显示不正确。4.正交投影照相机实例
源码：
rush:xhtml;">
3.js测试二
<Meta charset="UTF-8">
<body onload="init()">
<canvas id="mainCanvas" width="400px" height="300px" ></canvas>
<script type="text/javascript" src="js/three.min.js"></script>
<script type="text/javascript">
function init() {
var renderer = new THREE.Web<a href="/tag/glr/" target="_blank" class="keywords">glr</a>enderer({
canvas: document.getElementById('mainCanvas')
});
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,5);
//camera.lookAt(new THREE.Vector3(0,0));
scene.add(camera);
// 创建立方体
var cube = new THREE.Mesh(new THREE.CubeGeometry(1,1),new THREE.MeshBasicMaterial({
color: 0xff0000,wireframe: true
})
);
scene.add(cube);
// render
renderer.render(scene,camera);
}
</script>