「和我一起學 XXX」是我 2023 年的一個新企劃，目的是向讀者（也包括未來的自己）介紹我正在學習的某項新技術，文章會通過長期反復迭代的方式保持其內容的新鮮度，文章有較大內容更新時，會在文章開頭進行更新時間說明（由于時間精力有限，更新的內容只能保障少數幾個平臺的同步，請見諒），
1. 什么是 Three.js
Three.js 是一個基于 WebGL 的 3D JavaScript 開源庫（遵循 MIT 協議），它使 JavaScript 開發者能夠更方便地在 Web 應用中創建 3D 場景，
請注意該定義的如下部分：
- 基于 WebGL：WebGL 是一種 3D 繪圖協議，對于開發者而言，它是一組更底層的繪圖 API，它負責繪制點，線與三角形，使用 WebGL 繪制復雜的 3D 場景，需要非常多的代碼；
- 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 官網發現豐富的案例，它們從不同方面展示了 Three.js 的魅力和強大！
2. （我）為什么要學習 Three.js？
在了解 Three.js 是什么后，若選擇繼續學習，想必您有自己的理由，對于我而言，學習 Three.js 的主要動機是「好玩」（Just for fun!），
我覺得能夠在顯示幕上渲染 3D 場景是件很酷的事情，特別是它還可以通過 VR 頭顯設備讓人們身臨其境體驗到一個由我創造的虛擬世界！
無論您學習的動機是否與我相同，都歡迎您和我一起持續探索 Web 3D 世界，我有信心帶您一起踏入 3D 世界的大門！
3. 需要學習哪些內容？
在 Three.js 的官方檔案中，您可以看到一個簡單的 Three.js 應用包含了哪些模塊：
您可以看到，圖中包含了「渲染器(Renderer)」，「場景(Scene)」，「攝影機(Camera)」，「網狀物(Mesh)」，「3D 物件(Object3D)」，「燈光(Light)」，「幾何體
(Geometry)」，「材質(Material)」和「紋理(Texture)」等元素，如果您從未接觸過 Web 3D 世界，您可能有點摸不著頭腦，
但是別擔心，通過閱讀本系列文章，您將能夠掌握絕對大多數內容，并了解它們之間的關系，在往后的篇幅中，我將一一介紹這些名詞并介紹它們對于構建 Web 3D 場景的意義所在，以及您應該如何正確地使用它們，通過完全掌握這些概念，您應該能夠自己實作任意簡單的 3D 場景，
我發現很多文章專注于介紹某種 3D 場景具體如何搭建，在本系列文章中，我不會這么做，我傾向于采用一種「自頂向下」的方法，讓您理解到 Web 3D 世界的每個構成要素，然后您便能通過自由組合這些要素，搭建任意您感興趣的 3D 場景，
因此接下來，本系列文章將會分為如下幾個部分向您介紹 Three.js 技術的基本元素：
?? 文章具體內容可能會根據實際情況有所增減，
3.1 搭建 Web 3D 場景
本章將介紹搭建 Web 3D 場景的必備要素（包含場景，物體與影片）和基本原理，通過本章的學習，您應該有能力開發出一個基本的 3D 場景，它類似于 Web 3D 世界的 Hello World，標志您正式踏入 Web 3D 世界，
3.2 掌握幾何體
本章將介紹 Three.js 提供的多個幾何體元素以及它們的特性，它們將是未來您構建的各類 3D 場景中的主角，
3.3 掌握攝影機
攝影機的種類和位置不僅決定了我們觀察 3D 世界的方式，也決定了物體的光影和色彩該如何被 GPU 渲染，本章我們將了解 Three.js 提供的攝影機種類以及如何操作它們，
3.4 掌握紋理
本章將介紹「紋理」這個概念，您可以將他理解為「貼圖」，通過恰當地使用紋理，您可以讓您的幾何體成為具象的現實物體，
3.5 掌握材質
本章將介紹「材質」，即討論物體的每個可見像素應該被如何著色的問題，通過掌握物體材質的設定方法，您的 3D 物體將會配合光影產生更加逼真的效果，
?? 3.6 掌握光照（暫定）
通過掌握「紋理」和「材質」，您能將您抽象的幾何體具象化為具體的，我們所熟悉的物件，但是要讓這些物件更加符合人的認知，更加「真實」和「立體」，實際上需要模擬現實的光斬訓境以及物體對光線的反應，這是本章將要討論的主題，
?? 本章內容將根據其他已發布文章的閱讀情況決定是否更新，當前不保證出現在系列中，
?? 3.7 掌握陰影（暫定）
物體對光照的反應表現為物體的「陰影」和「投影」，Three.js 提供了簡單但并不完美的方法讓開發者能夠讓物體的陰影和投影盡可能貼近現實，本章中我們將深入了解其中的內容，
?? 本章內容將根據其他已發布文章的閱讀情況決定是否更新，當前不保證出現在系列中，
以上，是「和我一起學【Three.js】『初級篇』」這一企劃中計劃包含的內容，除后續兩章外，除非我有更有意思的內容想要發表，我會盡量維持一周一篇的更新頻率，希望得到各位讀者的監督和關注，
您可能會好奇標題中「初級篇」的含義，沒錯，無論是對于 Web 3D 世界還是 Three.js 而言，掌握初級篇的內容僅僅算是入門，如果您選擇繼續探索，前方還為您保留了更廣闊的天地，例如：
- 粒子效果；
- 著色器；
- 性能優化；
- React Three Fiber；
- ...
不過這些都是后話了，萬丈高樓平地起，請先跟隨我一同完成本階段的學習吧，這將是一段漫長的旅程，希望您旅途愉快 ??，
4. 如何學習？
想要通過本系列文章入門 Three.js 技術，您需要確保您熟悉 JavaScript 語言，并能夠理解例如 Babel，Vite，Webpack 之類的打包工具如何使用，
文章會包含「基礎概念講解」和「代碼示例」兩個部分，希望您不僅閱讀文章，還能夠積極地動手實踐，
我十分鼓勵您通過各類平臺展示您的學習成果，分享您的學習經驗，如果本系列文章為您提供了切實的幫助，我也希望您愿意積極附上文章鏈接，讓更多的人受益，
5. 如何檢驗學習成果？
如何檢驗您是否真正入門 Three.js 呢？通過閱讀完本系列文章，您應該能夠獨立搭建一個如下的 3D 場景（這個例子參考了 Bruno Simon 在 three.js journey 課堂中的一個示例，因為我覺得它能夠讓您充分利用之前所學）
?? 注意：未來該案例有可能會被替換，
6. ?? 思考題
- 您為什么想要學習 Three.js 技術？
- 您認為 Three.js 技術有哪些可能的使用場景？
歡迎您在評論區與大家交流討論，
7. 總結
在本篇文章中，我向您介紹了什么是 Three.js 以及本系列文章將如何帶您步入 Web 3D 世界的大門，不知道您是否對此旅途充滿期待？希望您保持關注，歡迎您在評論區與我交流，
8. 參考資料
- Three.js 官網；
- three.js journey；
9. 使用到的工具
- 螢屏錄制：QuickTime Player；
- 視頻轉 GIF 圖片：iLoveIMG；
?? 支持創作
您有很多方式可以表達您喜歡這篇文章，并愿意支持我持續創作，例如：
- 點擊各類平臺「喜歡」按鈕；
- 將文章轉發在各類您喜歡的平臺，并為它寫一份簡短的推薦語；
- 在評論區留言；
- 關注我的個人公眾號「前端亂步」；
- ...
無論您選擇哪一項，我都會因為您的欣賞而感到愉悅，
?? Hey！喜歡這篇文章嗎？別忘了在下方?? 投票讓我知道，轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/546641.html
標籤：JavaScript
上一篇：瀏覽器事件回圈相關概念及其理解
下一篇：前端設計模式——配接器模式