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.wnxcall.com