👋 和我一起學【Three.js】「初級篇」：0. 總論

「和我一起學 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 物體將會配合光影產生更加逼真的效果。