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