Three.js快速入門教程

1、Three.js 快速入門教程引言本文主要是講解 Three.js 的相關概念，幫助讀者對 Three.js 以及相關知識形成比較完整的理解。近年來 web 得到了快速的發(fā)展。隨著 HTML5 的普及，網(wǎng)頁 的表現(xiàn)能力越來越強大。網(wǎng)頁上已經(jīng)可以做出很多復雜的動 畫，精美的效果。但是，人總是貪的。那么，在此之上還能做什么呢？其中一 種就是通過 WebGL 在網(wǎng)頁中繪制高性能的 3D 圖形。 OpenGL,WebGL 到 Three.jsOpenGL 大概許多人都有所耳聞，它是最常用的跨平臺圖形 庫。WebGL 是基于 OpenGL 設計的面向 web 的圖形標準，提供 了一系列 JavaScri

2、pt API ，通過這些 API 進行圖形渲染將得以 利用圖形硬件從而獲得較高性能。而Three.js是通過對 WebGL接口的封裝與簡化而形成的一個 易用的圖形庫。簡單點的說法： WebGL 可以看成是瀏覽器給我們提供的接口，在 javascript 中可以直接用這些 API 進行 3D 圖形的繪制； 而 Three.js 就是在這些接口上又幫我們封裝得更好用一些。 WebGL 與 Three.js 對比既然有了 WebGL ，我們?yōu)槭裁催€需要 Three.js？這是因為 WebGL 門檻相對較高， 需要相對較多的數(shù)學知識。 雖然 WebGL 提供的是面向前端的 API ，但本質(zhì)上 WebG

3、L 跟 前端開發(fā)完全是兩個不同的方向，知識的重疊很少。相關性 只是他們都在 web 平臺上，都是用 javascript 而已。一個前 端程序員或許還熟悉解析幾何，但是還熟悉線性代數(shù)的應該 寥寥無幾了（比如求個逆轉(zhuǎn)置矩陣試試？） ，更何況使用中 強調(diào)矩陣運算中的物理意義，這在教學中也是比較缺失的。因此， 前端工程師想要短時間上手 WebGL 還是挺有難度的。于是， Three.js 對 WebGL 提供的接口進行了非常好的封裝， 簡化了很多細節(jié)，大大降低了學習成本。并且，幾乎沒有損 失 WebGL 的靈活性。因此，從 Three.js 入手是值得推薦的，這可以讓你在較短的 學習后就能面對大部分

4、需求場景。Three.js 的學習問題Three.js 的入門是相對簡單的，但是當我們真的去學的時候， 會發(fā)現(xiàn)一個很尷尬的問題：相關的學習資料很少。通常這種流行的庫都有很完善的文檔，很多時候跟著官方的 文檔或官方的入門教程學習就是最好的路線。但 Three 不是 的，它的文檔對初學者來說太過簡明扼要。不過官方提供了非常豐富的 examples,幾乎所有你需要的用 法都在某個 example 中有所體現(xiàn)。但這些 example 不太適合 用來入門，倒是適合入門之后的進一步學習。這里推薦一些相對較好的教程：Three.js 入門指南這是一份很好的 Three.js 輕量級入門教程，作者文筆很好，

5、基礎知識講解得簡明易懂。Three.js 開發(fā)指南 （第一版中文版 ）Learning Three.js- Second EditionLearning Three.js:The JavaScript 3D Library for WebGL 是現(xiàn) 在不多的也是最好的 Three.js 入門書，比較全面地講解了 Three.js 的各種功能。如果有能力的話，建議閱讀英文版第二版，出版于2015 年， 與現(xiàn)在的 Three.js 區(qū)別很小 中文版翻譯自出版于 2012 年的原書第一版，大部分概念是 適用的，但很多細節(jié)已經(jīng)有所改變。Three.js 入門教程這是對國外一份教程的翻譯，一共六篇文章。

6、講解不多，更 多的是展示各個基本功能怎么用。更適合有一些圖形基礎的 同學。當然，實際的學習過程中這些資料肯定是不太夠的，遇到問 題還是要自己去查資料。不過這里要提醒一下， Three.js 的 更新是相當頻繁的， 現(xiàn)在是 r80 版本，自 2010 年 4 月發(fā)布 r1 以來，這已經(jīng)是第 72 個版本了 （中間有的版本號跳過了 ）。因 此，在網(wǎng)上找到的資料有些可能是不適合當前版本的，需要 注意甄別 （前面推薦的資料也都或多或少存在這樣的問題）。Three.js 中的一些概念要在屏幕上展示 3D 圖形，思路大體上都是這樣的： 構建一個三維空間Three中稱之為場景(Scene)選擇一個觀察點，并

7、確定觀察方向/角度等Three中稱之為相機(Camera)在場景中添加供觀察的物體Three 中的物體有很多種，包括 Mesh,Line,Points 等，它們都 繼承自 Object3D 類將觀察到的場景渲染到屏幕上的指定區(qū) 域Three中使用Renderer完成這一工作 下面來具體看一看 Three 中的這些概念。Scene場景是所有物體的容器，也對應著我們創(chuàng)建的三維世界。Camera 坐標系Camera是三維世界中的觀察者，為了觀察這個世界，首先我們要描述空間中的位置。Three中使用采用常見的右手坐標系定位。三維投影Three 中的相機有兩種，分別是正投影相機THREE.Orthogr

8、aphicCamera 和透視投影相機THREE.PerspectiveCamera。正交投影與透視投影的區(qū)別如上圖所示，左圖是正交投影，物體發(fā)出的光平行地投射到屏幕上，遠近的方塊都是一樣大的；右圖是透視投影，近大遠 小，符合我們平時看東西的感覺。維基百科：三維投影正交投影相機注：圖中的”視點”對應著 Three 中的 Camera。這里補充一個視景體的概念：視景體是一個幾何體，只有視 景體內(nèi)的物體才會被我們看到，視景體之外的物體將被裁剪 掉。這是為了去除不必要的運算。正交投影相機的視景體是一個長方體， OrthographicCamera 的構造函數(shù)是這樣的： OrthographicCam

9、era( left, right, top, bottom, near, far )Camera 本身可以看作是一個點， left 則表示左平面在左右方 向上與 Camera 的距離。另外幾個參數(shù)同理。于是六個參數(shù) 分別定義了視景體六個面的位置?？梢越频卣J為，視景體里的物體平行投影到近平面上，然 后近平面上的圖像被渲染到屏幕上。透視投影相機透視投影相機的視景體是個四棱臺，它的構造函數(shù)是這樣的： PerspectiveCamera( fov, aspect, near, far ) fov 對應著圖中的視角， 是上下兩面的夾角。 aspect 是近平面 的寬高比。在加上近平面距離 near,遠

10、平面距離far,就可以 唯一確定這個視景體了。透視投影相機很符合我們通常的看東西的感覺，因此大多數(shù) 情況下我們都是用透視投影相機展示 3D 效果。Objects 有了相機，總要看點什么吧？在場景中添加一些物體吧。Three 中供顯示的物體有很多，它們都繼承自 Object3D 類， 這里我們主要看一下 Mesh 和 Points 兩種。Mesh 我們都知道，計算機的世界里，一條弧線是由有限個點構成 的有限條線段連接得到的。線段很多時，看起來就是一條平 滑的弧線了。計算機中的三維模型也是類似的，普遍的做法是用三角形組 成的網(wǎng)格來描述，我們把這種模型稱之為 Mesh 模型。 這是那只著名的斯坦福兔

11、子。它在 3D 圖形中的地位與數(shù)字 圖像處理領域中著名的 lena 是類似的。看這只兔子，隨著三角形數(shù)量的增加，它的表面越來越平滑 /準確。在 Three 中， Mesh 的構造函數(shù)是這樣的： Mesh（ geometry, material ）geometry 是它的形狀， material 是它的材質(zhì)。不止是 Mesh ，創(chuàng)建很多物體都要用到這兩個屬性。下面我 們來看看這兩個重要的屬性。GeometryGeometry，形狀，相當直觀。Geometry通過存儲模型用到的 點集和點間關系 （哪些點構成一個三角形 ）來達到描述物體形 狀的目的。Three 提供了立方體 （其實是長方體 ） 、平

12、面 （其實是長方形 ）、 球體、圓形、圓柱、圓臺等許多基本形狀；你也可以通過自己定義每個點的位置來構造形狀；對于比較復雜的形狀，我們還可以通過外部的模型文件導 入。MaterialMaterial ，材質(zhì)，這就沒有形狀那么直觀了。材質(zhì)其實是物體表面除了形狀以為所有可視屬性的集合，例 如色彩、紋理、光滑度、透明度、反射率、折射率、發(fā)光度。這里講一下材質(zhì)(Material)、貼圖(Map)和紋理(Texture)的關系。材質(zhì)上面已經(jīng)提到了，它包括了貼圖以及其它。貼圖其實是 貼和圖 ，它包括了圖片和圖片應當貼到什么 位置。紋理嘛，其實就是圖 了。Three 提供了多種材質(zhì)可供選擇，能夠自由地選擇漫反

13、射/鏡面反射等材質(zhì)。Points講完了 M esh ，我們來看看另一種 Object Points。Points 其實就是一堆點的集合，它在之前很長時間都被稱為ParticleSystem（粒子系統(tǒng)）,r68 版本時更名為 PointCloud,r72 版本時才更名為 Points。更名主要是因為，Mr.doob認為，粒 子系統(tǒng)應當是包括粒子和相關的物理特性的處理的一套完 整體系，而Three中的Points簡單得多。因此最終這個類被 命名為 Points。Points 能夠用來實現(xiàn)的典型效果是這樣的：官方 exampleLight神說：要有光！光影效果是讓畫面豐富的重要因素。Three 提供了包括環(huán)境光 AmbientLight 、點光源 PointLight 、 聚光燈 SpotLight 、方向光 DirectionalLight 、半球光 HemisphereLight 等多種光源。只要在場景中添加需要的光源就好了。Renderer 在場景中建立了各種物體， 也有了光， 還有觀察物體的相機， 是時候把看到的東西渲染到屏幕上了。這就是Render做的事情了。Renderer綁定一個canvas對象，并可以設置大小，默認背景 顏色等屬性。調(diào)用 Renderer的render函數(shù)，傳入 scene和 camera, 就可以 把圖像渲染到canvas中了