前言

這次的 30 天鐵人賽，我想從最基本的 Web 技術開始，一步步學習如何在瀏覽器中建立一個互動式三維太陽系，最終希望能夠使用 HTML5、CSS、JavaScript、WebGL 與 Three.js，讓太陽與八大行星在瀏覽器中呈現出光照與陰影等效果，並且可以透過滑鼠與網頁介面進行互動。

不過在正式進入 Three.js 之前，我認為先了解一個問題非常重要：

「Modern Web 到底是什麼？」

所以第一天先不急著做太陽系，而是先建立對現代網頁的基礎概念。

一、什麼是 Modern Web？

簡單來說，Modern Web（現代網頁） 指的是：

利用現代瀏覽器強大的原生能力，打造具備高度互動性、流暢動畫、影音處理、3D 視覺化與高效能即時運算能力的「網頁應用程式（Web Applications）」。

今天的網頁不再只是「一張寫著文字與圖片的靜態報紙」，而是逐漸演變為能夠直接在瀏覽器中運行的應用軟體。
下面舉例現代 Web 能力的實際應用範例：

• Google Maps：實現流暢的向量地圖拖曳、縮放與 3D 街景。
• YouTube：支援高畫質串流影音播放與即時互動。
• Figma：直接在瀏覽器中進行專業級的向量設計與團隊協作。
• Web Games：無需下載安裝檔，點開網頁即可執行高畫質遊戲。
• 3D 視覺化體驗：允許使用者自由旋轉、拆解與縮放 3D 產品模型。
• GPU 加速運算：透過 WebGL / WebGPU 呼叫顯示卡硬體進行高效能圖形渲染。

這些都是現代 Web 能力的應用。

二、Modern Web 可以分成哪些部分？

這次會接觸到幾個重要技術，可以先把它們想成不同的角色。

1. HTML —— 網頁的結構

HTML 負責決定網頁上「有什麼」。
例如：

<h1>我的太陽系</h1>

<p>這是一個 3D 太陽系。</p>

<button>開始</button>

可以把 HTML 想成：網頁的骨架

2. CSS —— 網頁的外觀

CSS 負責決定網頁「長什麼樣子」。
例如：

body {
    background: black;
    color: white;
}

h1 {
    font-size: 40px;
}

可以把 CSS 想成：網頁的外觀與設計

3. JavaScript —— 網頁的行為

JavaScript 負責讓網頁「動起來」。
例如：

button.onclick = function () {
    alert("開始探索太陽系！");
};

也可以利用 JavaScript：
控制動畫、計算行星位置、處理滑鼠操作、控制按鈕、更新畫面

可以把 JavaScript 想成：
網頁的大腦

4. WebGL —— 瀏覽器中的 3D 圖形技術

如果我們想在瀏覽器裡面做 3D，就會接觸到 WebGL，WebGL 可以讓瀏覽器使用電腦的 GPU 進行圖形渲染。
也就是讓我們可以在網頁中處理：

• 3D 模型頂點計算
• 光照與材質渲染
• 陰影貼圖與粒子系統
• 高影格率的 3D 動畫

5. Three.js —— 更容易使用 WebGL 的工具

直接使用 WebGL 建立完整的 3D 世界會比較複雜。
因此我們會使用 Three.js。
Three.js 是一個 JavaScript 3D 函式庫，可以幫我們處理：

• 3D 場景（Scene）與相機（Camera）
• 3D 模型網格（Mesh）與幾何體（Geometry）
• 光源（Light）與真實材質（Material）
• 動畫迴圈與滑鼠控制軌道（OrbitControls）

三、今天小結

今天主要認識了 Modern Web，了解現代網頁不只是單純顯示文字與圖片，也能透過瀏覽器提供的技術實現互動、動畫、影音以及 3D 視覺化。
這次專題會接觸到幾個重要的技術：

網頁基礎介面 → HTML + CSS + JavaScript
3D 視覺呈現 → Three.js
底層圖形渲染 → WebGL (GPU 加速)

今天先建立對 Modern Web 的基本認識，還沒有正式開始製作 3D 太陽系。
接下來會從最基礎的 HTML5 開始，一步一步建立我們的第一個網頁，之後再慢慢加入 CSS、JavaScript，最後進入 Three.js 的 3D 世界。

Day 2 預告

「用 HTML、CSS、JavaScript 建立第一個互動網頁」
明天會正式從 HTML、CSS、JavaScript 開始。