一、什么是正交投影相机
正交摄像机与透视投影摄像机最大的区别就是物体的大小不随物体距离影响，透视投影相机请看我上篇文章 three.js PerspectiveCamera（透视投影相机） - 02，然而正交投影摄像机无论物体距离摄像机多远，你所看到的物体大小都是1比1还原。
1.属性介绍
| 属性 | 描述 |
|---|---|
| left | 摄像机视锥体左侧面 |
| right | 摄像机视锥体右侧面 |
| top | 摄像机视锥体上侧面 |
| bottom | 摄像机视锥体下侧面 |
| near | 摄像机视锥体近端面。其默认值为0.1 |
| far | 摄像机视锥体远端面，其默认值为2000 |
2.代码示例
/**
* 相机设置
*/
var width = window.innerWidth; //窗口宽度
var height = window.innerHeight; //窗口高度
//创建相机对象
var camera=new THREE.OrthographicCamera(width/12, -width/12, height/12, -height/12, 0.1, 1000);
camera.position.set(0, 0, 200); //设置相机位置
camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
二、demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>正交摄像机demo</title>
<style>
body {
margin: 0;
overflow: hidden;/* 隐藏body窗口区域滚动条 */
}
</style>
<!--引入three.js三维引擎-->
<script src="../../../../lib/three.js"></script>
<script src="../../../../lib/OrbitControls.js"></script>
</head>
<body>
<script>
/**
* 创建场景对象Scene
*/
var scene = new THREE.Scene();
/**
* 创建网格模型
*/
// var geometry = new THREE.SphereGeometry(60, 40, 40); //创建一个球体几何对象
var geometry = new THREE.BoxGeometry(10, 10, 10); //创建一个立方体几何对象Geometry
var material = new THREE.MeshLambertMaterial({
color: 0x0000ff
}); //材质对象Material，这里只是单单的给复制颜色
for(var i=-9;i<10;i++) {
var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
mesh.position.set(i*20, 0, 10);
scene.add(mesh); //网格模型添加到场景中
}
for(var i=-9;i<10;i++) {
var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
mesh.position.set(0, i*20, 10);
scene.add(mesh); //网格模型添加到场景中
}
for(var i=-9;i<10;i++) {
var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
mesh.position.set(0, 0, i*20);
scene.add(mesh); //网格模型添加到场景中
}
/**
* 光源设置
*/
//点光源
var point = new THREE.PointLight(0xffffff);
point.position.set(400, 200, 300); //点光源位置
scene.add(point); //点光源添加到场景中
//环境光
var ambient = new THREE.AmbientLight(0x444444);
scene.add(ambient);
// console.log(scene)
// console.log(scene.children)
/**
* 相机设置
*/
var width = window.innerWidth; //窗口宽度
var height = window.innerHeight; //窗口高度
//创建相机对象
var camera=new THREE.OrthographicCamera(width/12, -width/12, height/12, -height/12, 0.1, 1000);
camera.position.set(0, 0, 200); //设置相机位置
camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
/**
* 创建渲染器对象
*/
var renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(width, height);//设置渲染区域尺寸
renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
renderer.shadowMap.enabled = true;
document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
var controlStore = new THREE.OrbitControls(camera, renderer.domElement);
controlStore.dampingFactor = 0.5;
// 视角最小距离
controlStore.minDistance = 0;
// 视角最远距离
controlStore.maxDistance = 2000;
// 最大角度
controlStore.maxPolarAngle = Math.PI / 2.2;
function animate() {
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
animate();
//执行渲染操作 指定场景、相机作为参数
</script>
</body>
</html>
