WebGL(Web Graphics Library)是一種3D繪圖協議,它容許把JavaScript和OpenGL ES 2.0結合在一塊兒,經過增長OpenGL ES 2.0的一個JavaScript綁定,WebGL能夠爲HTML5 Canvas提供硬件3D加速渲染,這樣Web開發人員就能夠藉助系統顯卡來在瀏覽器裏更流暢地展現3D場景和模型。javascript
但使用WebGL原生的API來寫3D程序很是複雜,須要相對較多的數學知識,對於前端開發者來講學習成本較高。而Three.js對WebGL提供的接口進行了很是好的封裝,簡化了不少細節,大大下降了學習成本,成爲前端開發者完成3D繪圖的得力工具,目前在github上star數量已經達到了將近4萬。前端
首先來看一個例子,該例子繪製了一個立方體,並讓它不斷旋轉,經過這個例子來初步瞭解three.js的基本使用及主要API。java
var scene = new THREE.Scene(); // 建立場景 var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); // 建立透視相機 var renderer = new THREE.WebGLRenderer(); // 建立一個 WebGL 渲染器 renderer.setSize(window.innerWidth, window.innerHeight); // 設置渲染器爲全屏 document.body.appendChild(renderer.domElement); var geometry = new THREE.BoxGeometry(1,1,1); // 建立一個長寬高都爲1個單位的立方體 var material = new THREE.MeshBasicMaterial({color: 0x00ff00}); // 建立材質,對光照無感 var cube = new THREE.Mesh(geometry, material); // 建立一個立方體網格(mesh),將材質包裹在立方體上 scene.add(cube); // 將立方體網格添加到場景中 camera.position.z = 5; // 指定相機位置 function render() { requestAnimationFrame(render); // 讓瀏覽器執行參數中的函數,不斷循環 cube.rotation.x += 0.1; cube.rotation.y += 0.1; renderer.render(scene, camera); // 結合場景和相機進行渲染,即用攝像機拍下此刻的場景 } render();
three.js中的三大要素:場景(scene)、相機(camera)、渲染器(renderer),有了這三樣東西,咱們纔可以使用相機將場景渲染到網頁上去。git
var scene = new THREE.Scene()
相機
相機是成像的工具,相機有不少種類,不一樣種類的相機即便從一個角度拍攝,所成像出來的結果也不相同。相機決定了場景中哪一個角度的景色會顯示出來。
說到相機,就涉及到座標系的概念。webGL和three.js使用的是右手座標系,以下圖所示:github
在Three.js中有兩種經常使用的相機:透視相機(perspectiveCamera)和正交投影相機(OrthographicCamera )web
透視相機:canvas
正交投影相機:瀏覽器
參數 | 介紹 |
---|---|
fov | 表示視場,即攝像機能看到的視野。推薦默認值50 |
aspect | 指定渲染結果橫向尺寸和縱向尺寸的比值,推薦默認值爲窗口的長寬比,即window.innerWidth/window.innerHeight |
near | 指定從距離攝像機多近的位置開始渲染,推薦默認值0.1 |
far | 指定攝像機從它所在的位置最遠能看到多遠,過小場景中的遠處不會被渲染,太大會浪費資源影響性能,推薦默認值1000 |
three.js中有不少種類的渲染器,例如webGLRenderer、canvasRenderer、SVGRenderer,一般使用的是webGL渲染器。app
建立webGL渲染器:var renderer = new THERR.WebGLRenderer();
dom
建立完渲染器後,須要調用render方法將以前建立好的場景和相機相結合從而渲染出來,即調用渲染器的render方法:renderer.render(scene,camera)
以上就是three.js中完成3D繪圖的三大要素,利用這三大要素,咱們就能夠繪製出想要的3D圖像了。
繪製的前期準備工做已經作完,接下來要作的就是把想要繪製的物體添加到場景中了。在計算機世界裏,3D世界是由點組成,兩個點可以組成一條直線,三個不在一條直線上的點就可以組成一個三角面片,無數個三角面片就可以組成各類各樣形狀的物體,一般把這種網格模型叫作Mesh模型。Mesh模型是三維開發中使用的最爲普遍的模型。
建立Mesh模型的物體:var object = new THREE.Mesh(Geometry, Material)
,第一個參數表明物體的形狀,第二個參數表明物體的材質。
Geometry
three.js 給出了不少方法去生成固定的網格形狀,好比長方體(BoxGeometry)、球體(SphereGeometry)、圓形(CircleGeometry)等等。還有根據座標去生成具體形狀的方法,能夠藉助第三方建模軟件建模以後導入,目前支持的模型格式有.obj(最經常使用),.mtl,.dae,.ctm,.ply,.stl,.wrl,.vtk等。Three.js有一系列支持外部導入文件的輔助函數,是在three.js庫以外的,使用前須要額外下載。
Material
hree.js給出了不少種直接生成材質的方法,其中比較經常使用的有MeshBasicMaterial(對光照無感,給幾何體一種簡單的顏色或顯示線框)、MeshLambertMaterial(對光照有反應,無光源則不會顯示,用於建立暗淡的不發光的物體)、MeshPhongMaterial(對光照有反應,無光源則不會顯示,用於建立金屬類明亮的物體)等等。
物體之因此能被人眼看見,一種是它自身的材料就能發光,不須要藉助外界光源;另外一種是自身材料不發光,須要反射環境中的光。對於自身不能發光的物體,須要給場景添加光源從而達到可視的效果。
Light
three.js中能夠建立出不少不一樣類型的光源,好比環境光(AmbientLight,它的顏色會添加到整個場景和全部對象的當前顏色上),點光源(PointLight,這種光源放出的光線來自同一點,且方向輻射自四面八方,例如蠟燭發出的關),方向光(THREE.DirectionalLight,也稱無限光,從這種光源發出的光線能夠看做是平行的,例如太陽光),聚光燈(THREE.SpotLight ,這種光源的光線從一個錐體中射出,在被照射的物體上產生聚光的效果,例如手電筒發出的光等)
有光源就缺乏不了陰影,在Three.js中,能造成陰影的光源只有THREE.DirectionalLight與THREE.SpotLight;而相對地,能表現陰影效果的材質只有THREE.LambertMaterial與THREE.PhongMaterial。three.js中渲染陰影的開銷比較大,因此默認物體是沒有陰影的,須要單獨開啓。開啓陰影方法: