👋 和我一起學 Three.js【初級篇】：0. 總論
本篇文章將向您介紹了《和我一起學 Three.js 【初級篇】》這個系列的規劃，當前的狀態和所包含的內容。并向您解釋了 Three.js 是什么以及為什么 Three.js 技術值得學習。
??【2023.02.20 更新】《和我一起學 Three.js 【初級篇】》是我 2023 年開啟的一個新企劃，目的是向讀者系統的，自頂向下地介紹 Three.js 技術，幫助讀者學習打造 Web 3D 世界的關鍵技術。本系列文章計劃以每周一篇文章的頻率更新，包含 6 篇無條件閱讀文章與 3 篇條件解鎖文章，共 9 篇文章。
??【2023.03.28 更新】我已于 2023 年 3 月 27 日按計劃更新完《和我一起學 Three.js 【初級篇】》系列的全部 6 篇無條件閱讀文章（您可以在下方合集目錄中系統的閱讀）！這 6 篇文章講解了 Three.js 的應用場景，通過 Three.js 打造 3D 場景的通用方案以及 Three.js 的一些核心基礎概念。平均每篇文章約 5000 字，并包含大量示例插圖，力求使您能夠充分理解 Three.js 技術并快速上手 。
我在此誠邀各位讀者閱讀，并就文章內容提出意見或建議。如果您覺得學有所獲，也希望您可以推薦給更多人觀看。
最后，感謝各位讀者一直以來對本專欄的關注，點贊，留言和支持。期待未來與各位再會！
??【2023.04.19 更新】時間過的真快，《和我一起學 Three.js 【初級篇】》計劃更新的 9 篇文章今天已經全部撰寫完成并發布了，非常感謝讀者朋友們長期以來的支持與陪伴！在這個過程中我自覺也有了相當大的成長，未來，我還會不定期打磨，修正已發布的文章內容，確保其時效性和有效性，也歡迎各位讀者朋友們能?；貋砜纯?，祝各位學習愉快！
?? 本篇文章共 5122 字，最近更新于 2023 年 04 月 19 日。
0. 系列文章合集
本系列第 6，7，8 章節支持在我的個人公眾號「前端亂步」內付費觀看，將在全平臺文章「點贊數」+「評論數」 >= 500（第 6 章）, 1000（第 7，8 章） 時分別解鎖發布。
- ?? 您當前在這里 《和我一起學 Three.js【初級篇】：0. 總論》
- 《和我一起學 Three.js【初級篇】：1. 搭建 3D 場景》
- 《和我一起學 Three.js【初級篇】：2. 掌握幾何體》
- 《和我一起學 Three.js【初級篇】：3. 掌握攝影機》
- 《和我一起學 Three.js【初級篇】：4. 掌握紋理》
- 《和我一起學 Three.js【初級篇】：5. 掌握材質》
- 《和我一起學 Three.js【初級篇】：6. 掌握光照》
- 《和我一起學 Three.js【初級篇】：7. 掌握陰影》
- 《和我一起學 Three.js【初級篇】：8. 融會貫通》
1. 什么是 Three.js
什么是 Three.js？根據 Three.js 官網的介紹：
Three.js 是一個基于 WebGL 的 3D JavaScript 開源庫（遵循 MIT 協議），它使 JavaScript 開發者能夠更方便地在 Web 應用中創建 3D 場景。
這段話清楚地描述了 Three.js 的下述特征：
- 基于 WebGL：WebGL 是一種 3D 繪圖協議。對于開發者而言，它是一種基于 OpenGL（Open Graphics Library） 的 Web API，負責驅使 GPU 繪制點，創建三角形并涂色；
- 3D JavaScript 開源庫：Three.js 基于非常寬松的 MIT 協議，這意味著您可以自由使用，修改 Three.js 代碼創建商業應用；
- 更方便地：就像 jQuery 基于 JavaScript 提供了更友好地 API 使開發者能夠輕松地操作 DOM 一樣，Three.js 也封裝出更友好地 API 供開發者繪制 3D 場景，相較于使用 WebGL，使用 Three.js 繪制 3D 場景需要的代碼量要少的多得多。
- 3D 場景：它包含：
- 3D 游戲；
- 建筑設計和數據可視化看板；
- AR，VR；
- 虛擬展廳，虛擬商品展示；
- 交互式展覽，培訓;
- ...
Three.js 官網首頁陳列了非常多的 3D 場景示例，這些示例無一不證明著 Web 3D 世界的魅力和 Three.js 的強大。
?? 2023 年 4 月 6 日，Chrome 團隊宣布，將在 Chrome 113 中默認支持 WebGPU，WebGPU 是一套為瀏覽器設計的圖形 API 標準，可以充分釋放現代 GPU 的強大能力，可用于在 Web 上進行高性能 3D 圖形和數據并行計算。而 Three.js 也正在底層添加對 WebGPU 支持，因此，未來您使用 Three.js 創建的 3D 應用將在現代瀏覽器上有更卓越的性能！
2. 為什么要學習 Three.js？
在了解 Three.js 是什么后，若選擇繼續學習，想必您有自己的理由。對我而言，我認為能夠在瀏覽器中呈現 3D 場景是一件非常迷人的事情，它能夠使網站的每個用戶低成本地獲得一種更沉浸的視聽體驗，并享受由開發者賦予的趣味和驚奇。
而 Three.js 則為開發者大大降低了打造這種場景的門檻，無論是現代 WebGPU 的發展還是 XR 技術在瀏覽器的應用，我們都很容易想到 Web 3D 世界有更多的可能性和更廣闊的未來。
無論您的學習動機如何，我都想要邀請您和我一起持續探索 Web 3D 世界。通過本系列文章，我有信心帶您一起昂首闊步地踏入 Web 3D 世界的大門！
3. 需要學習哪些內容？
在 Three.js 的官方教程中，您可以看到一個簡單的 Three.js 應用包含了哪些模塊：
可以看到，圖中包含了以下模塊，這可能會讓初來乍到的您一時感到不知所措：
- 渲染器（Renderer）；
- 場景（Scene）；
- 攝影機（Camera）；
- 網格物（Mesh）；
- 3D 對象（Object3D）；
- 燈光（Light）；
- 幾何體（Geometry）；
- 材質（Material）；
- 紋理（Texture）；
但是請別擔心，通過閱讀本系列文章，您將能夠循序漸進地掌握以上所有的概念，并搞懂它們之間的關系。在往后的篇幅中，我將一一介紹這些名詞所對應的概念并詳細地介紹它們對于構建 Web 3D 場景的意義，您將學會如何如何正確地使用這些模塊搭建驚奇有趣的 Web 3D 場景。
?? 一些文章傾向于介紹某種具體的 3D 場景如何實現，跟著動手實踐實現一樣的效果往往會令人頗具成就感。但本系列文章意不在此，我傾向于采用一種「自頂向下」的方法，先讓您充分理解 Web 3D 世界的每個關鍵構成要素，并了解它們的使用時機和關系，然后您便能通過自由組合這些要素，搭建任意您感興趣的 3D 場景。沒錯，我認為授人以魚不如授人以漁。
在未來，我可能也會發布一系列【實踐篇】的文章，啟發您靈活應用在本篇學到的種種知識和技巧，幫助您創建更新奇有趣的 3D 世界。
下面我將向您介紹本系列 9 篇文章的主題和簡要內容：
3.1 《0. 總論》
本篇文章將向您介紹《和我一起學 Three.js 【初級篇】》這個系列所包含的內容并向您解釋 Three.js 是什么以及我認為為什么 Three.js 技術值得學習。
文章還使用大量篇幅幫助您打開學習 Three.js 的「戰爭迷霧」，好方便您了解在這趟旅途中您會走何路線，旅途中又會經歷哪些站點。在旅程的最后，我們會通過一個我精心設計地實用 3D 場景來實踐和驗證我們一路所學。希望屆時您將覺得不虛此行！
3.2 《1. 搭建 3D 場景》
本篇文章將向您介紹搭建 Web 3D 場景的所有必備構建（包含場景，物體與動畫），他們之間的關系以及如何組合它們生成一個基本的的 3D 場景。完成本章節的內容意味著您正式步入 Web 3D 世界的大門，希望您做好了冒險的準備。
在本章結束時，我們將在瀏覽器中生成一個旋轉的立方體，這將是我們正式邁入 Web 3D 世界的證明：
3.3 《2. 掌握幾何體》
本篇文章將向您介紹構筑 3D 世界的基石：幾何體。我們會向您詳細地介紹 Three.js 提供的豐富的幾何體并將向您介紹如何自定義一個符合您需要的幾何體，在此過程中您將對 GPU 的繪制原理有一定的理解。本章結尾時還會帶領您創建一個現代 Web 開發環境，并向您介紹一個特殊的幾何體：立體字。
終于，我們可以打出學習任何語言的入門咒語：
3.4 《3. 掌握攝影機》
在 3D 世界中，攝影機的種類和位置不僅決定了我們觀察世界的方式，也決定了物體的光影和色彩。在本篇文章中，我將向您介紹 Three.js 中絕大多數常用「攝影機（Camera）」的概念和用法以及如何通過調整攝影機與場景交互，在文章的末尾，我還會向您介紹「控制器（Controls）」對象，您將會發現通過該對象，與場景交互會變得多么輕松容易！
3.5 《4. 掌握紋理》
在本篇文章中，我將向您介紹「紋理（Texture）」這個概念，可能它的另一個名字您更熟悉「貼圖」。我們會一起學習 Three.js 里關于紋理的一切信息，包括紋理的類別，加載，操作方式以及一些性能優化手段。為幾何體添加紋理是創建真實物體的重要手段，在本篇最后，您會和我一起完成一個令人驚艷的魔法球：
3.6 《5.掌握材質》
在本篇文章中，我向您介紹創建 3D 物體的最后一個關鍵概念：「材質（Material）」，在 3D 世界中材質決定了物體的每個可見像素應該如何響應光影，被著色的問題。它和我們上一章介紹的紋理概念密不可分，但并不是所有的材質都依賴光照，在文章中我們會詳細講到這一點。
通過掌握物體材質的設置方法，我們會將上一章創建的 3D 魔法球進一步優化，使其更加逼真！
3.7 《6. 掌握光照》
?? 為了方便您更好的學習，我為本篇文章準備了一份示例代碼，您可以在閱讀過程中和我一起動手實踐，還可以通過切換分支，看到本份代碼的「最終形態」與您本地代碼進行對比，希望對您有所幫助，祝您學習愉快！
通過掌握「紋理」和「材質」，您能將您抽象的幾何體具象化為具體的，我們所熟悉的對象。但是要讓這些對象更加符合人的認知，更加「真實」和「立體」，實際上需要模擬現實的光照環境以及物體對光線的反應，這是本章將要討論的主題。
在本篇文章中，我們將一起了解了什么是「光照（Lights）」，以及 Three.js 提供的所有 6 個光照 API 的意義，使用方法并觀察其效果。在文章的最后，我們還了解了不同 API 的性能損耗，這將有助于我們思考如何構建高性能的大型 3D 場景。
下面是本節結束時完成的一個示例：
3.8 《7. 掌握陰影》
?? 為了方便您更好的學習，我為本篇文章準備了一份示例代碼，您可以在閱讀過程中和我一起動手實踐，還可以通過切換分支，看到本份代碼的「最終形態」與您本地代碼進行對比，希望對您有所幫助，祝您學習愉快！
物體對光照的反應表現為物體的「陰影」和「投影」，Three.js 提供了簡單但并不完美的方法讓開發者能夠讓物體的陰影和投影盡可能貼近現實，本章中我們將深入了解其中的內容。
在本篇文章中，我將向您詳細地介紹如何使用 Three.js 為 3D 場景中的物體添加陰影并介紹陰影渲染的原理。我還將和您一起逐步改善陰影渲染的效果，并通過切換陰影貼圖算法權衡性能與渲染效果，在本章末尾，我們將共同完成下面的示例，并徹底了解其中的原理：
3.9 《8. 融會貫通》
?? 為了方便您更好的學習，我為本篇文章準備了一份示例代碼，您可以在閱讀過程中和我一起動手實踐，還可以通過切換分支，看到本份代碼的「最終形態」與您本地代碼進行對比，希望對您有所幫助，祝您學習愉快！
來到此章意味著您已經和我一起學習完了所有 Three.js 的核心概念，正式踏入了 Web 3D 世界的大門，恭喜您！
在本篇文章中，我們將通過一個真實的項目動手實踐之前所學到的種種 Three.js 關鍵概念，我們還將學習到「如何進行需求分析」與基于需求分析的「技術架構」等工業級項目開發技巧，最后，我們還通過項目源碼分析介紹了一系列非常實用的，生產高質量 Web 3D 場景的技術。
在本篇文章最后，您將有能力和我一起完成這樣一個「太空艙房間」示例。當然，我相信您還可以做的更多！
以上，是《和我一起學 Three.js 【初級篇】》這一系列文章所包含的內容，截止 2023 年 4 月 19 日，所有的內容都更新完畢，并且會在未來不定期優化，期待您的長期關注。
您可能會好奇標題中【初級篇】意有所指，沒錯，無論是對于 Web 3D 世界還是 Three.js 而言，掌握初級篇的內容僅僅算是入門，如果您選擇繼續探索，前方還為您保留了更廣闊的天地，例如：
- 粒子效果；
- 著色器;
- 性能優化；
- React Three Fiber；
- 圖形學;
- ...
不過這些都是后話了，萬丈高樓平地起，請先隨我一同完成本階段的學習，這將是一段漫長的旅程，希望您旅途愉快 。
4. 適合誰學習，以及如何學習
想要通過本系列文章入門 Three.js 技術，您需要確保您熟悉基本的 JavaScript 語法，如果您之前沒有 Web 開發相關經驗，那么可能您會覺得最后一章的內容頗具挑戰。但是其他章節基本不受影響。
本系列的每篇文章，一般會包含「基礎概念講解」和「代碼示例」兩個部分。對于部分文章，會提供初始代碼倉庫幫助您更快上手?！讣埳系脕斫K覺淺」，希望您不只是「閱讀」，還能夠積極地動手實踐。
一些文章設計的思考題有助于您更好的理解本章節的內容并探索更多未知概念，希望您務必不要錯過。
5. 如何檢驗學習成果？
如何檢驗您是否真正掌握了 Three.js 的通用技術呢？「行勝于言」，最好的辦法莫過于親自動手創建一個迷人的 3D 場景，這正是我們在最后一章要做的事！
如果您能夠出色的完成最后一章的任務，并汲取示例代碼的精華，您將完全有理由向他人證明您已經成為一名合格的 Web 3D 開發者！
為了能夠讓您真正的將之前所學「融會貫通」，我花費了不少功夫選擇最后一章的示例，該篇內容充分包含了之前所學的所有知識和技巧，并且是「0 添加」任何新的復雜概念，這將非常有助于您充分理解，掌握先前所學。本篇文章的內容和代碼也同樣經過精心編排，希望您能滿意。
下面是您將要實現的 3D 場景，以及一段虛構的需求說明：
「太空艙房間」是一個用來展示 X-11 號太空艙房間的 3D 場景，我們需要通過該場景向他人說明我們的太空艙房間是什么樣的。
我們需要拆除房間的上，右，前側墻壁，展示房間內的陳設和布局，房間內后側墻壁有一個通風管道和一個緊急報警燈，左側有一個通向異世界的傳送門，傳送門會隨時間流逝散發不同的色彩。房間內布置有一個操作臺和一把椅子，操作臺放映當下最流行的技術教程。房間角落里有兩個日常物資箱和一個儲物柜。記住，3D 場景應該允許用戶隨意拖拽調整觀看角度或放大縮小。
PS：我們對程序的完美性要求非常高，如果任何資源加載失敗，不要向用戶展示房間！
PS：X-11 號太空艙上沒有床，因為人們不需要睡眠！
但愿您覺得有趣，也希望您能堅持看到這里。
5.1 ?? 思考題
- 您為什么想要學習 Three.js 技術？
- 您認為 Three.js 技術有哪些可能的使用場景？
歡迎您在評論區與大家交流討論，祝您學習愉快。
6. 總結
本篇文章將向您介紹了《和我一起學 Three.js 【初級篇】》這個系列的規劃，當前的狀態和所包含的內容。并向您解釋了 Three.js 是什么以及為什么 Three.js 技術值得學習。
希望本系列文章能激發您構建 Web 3D 世界的興趣，并對隨后的旅途充滿期待。歡迎關注我的前端公眾號「前端亂步」，讓我們下一篇見 ??。