threejs 正交相机实现视图指示器

突发其想，想梳理一下正交相机的内容，虽然不是很常用，但也是有必要学习的。
正交相机一般用在建模和工业UI上面，它观察的物体不会因为远近而引起视觉大小变化。
构造函数：
OrthographicCamera( left : Number, right : Number, top : Number, bottom : Number, near : Number, far : Number )
left — 摄像机视锥体左侧面。
right — 摄像机视锥体右侧面。
top — 摄像机视锥体上侧面。
bottom — 摄像机视锥体下侧面。
near — 摄像机视锥体近端面。
far — 摄像机视锥体远端面。

实例应用：创建视角指示器

主要是最近遇到有些朋友在问，怎么创建视角指示器，所以写下这篇文章，希望对你们有所帮助。

**1.**先创建两个场景、两个相机，其中一个透视相机（PerspectiveCamera）作为主场景相机，一个正交相机（OrthographicCamera）作为视角辅助；

				scene=new THREE.Scene();//主场景
				scene.background=new THREE.Color(0xf0f0f0);
				sceneOrtho=new THREE.Scene();	//视角场景

//主场景相机
				camera=new THREE.PerspectiveCamera(60,window.innerWidth/window.innerHeight,0.1,1000);
				camera.position.set(0,100,200);
				camera.lookAt(scene.position);

//正交相机				
				var aspect=window.innerWidth/window.innerHeight;
				cameraOrtho=new THREE.OrthographicCamera(frustumSize*aspect/-2,frustumSize*aspect/2,frustumSize/2,frustumSize/-2,1,500)
				cameraOrtho.position.set(0,0,300);

**2.**向场景增加物体，视角场景增加一个立方体和坐标轴绑定。

				var materialArr=[];
				materialArr.push(new THREE.MeshBasicMaterial({color: 0x009e60}));
				materialArr.push(new THREE.MeshBasicMaterial({color: 0x0051ba}));
				materialArr.push(new THREE.MeshBasicMaterial({color: 0xffd500}));
				materialArr.push(new THREE.MeshBasicMaterial({color: 0xff5800}));
				materialArr.push(new THREE.MeshBasicMaterial({color: 0xc41e3a}));
				materialArr.push(new THREE.MeshBasicMaterial({color: 0xff00ff}));
				//添加一个多材质的立方体
				viewBox=new THREE.Mesh(new THREE.BoxBufferGeometry(50,30,50),materialArr);
				sceneOrtho.add(viewBox);
				var axes=new THREE.AxesHelper(100);
				viewBox.add(axes);

**3.**渲染，

			var insetWidth,insetHeight;	
			insetWidth=insetHeight=window.innerHeight/4;
			
	/*		function onWindowResize(){	//自适应窗口，没有缩放窗口可以不要			
				var aspectValue=window.innerWidth/window.innerHeight;
				//透视相机
				camera.aspect=aspectValue;
				camera.updateProjectionMatrix();
				
				//正交相机
				cameraOrtho.left=frustumSize*aspectValue/-2;
				cameraOrtho.right=frustumSize*aspectValue/2;
				cameraOrtho.top=frustumSize/2;
				cameraOrtho.bottom=frustumSize/-2;
				cameraOrtho.updateProjectionMatrix();
				
				renderer.setSize(window.innerWidth,window.innerHeight);
			} */
			
			function render(){				
			 renderer.autoClear = false;
			 //设置主场景视区大小
			 renderer.setViewport(0, 0, window.innerWidth, window.innerHeight)
			 renderer.render(scene, camera);
			 
			 //复制主场景相机的信息，位置，四元数等
			 cameraOrtho.position.copy(camera.position);
			 cameraOrtho.quaternion.copy(camera.quaternion);
			 cameraOrtho.lookAt(scene.position);
			  //设置副场景视区大小，(x, y,width,height).
			 renderer.setViewport(1200, 500, 200, 200)
			 renderer.render(sceneOrtho, cameraOrtho);
			}