2020-5-29 前端達(dá)人
課程介紹
近些年,瀏覽器的功能越來越強(qiáng)大,漸漸得成為了復(fù)雜應(yīng)用和圖形的平臺。同時(shí),現(xiàn)有大多數(shù)瀏覽器實(shí)現(xiàn)了對 WebGL 的支持,但要直接使用 WebGL 相關(guān)接口進(jìn)行開發(fā),則需要學(xué)習(xí)復(fù)雜的著色器語言,且開發(fā)周期長,不利于項(xiàng)目的快速開發(fā)。
面對這種情況,Three.js 應(yīng)運(yùn)而生,它不但對 WebGL 進(jìn)行了封裝,將復(fù)雜的接口簡單化,而且基于面向?qū)ο笏季S,將數(shù)據(jù)結(jié)構(gòu)對象化,非常方便我們開發(fā)。Three.js 的發(fā)展十分迅速,然而配套的學(xué)習(xí)材料卻比較匱乏,于是便有了當(dāng)前的這個(gè)課程。
本課程作為入門課程,不會深入做源碼解析,主要協(xié)助初學(xué)者了解 Three.js 的數(shù)據(jù)結(jié)構(gòu),基礎(chǔ) API 以及相關(guān)輔助插件的使用。幫助初學(xué)者達(dá)到快速入門的目的。
本課程共包含四大部分。
第一部分(第01-02課),入門前概述,帶你初步認(rèn)識 Three.js、框架選擇標(biāo)準(zhǔn)、開發(fā)工具,源碼獲取,實(shí)現(xiàn)一個(gè)“Hello World”輔助工具。
第二部分(第03-08課),基礎(chǔ)功能篇,主要包括 Object3D、Scene、Mesh、Group、Geometry、Materials、Lights、Cameras、粒子等相關(guān)功能的介紹。
第三部分(第09-15課),進(jìn)階篇,主要包括 Controls、Loaders、Animation、Tween、核心對象,與場景之間的交互以及性能優(yōu)化介紹。
第四部分(第16課),實(shí)戰(zhàn)篇,帶大家利用所學(xué)知識實(shí)現(xiàn)一個(gè) 3D 小案例。
鄭世強(qiáng),現(xiàn)就職于上海某網(wǎng)絡(luò)公司擔(dān)任前端工程師,CSDN 博客作者,長期活躍于各大論壇,擅長前端開發(fā)、WEBGL 開發(fā)。
WebGL(Web 圖形庫)是一種 JavaScript API,用于在任何兼容的 Web 瀏覽器中呈現(xiàn)交互式 3D 和 2D 圖形,而無需使用插件。WebGL 通過引入一個(gè)與 OpenGL ES 2.0 緊密相符合的 API,可以在 HTML5 <canvas> 元素中使用(簡介引自 MDN)。
以我的理解,WebGL 給我們提供了一系列的圖形接口,能夠讓我們通過 JavaScript 去使用 GPU 來進(jìn)行瀏覽器圖形渲染的工具。
Three.js 是一款 webGL 框架,由于其易用性被廣泛應(yīng)用。Three.js 在 WebGL 的 API 接口基礎(chǔ)上,又進(jìn)行的一層封裝。它是由居住在西班牙巴塞羅那的程序員 Ricardo Cabbello Miguel 所開發(fā),他更為人知的網(wǎng)名是 Mr.doob。
Three.js 以簡單、直觀的方式封裝了 3D 圖形編程中常用的對象。Three.js 在開發(fā)中使用了很多圖形引擎的高級技巧,極大地提高了性能。另外,由于內(nèi)置了很多常用對象和極易上手的工具,Three.js 的功能也非常強(qiáng)大。最后,Three.js 還是完全開源的,你可以在 GitHub 上找到它的源代碼,并且有很多人貢獻(xiàn)代碼,幫助 Mr.doob 一起維護(hù)這個(gè)框架。
WebGL 原生 API 是一種非常低級的接口,而且還需要一些數(shù)學(xué)和圖形學(xué)的相關(guān)技術(shù)。對于沒有相關(guān)基礎(chǔ)的人來說,入門真的很難,Three.js 將入門的門檻降低了一大截,對 WebGL 進(jìn)行封裝,簡化我們創(chuàng)建三維動畫場景的過程。只要你有一定的 JavaScript 基礎(chǔ),有一定的前端經(jīng)驗(yàn),我堅(jiān)信,用不了多長時(shí)間,三維制作會變得很簡單。
用最簡單的一句話概括:WebGL 和 Three.js 的關(guān)系,相當(dāng)于 JavaScript 和 jQuery 的關(guān)系。
Three.js 作為 WebGL 框架中的佼佼者,由于它的易用性和擴(kuò)展性,使得它能夠滿足大部分的開發(fā)需求,Three.js 的具體功能如下:
Three.js 掩蓋了 3D 渲染的細(xì)節(jié):Three.js 將 WebGL 原生 API 的細(xì)節(jié)抽象化,將 3D 場景拆解為網(wǎng)格、材質(zhì)和光源(即它內(nèi)置了圖形編程常用的一些對象種類)。
面向?qū)ο螅洪_發(fā)者可以使用上層的 JavaScript 對象,而不是僅僅調(diào)用 JavaScript 函數(shù)。
功能非常豐富:Three.js 除封裝了 WebGL 原始 API 之外,Three.js 還包含了許多實(shí)用的內(nèi)置對象,可以方便地應(yīng)用于游戲開發(fā)、動畫制作、幻燈片制作、髙分辨率模型和一些特殊的視覺效果制作。
速度很快:Three.js 采用了 3D 圖形最佳實(shí)踐來保證在不失可用性的前提下,保持極高的性能。
支持交互:WebGL 本身并不提供拾?。≒icking)功能(即是否知道鼠標(biāo)正處于某個(gè)物體上)。而 Three.js 則固化了拾取支持,這就使得你可以輕松為你的應(yīng)用添加交互功能。
包含數(shù)學(xué)庫:Three.js 擁有一個(gè)強(qiáng)大易用的數(shù)學(xué)庫,你可以在其中進(jìn)行矩陣、投影和矢量運(yùn)算。
內(nèi)置文件格式支持:你可以使用流行的 3D 建模軟件導(dǎo)出文本格式的文件,然后使用 Three.js 加載,也可以使用 Three.js 自己的 JSON 格式或二進(jìn)制格式。
擴(kuò)展性很強(qiáng):為 Three.js 添加新的特性或進(jìn)行自定義優(yōu)化是很容易的事情。如果你需要某個(gè)特殊的數(shù)據(jù)結(jié)構(gòu),那么只需要封裝到 Three.js 即可。
支持HTML5 Canvas:Three.js 不但支持 WebGL,而且還支持使用 Canvas2D、Css3D 和 SVG 進(jìn)行渲染。在未兼容 WebGL 的環(huán)境中可以回退到其它的解決方案。
雖然 Three.js 的優(yōu)勢很大,但是它也有它的不足之處:
官網(wǎng)文檔非常粗糙,對于新手極度不友好。
國內(nèi)的相關(guān)資源匱乏。
Three.js 所有的資料都是以英文格式存在,對國內(nèi)的朋友來說又提高了門檻。
Three.js 不是游戲引擎,一些游戲相關(guān)的功能沒有封裝在里面,如果需要相關(guān)的功能需要進(jìn)行二次開發(fā)。
隨著 WebGL 的迅速發(fā)展,相關(guān)的 WebGL 庫也豐富起來,接下來介紹幾個(gè)比較火的 WebGL 庫。
Babylon.JS 是最好的 JavaScript 3D 游戲引擎,它能創(chuàng)建專業(yè)級三維游戲。主要以游戲開發(fā)和易用性為主。與 Three.js 之間的對比:
Three.js 比較全面,而 Babylon.js 專注于游戲方面。
Babylon.js 提供了對碰撞檢測、場景重力、面向游戲的照相機(jī),Three.js 本身不自帶,需要依靠引入插件實(shí)現(xiàn)。
對于 WebGL 的封裝,雙方做得各有千秋,Three.js 淺一些,好處是易于擴(kuò)展,易于向更底層學(xué)習(xí);Babylon.js 深一些,好處是易用擴(kuò)展難度大一些。
Three.js 的發(fā)展依靠社區(qū)推動,出來的比較早,發(fā)展比較成熟,Babylon.js 由微軟公司在2013推出,文檔和社區(qū)都比較健全,國內(nèi)還不怎么火。
PlayCanvas 是一個(gè)基于 WebGL 游戲引擎的企業(yè)級開源 JavaScript 框架,它有許多的開發(fā)工具能幫你快速創(chuàng)建 3D 游戲。與 Three.js 之間的對比:
PlayCanvas 的優(yōu)勢在于它有云端的在線可視化編輯工具。
PlayCanvas 的擴(kuò)展性不如 Three.js。
最主要是 PlayCanvas 不完全開源,還商業(yè)付費(fèi)。
Cesium 是國外一個(gè)基于 JavaScript 編寫的使用 WebGL 的地圖引擎,支持 3D、2D、2.5D 形式的地圖展示,可以自行繪制圖形,高亮區(qū)域。與 Three.js 對比:
Cesium 是一個(gè)地圖引擎,專注于 Gis,相關(guān)項(xiàng)目推薦使用它,其它項(xiàng)目還是算了。
至于庫的擴(kuò)展,其它的配套插件,以及周邊的資源都不及Three.js。
通過以上信息我們發(fā)現(xiàn),Three.js 在其庫的擴(kuò)展性,易用性以及功能方面有很好的優(yōu)勢。學(xué)習(xí) Three.js 入門 3D 開發(fā)不但門檻低,而且學(xué)習(xí)曲線不會太陡,即使以后轉(zhuǎn)向 WebGL 原生開發(fā),也能通過 Three.js 學(xué)習(xí)到很多有用的知識。
現(xiàn)在最火的微信小游戲跳一跳也是在 Three.js 的基礎(chǔ)上開發(fā)出來的。所以,Three.js 是我們必須要學(xué)的 WebGL 框架。
Three.js 可以使用 WebGL 在所有現(xiàn)代瀏覽器上渲染場景。對于舊版瀏覽器,尤其是 Internet Explorer 10 及更低版本,您可能需要回退到其他渲染器(CSS2DRenderer、CSS3DRenderer、SVGRenderer、CanvasRenderer)。
注意:如果您不需要支持這些舊版瀏覽器,則不推薦使用其他渲染器,因?yàn)樗鼈兯俣容^慢并且支持的功能比 WebGLRenderer 更少。
即可下載當(dāng)前版本的代碼及相關(guān)案例,文件下載解壓后是這樣的:
其中相關(guān)文件夾的內(nèi)容是:
build:里面含有 Three.js 構(gòu)建出來的 JavaScript 文件,可以直接引入使用,并有壓縮版;
docs:Three.js 的官方文檔;
editor:Three.js 的一個(gè)網(wǎng)頁版的模型編輯器;
examples:Three.js 的官方案例,如果全都學(xué)會,必將成為大神;
src:這里面放置的全是編譯 Three.js 的源文件;
test:一些官方測試代碼,我們一般用不到;
utils:一些相關(guān)插件;
其他:開發(fā)環(huán)境搭建、開發(fā)所需要的文件,如果不對 Three.js 進(jìn)行二次開發(fā),用不到。
還有第三種,就是直接去 GitHub 上下載源碼,和在官網(wǎng)上下載的代碼一樣。
<!DOCTYPE html><html><head> <meta charset=utf-8> <title>我的第一個(gè)Three.js案例</title> <style> body { margin: 0; } canvas { width: 100%; height: 100%; display: block; } </style></head><body onload="init()"><script src="https://cdn.bootcss.com/three.js/92/three.js"></script><script> //聲明一些全局變量 var renderer, camera, scene, geometry, material, mesh; //初始化渲染器 function initRenderer() { renderer = new THREE.WebGLRenderer(); //實(shí)例化渲染器 renderer.setSize(window.innerWidth, window.innerHeight); //設(shè)置寬和高 document.body.appendChild(renderer.domElement); //添加到dom } //初始化場景 function initScene() { scene = new THREE.Scene(); //實(shí)例化場景 } //初始化相機(jī) function initCamera() { camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200); //實(shí)例化相機(jī) camera.position.set(0, 0, 15); } //創(chuàng)建模型 function initMesh() { geometry = new THREE.BoxGeometry( 2, 2, 2 ); //創(chuàng)建幾何體 material = new THREE.MeshNormalMaterial(); //創(chuàng)建材質(zhì) mesh = new THREE.Mesh( geometry, material ); //創(chuàng)建網(wǎng)格 scene.add( mesh ); //將網(wǎng)格添加到場景 } //運(yùn)行動畫 function animate() { requestAnimationFrame(animate); //循環(huán)調(diào)用函數(shù) mesh.rotation.x += 0.01; //每幀網(wǎng)格模型的沿x軸旋轉(zhuǎn)0.01弧度 mesh.rotation.y += 0.02; //每幀網(wǎng)格模型的沿y軸旋轉(zhuǎn)0.02弧度 renderer.render( scene, camera ); //渲染界面 } //初始化函數(shù),頁面加載完成是調(diào)用 function init() { initRenderer(); initScene(); initCamera(); initMesh(); animate(); }</script></body></html>
請將上面的代碼復(fù)制到 HTML 文件中,然后使用瀏覽器打開,我們就會發(fā)現(xiàn)下面的效果:
————————————————
版權(quán)聲明:本文為CSDN博主「GitChat的博客」的原創(chuàng)文章,遵循CC 4.0 BY-SA版權(quán)協(xié)議,轉(zhuǎn)載請附上原文出處鏈接及本聲明。
原文鏈接:https://blog.csdn.net/valada/java/article/details/80871701
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.miumiuwan.com