Three.js基础探寻二——正交投影照相机
本篇主要介紹照相機(jī)中的正交投影照相機(jī)。
第一篇傳送門(mén)：Three.js基礎(chǔ)探尋一
?
1.照相機(jī)
圖形學(xué)中的照相機(jī)定義了三維空間到二維屏幕的投影方式。
針對(duì)投影方式照相機(jī)分為正交投影照相機(jī)和透視投影照相機(jī)。
2.兩種相機(jī)的區(qū)別與適用范圍
正交投影：
?
透視投影：
?
正交投影就像數(shù)學(xué)課上畫(huà)的；而透視投影有一個(gè)基本點(diǎn)，就是遠(yuǎn)處的物體比近處的物體小，遠(yuǎn)大近小。
對(duì)于制圖、建模軟件通常使用正交投影；而對(duì)于其他大多數(shù)應(yīng)用，通常使用透視投影。
3.正交投影照相機(jī)
正交投影照相機(jī)的構(gòu)造函數(shù)：
Three.OrthographicCamera(left,right,top,bottom,near,far)六個(gè)參數(shù)分別代表正交投影照相機(jī)拍攝到的六個(gè)面的位置。
其中，near表示近平面與相機(jī)中心點(diǎn)的垂直距離；far表示遠(yuǎn)平面與相機(jī)中心點(diǎn)的垂直距離。
圖片來(lái)源
若要保持照相機(jī)的橫縱比例，(right-left)與(top-bottom)的比例需與canvas的寬高比例一致。
由圖可見(jiàn)near與far的值應(yīng)為正值，且far>near。如果最后兩個(gè)值是(0，0)，也就是near和far值相同了，視景體深度沒(méi)有了，整個(gè)視景體都被壓成個(gè)平面了，就會(huì)顯示不正確。
4.正交投影照相機(jī)實(shí)例
源碼：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>3.js測(cè)試二</title> </head><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.WebGLRenderer({canvas: document.getElementById('mainCanvas')});renderer.setClearColor(0x000000);var scene = new THREE.Scene();// 設(shè)置照相機(jī)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);// 創(chuàng)建立方體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>帶詳細(xì)注釋的請(qǐng)參考第一篇。
其中，THREE.MeshBasicMaterial（基礎(chǔ)網(wǎng)格材質(zhì)）的wireframe屬性如果為true，則將材質(zhì)渲染成線(xiàn)框。
可以看到當(dāng)前位置后面的邊會(huì)與前面的完全重合：
4.1 改變視景體長(zhǎng)寬比例
這里canvas的寬高比為4:3，照相機(jī)的水平距離為4，垂直距離為3，因此長(zhǎng)寬比例保持不變（1:1）。
若將照相機(jī)的水平距離減小為2，
var camera = new THREE.OrthographicCamera(-1,1,1.5,-1.5,1,10);物體會(huì)被拉長(zhǎng)：
照相機(jī)的視野范圍變窄了，導(dǎo)致正方體在視野范圍內(nèi)的橫向比例增加了，因此表現(xiàn)為正方體變寬了。
4.2 改變相機(jī)位置
例子中的相機(jī)位置是（0,0,5），由于照相機(jī)默認(rèn)是面向z軸負(fù)方向放置的，所以能看到原點(diǎn)處的正方體。
將照相機(jī)的位置向右移動(dòng)1個(gè)單位：
var camera = new THREE.OrthographicCamera(-2,2,1.5,-1.5,1,10);camera.position.set(1,0,5);照相機(jī)面對(duì)著物體，所以照相機(jī)右移，所照的物體向左移：
4.3 改變視景體位置
將視景體設(shè)置的更靠右：
var camera = new THREE.OrthographicCamera(-1,3,1.5,-1.5,1,10);camera.position.set(1,0,5);和右移照相機(jī)一樣。
4.4 改變照相機(jī)角度
camera.position.set(4,-3,5);camera.lookAt(new THREE.Vector3(0, 0, 0));但是現(xiàn)在照相機(jī)沿z軸負(fù)方向觀察的，因此觀察不到正方體，只看到一片黑。我們可以通過(guò)lookAt函數(shù)指定它看著原點(diǎn)方向：
camera.lookAt(new THREE.Vector3(0, 0, 0));注意，lookAt函數(shù)接受的是一個(gè)THREE.Vector3的實(shí)例，不要寫(xiě)成camera.lookAt(0, 0, 0)。
下一篇會(huì)介紹透視投影照相機(jī)。
?
整理自張?chǎng)├颉禩hree.js入門(mén)指南》
其他參考：投影中的正交和透視
?
?
轉(zhuǎn)載于:https://www.cnblogs.com/xulei1992/p/5707733.html
總結(jié)
以上是生活随笔為你收集整理的Three.js基础探寻二——正交投影照相机的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： dm365 resize
- 下一篇： 分享400个微信小程序模板和小程序设计模