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);
			}