寫在前面的話，也算是我這些年來Three.js學(xué)習(xí)的一些總結(jié)吧，我學(xué)習(xí)Three.js,前后一共大概2年時(shí)間，當(dāng)然也是斷斷續(xù)續(xù)的，因?yàn)闆]有項(xiàng)目驅(qū)動，學(xué)習(xí)也的知識點(diǎn)很難在一個(gè)項(xiàng)目中串起來，近一年內(nèi)我連續(xù)開發(fā)了幾個(gè)項(xiàng)目，將之前學(xué)的所有知識點(diǎn)串了起來，才真正的做到對Three的融會貫通。

　　之前自學(xué)Three官網(wǎng)的例子，到實(shí)操敲代碼的時(shí)候，真的無從下手，是根本上的兩回事，實(shí)在是看的云里霧里，尤其是場景、攝像機(jī)、render，對于自學(xué)Three.js的我們，那么多的陌生API，入門真的是一臉懵，后來自己利用出差時(shí)間，晚上回去在紙上默寫threejs里面的例子，花了幾個(gè)晚上默寫了好幾頁紙，算是記住了其中的幾個(gè)步驟，至今還記得，但是做不到融匯貫通。

　　后來從同事那索取了一本外文的電子書，里面的案例附有代碼解釋，1、2、3每一步說的很明白，看了這本書的感覺：“原來是這樣的，原來也可以那樣”，然后再回來看three官網(wǎng)里面的代碼，理解就輕松多了，我學(xué)Three.js課程入門就是這本資料《Three.js 小白從入門到實(shí)戰(zhàn)，案例分析與代碼精解》，我覺得這個(gè)更貼切想入門Three.js的同學(xué)。

　　下面是資料的目錄，當(dāng)然是谷歌翻譯把英文翻譯成中文的，個(gè)別詞匯需要我們?nèi)ダ斫猓热纭癟hree.js”翻譯為“三.js”,但是結(jié)合上下文肯定知道其中是“three.js”的意思，現(xiàn)在谷歌翻譯的功能關(guān)閉了，要用微軟的EDG瀏覽器翻譯。

　　需要你沉下心來學(xué)習(xí)，我當(dāng)初逐字逐句去理解，看著書里的章節(jié)對著代碼一行一行去理解，看幾個(gè)案例后，書中的大概意思你能根據(jù)上下文知道其中的意思，學(xué)習(xí)新技術(shù)一定要下決心（我當(dāng)初學(xué)blender建模對著油管視放0.25倍速用電子表格記錄作用使用的快捷鍵（快逐幀觀看了），我當(dāng)時(shí)就心里暗暗下決心，我TM一定要學(xué)會建模，每天晚上10點(diǎn)到凌晨1點(diǎn)（小孩睡著了我才能安靜的學(xué)）一共花了15個(gè)晚上學(xué)完建模）,當(dāng)然你現(xiàn)在學(xué)，不僅能有漢化電子書，隨書代碼，還可以加我的微信，其中遇到難點(diǎn)我基本都可以為你解決，縮短你的學(xué)習(xí)周期和難度，最重要的是幫助你理解知識點(diǎn)。

案例分析與代碼:https://www.cnblogs.com/webmaster01/articles/threejs.html?

------------------------------------------------以下正文--------------------------------------------------------------

一、Three.js案例涵蓋內(nèi)容

1、Three.js場景的構(gòu)成

2、Three.js光源類型

3、Three.js幾何Geometry

4、Three.js材質(zhì)Material

5、Three.js粒子系統(tǒng)Pointcloud

6、Three.js聲音

7、Three.js物理

二、Three.js 能做什么（官網(wǎng)案例）

三、更多其他案例

四、自己實(shí)現(xiàn)這些案例，需要哪些能力？

要想Three.js開發(fā)能力游刃有余，至少的分兩部分，

第一部分是官網(wǎng)代碼應(yīng)用能力，側(cè)類旁通的能力

1、重要：代碼能力是指對threejs的運(yùn)用能力，我覺得僅僅看官網(wǎng)很難快速融會貫通

2、Shader、GLSL（能力要求：不會寫的話，至少也要會抄，會改）

3、webGL底層的學(xué)習(xí)

第二部分是建模能力（非必須）

這個(gè)非必須，但是如果會建模的話，對Three.js的理解會更深刻，尤其是后期操作模型交互時(shí)，知道原理是什么，至少我是這么過來的，建模師建好模型，我根據(jù)需要靈活在模型軟件中進(jìn)行分類、合并、刪除、壓縮、格式轉(zhuǎn)換調(diào)整模型。

五、Three.js技術(shù)點(diǎn)拆解

第一部分：初級

1、入門

介紹了在創(chuàng)建新方法時(shí)可以使用的基本方法?；趖hree.js 的應(yīng)用程序。我們將向您展示如何設(shè)置一個(gè)基本的 Three.js 骨架使用任何可用的 Three.js 渲染器。我們將進(jìn)一步向您展示 WebGL 檢測、加載資源，設(shè)置動畫循環(huán)，添加拖放支持，并控制鍵盤的場景。

2、模型

向您展示了一些專注于創(chuàng)建的案例，使用和操作幾何圖形和網(wǎng)格。我們將詳細(xì)介紹如何以不同方式旋轉(zhuǎn)網(wǎng)格，使用矩陣變換操作它們，生成以編程方式生成幾何圖形，并從 Blender 和其他格式加載模型。

3、相機(jī)

重點(diǎn) 介紹 操作 相機(jī) 的 方法 .在 Three.js 中可用。它向您展示了如何使用透視和正交相機(jī)。本章還向您展示了解釋如何旋轉(zhuǎn)相機(jī)、居中相機(jī)，并跟隨周圍的物體。

4、紋理

包含說明如何獲得良好結(jié)果的方法使用 Three.js 提供的材料。它有關(guān)于透明度、反射、UV貼圖、面部材質(zhì)、凹凸貼圖和法線貼圖，還解釋了各種混合模式工作。

5、燈光

提供了處理Three.js 中的不同光源并向您展示如何使用 WebGL 著色器。表明您如何正確設(shè)置陰影，創(chuàng)建類似太陽的光源，并進(jìn)入聚光燈、點(diǎn)光源和定向光源之間的區(qū)別。

6、粒子系統(tǒng)：點(diǎn)云、精靈

提供了一些秘訣，向您展示如何設(shè)置后處理。通過后處理，您可以通過模糊增強(qiáng)場景，著色或其他類型的效果。本章還包含解釋功能的秘訣粒子系統(tǒng)，例如動畫和粒子材質(zhì)。

第二部分：中級

7、后處理

設(shè)置基本的后處理管道

創(chuàng)建自定義后處理步驟

8、動畫 和 物理

展示動畫 的案例 .場景中的對象并向您展示如何添加物理（例如重力和碰撞）檢測）到您的場景。

9、著色器

如何創(chuàng)建自定義頂點(diǎn)著色器和自定義片段著色器。

創(chuàng)建自定義頂點(diǎn)著色器

創(chuàng)建自定義片段著色器

第三部分：高級——專題部分

11、模型綜合處理

blender建模、導(dǎo)出、glb、模型壓縮，各種格式轉(zhuǎn)換、模型動畫

12、點(diǎn)云綜合處理

Three.js粒子系統(tǒng)、精靈、激光點(diǎn)云轉(zhuǎn)換成粒子系統(tǒng)las、ply、pcd

13、Shader著色器

著色器原理，如何應(yīng)用到案例中，如何讓網(wǎng)上的Shader代碼為我所用，海量shader案例

?