threejs 下載鏈接:https://www.npmjs.com/package/three
一向臀、場景
3d物體需要一個(gè)發(fā)揮的空間,場景即為發(fā)揮的舞臺
thres.js中通過?THREE.Scene()?來創(chuàng)建一個(gè)場景
二搏予、相機(jī)
拍攝場景,記錄場景中的表現(xiàn)
主要分為兩類
1.透視相機(jī)
符合人們的視覺習(xí)慣,具有近大遠(yuǎn)小的特性
THREE.PerspectiveCamera = function(fov,aspect,near,far)
fov: 視角參數(shù),即圖1中的Θ薇组,表示兩平面之間的夾角,夾角越小坐儿,看到的場景越少律胀。
aspect: 縱橫比,圖1中視角所看到的場景橫截面的寬度與高度之比貌矿,比率越大炭菌,則看到的場景越寬。
near:?圖1中的近平面的距離
far:圖1中的遠(yuǎn)平面的距離
圖1(圖片來自網(wǎng)絡(luò))
2.正投影相機(jī)
近處與遠(yuǎn)處一樣大
THREE.OrthographicCamera = function(left,right,top,bottom,near,far)
以相機(jī)中心點(diǎn)出發(fā)逛漫,參數(shù)分別對應(yīng)6個(gè)面的偏移量黑低,即相對中心點(diǎn)的距離
圖片來自網(wǎng)絡(luò)
三、渲染器
將場景通過計(jì)算描繪在屏幕上
THREE.WebGLRenderer()
四酌毡、幾何體
存在于場景中的對象
github示例
示例
呈現(xiàn)效果