先選節點
主幹有固定順序；資產與互動則可以依作品需求分開前進。
← Guides / Browser 3D
BROWSER 3D · OUTCOME-BASED LEARNING
不是讀完就算會。每一級，都要留下成果。
從 WebGL 圖形管線開始，依序建立 Three.js 場景、資產管線、互動與效能能力。每個節點都寫清楚要學什麼、做出什麼，以及怎樣才算通過。
開始檢查技能- 6
- 個技能節點
- 5
- 級能力標準
- 4
- 種畢業專案
HOW IT WORKS
技能樹回答順序，等級回答深度。
再看等級
Lv.0 到 Lv.4 都有專屬的學習內容、實作任務與通過條件。
最後留下證據
不是勾選「讀完」，而是留下程式、量測、公開頁面或可重跑的資產。
INTERACTIVE SKILL TREE
點選節點，檢查你現在做到哪一級。
資產與互動是兩條並行分支；任一分支做到 Lv.2，就能進入效能與發布。
0/ 24 技能點
進度只存在這台裝置，不需要登入，也不會上傳。
01 · 瀏覽器圖形基礎
WebGL 與圖形管線
先看懂 JavaScript、GPU、Shader 與像素如何接力，才知道 Three.js 幫你省下了哪些工作。
前置條件 · 會閱讀基本 JavaScript
這一級要學會
分辨 CSS、SVG、Canvas 2D、WebGL 與 Three.js 各自負責哪一層。
實作任務
畫出一張從 JavaScript 到螢幕像素的流程圖。
通過條件
能說明何時不需要 WebGL，並指出 Three.js 不是建模工具。
對應教材與實驗
CAPSTONE PROJECTS
選一種作品，把技能收斂成可以公開的成果。
四個題目都來自 KeepOnFirst 已完成的文章或實驗。你可以照著拆解，再換成自己的內容、資料與取捨。
3D 捲動文章
讓文字維持語意化 HTML，再用捲動進度指揮背後的鏡頭與物件。
- 驗收成果
- 交付：三個章節、reduced motion 與 WebGL fallback
真實城市管線
把 OpenStreetMap 資料轉成可重做的 Blender 與 Three.js 城市場景。
- 驗收成果
- 交付：來源資料、可重跑腳本、GLB 與授權說明
3D 室內格局工具
把平面圖資料轉成牆、地板與家具，再加入選取、拖拉與相機操作。
- 驗收成果
- 交付：兩種格局、可拖家具與手機操作
瀏覽器 3D 遊戲場景
整合道路、車輛、輸入、相機、特效與效能預算，做出一段可重玩的流程。
- 驗收成果
- 交付：可完成的一局、行動控制與效能基線
FULL RUBRIC
完整能力標準
需要一次比較多個節點時，可以直接展開完整清單；所有內容都是一般 HTML，不依賴圖形畫布。
01WebGL 與圖形管線會閱讀基本 JavaScript
Lv.0 · 認識
- 這一級要學會
- 分辨 CSS、SVG、Canvas 2D、WebGL 與 Three.js 各自負責哪一層。
- 實作任務
- 畫出一張從 JavaScript 到螢幕像素的流程圖。
- 通過條件
- 能說明何時不需要 WebGL，並指出 Three.js 不是建模工具。
Lv.1 · 重現
- 這一級要學會
- 建立 WebGL context，理解 viewport、清除色與 render loop。
- 實作任務
- 讓 canvas 正確填滿容器，並在調整視窗時重新設定 viewport。
- 通過條件
- WebGL 不可用時不會讓頁面崩潰，canvas 尺寸也不會變形。
Lv.2 · 修改
- 這一級要學會
- 理解 buffer、attribute、uniform、vertex shader 與 fragment shader。
- 實作任務
- 畫出一個會移動或變色的三角形。
- 通過條件
- 能指出哪些資料留在 CPU、哪些送進 GPU，且執行時沒有 shader 錯誤。
Lv.3 · 整合
- 這一級要學會
- 處理滑鼠／觸控輸入、裝置像素比、resize 與 WebGL 資源清理。
- 實作任務
- 做一個會回應指標位置、也能在手機操作的小型圖形實驗。
- 通過條件
- 限制過高的像素比，離開頁面時釋放資源，手機旋轉後仍能正常顯示。
Lv.4 · 發布
- 這一級要學會
- 量測繪製成本，判斷該使用原生 WebGL、Three.js 或更簡單的 2D 技術。
- 實作任務
- 完成一個附有效能數字、fallback 與技術選擇說明的互動範例。
- 通過條件
- 能用量測結果解釋取捨，而不是只因為「3D 比較酷」就使用 WebGL。
02Three.js 基礎完成 WebGL Lv.0，或理解瀏覽器圖形管線
Lv.0 · 認識
- 這一級要學會
- 認得 scene、camera、renderer、mesh、geometry 與 material 的責任。
- 實作任務
- 用自己的話畫出一個 Three.js 場景的元件關係。
- 通過條件
- 能解釋「相機不會自動畫畫面」以及 render 呼叫發生在哪裡。
Lv.1 · 重現
- 這一級要學會
- 建立 PerspectiveCamera、WebGLRenderer、Mesh 與 animation loop。
- 實作任務
- 做出可在頁面上旋轉的立方體。
- 通過條件
- 場景能啟動、停止並在 resize 後維持正確比例。
Lv.2 · 修改
- 這一級要學會
- 使用燈光、材質、群組、座標系與 OrbitControls。
- 實作任務
- 建立一個可旋轉檢視、具備兩種材質與基本打光的小場景。
- 通過條件
- 能處理陰影、色彩空間與相機距離，不靠亂調數字碰運氣。
Lv.3 · 整合
- 這一級要學會
- 載入 GLB、處理非同步狀態、Raycaster、手機操作與元件生命週期。
- 實作任務
- 載入一個模型，點選其中物件後改變狀態或顯示資訊。
- 通過條件
- 有 loading、error 與 fallback，離開頁面後不再留下 animation frame 或事件監聽。
Lv.4 · 發布
- 這一級要學會
- 設計可維護的場景邊界、資源生命週期、品質分級與發布策略。
- 實作任務
- 發布一個具備手機版、reduced motion、WebGL fallback 與效能紀錄的完整頁面。
- 通過條件
- 陌生裝置失敗時仍有內容可讀，且能說明最貴的 rendering 成本在哪裡。
03ABlender 與 GLB 管線Three.js Lv.1
Lv.0 · 認識
- 這一級要學會
- 理解 Blender、glTF、GLB、Three.js 與 GLTFLoader 的分工。
- 實作任務
- 列出一個模型從 Blender 到瀏覽器的交付步驟。
- 通過條件
- 能說明 GLB 是交換格式，不是 Blender 專案的替代品。
Lv.1 · 重現
- 這一級要學會
- 處理單位、原點、transform、法線與基本材質。
- 實作任務
- 製作一個簡單物件並匯出成能在 Three.js 載入的 GLB。
- 通過條件
- 比例、朝向與材質正確，不需要在程式裡用魔術數字補救。
Lv.2 · 修改
- 這一級要學會
- 建立穩定的物件命名、階層、pivot、材質槽與匯出設定。
- 實作任務
- 匯出一個包含多個可辨識節點、可被程式選取的場景。
- 通過條件
- 重新匯出後節點名稱與程式契約不會漂移。
Lv.3 · 整合
- 這一級要學會
- 使用 headless Blender、腳本化匯出與可重做的來源資料。
- 實作任務
- 用一個指令從來源檔重新產出相同結構的 GLB。
- 通過條件
- 乾淨環境能重跑，失敗時有明確錯誤，而不是留下半成品。
Lv.4 · 發布
- 這一級要學會
- 管理多資產版本、壓縮、授權、品質門檻與發布追蹤。
- 實作任務
- 完成一套包含來源、產物、授權、驗證與大小預算的資產管線。
- 通過條件
- 任何人都能從來源重建產物，並知道改動是否破壞畫面或超出預算。
03B相機、選取與觸控Three.js Lv.1
Lv.0 · 認識
- 這一級要學會
- 理解 OrbitControls、Raycaster、pointer event 與相機目標。
- 實作任務
- 畫出「螢幕座標 → ray → 物件」的選取流程。
- 通過條件
- 能區分移動相機、移動物件與改變觀看目標的差異。
Lv.1 · 重現
- 這一級要學會
- 設定 OrbitControls 限制、阻尼與基本相機構圖。
- 實作任務
- 做出不會穿地板、也不會把主體轉出畫面的檢視器。
- 通過條件
- 滑鼠拖曳、滾輪與手機單指操作都不會和頁面導覽打架。
Lv.2 · 修改
- 這一級要學會
- 用 Raycaster 選取、拖曳物件，並處理 hover、active 與 deselect 狀態。
- 實作任務
- 做出可拖拉家具或點選熱區的互動。
- 通過條件
- 選取範圍可靠，物件不會跳動，且空白處能取消選取。
Lv.3 · 整合
- 這一級要學會
- 協調 scroll、drag、camera transition、觸控手勢與 reduced motion。
- 實作任務
- 完成一段捲動敘事或多步驟空間操作流程。
- 通過條件
- 狀態轉換可預期，快速連續操作不會卡住或把相機留在錯誤位置。
Lv.4 · 發布
- 這一級要學會
- 從任務成功率、可及性與裝置限制設計互動，而不是只追求效果。
- 實作任務
- 發布一個具備鍵盤替代操作、清楚提示與行動版驗證的 3D 工具。
- 通過條件
- 第一次使用的人能完成主要任務；WebGL 或動態效果關閉時仍有可用替代方案。
04效能、壓縮與降級完成資產或互動分支的 Lv.2
Lv.0 · 認識
- 這一級要學會
- 分辨傳輸大小、解碼時間、GPU 成本、記憶體與主執行緒工作。
- 實作任務
- 替一個現有 3D 頁面列出載入與繪製成本清單。
- 通過條件
- 不再把「檔案變小」直接等同於「整頁一定變快」。
Lv.1 · 重現
- 這一級要學會
- 使用瀏覽器工具量測 request、資產大小、載入時間與 frame rate。
- 實作任務
- 記錄一組可重現的效能基線。
- 通過條件
- 量測條件、裝置與檔案版本都有記錄，能再次得到相近結果。
Lv.2 · 修改
- 這一級要學會
- 比較 Meshopt、Draco、未壓縮 GLB 與解碼器成本。
- 實作任務
- 壓縮一個 GLB，記錄檔案差異、解碼需求與肉眼品質。
- 通過條件
- 能證明壓縮值得加入，而不是只貼出一個較小的檔案數字。
Lv.3 · 整合
- 這一級要學會
- 處理貼圖、instance、draw call、陰影、視距、dispose 與品質分級。
- 實作任務
- 讓同一場景在桌機與手機套用不同品質預算。
- 通過條件
- 畫質降低有順序、有理由，而且手機不因過熱或記憶體暴增而失效。
Lv.4 · 發布
- 這一級要學會
- 把效能預算、fallback、監測與回歸檢查納入發布流程。
- 實作任務
- 建立一份能阻擋過大資產或明顯效能退步的發布檢查。
- 通過條件
- 新版本超出門檻時會被明確擋下，且失敗頁面仍保留主要內容與操作。
05完成並發布一個作品效能 Lv.2，加上資產或互動 Lv.2
Lv.0 · 認識
- 這一級要學會
- 從使用情境定義問題、完成條件與不做的範圍。
- 實作任務
- 選一個畢業專案，寫下使用者、主要任務與三項驗收條件。
- 通過條件
- 範圍能在一個小版本完成，不以「做一個完整遊戲引擎」當目標。
Lv.1 · 重現
- 這一級要學會
- 沿用 Starter 或現有案例，辨認哪些部分必須替換。
- 實作任務
- 換掉內容、模型或資料，產出一個不再只是原範例複製品的版本。
- 通過條件
- 核心路徑可操作，且作品有自己的題目與選擇。
Lv.2 · 修改
- 這一級要學會
- 整合資產、互動、狀態管理與基本錯誤處理。
- 實作任務
- 完成一條從載入到主要任務結束的完整使用流程。
- 通過條件
- 重新整理、快速操作與資產載入失敗時，都不會留下無法復原的畫面。
Lv.3 · 整合
- 這一級要學會
- 執行手機、鍵盤、reduced motion、WebGL fallback 與效能驗收。
- 實作任務
- 把作品部署到公開網址，並完成發布前檢查表。
- 通過條件
- 至少一台手機與一台桌機通過主要任務；失敗狀態有可讀內容。
Lv.4 · 發布
- 這一級要學會
- 用量測、案例文章與可重用資產，把作品整理成能被別人延伸的成果。
- 實作任務
- 發布作品、原始碼或 Starter，以及一篇說明取捨與實測結果的案例。
- 通過條件
- 成果可重現、授權清楚、數字可核對，且能指出下一版真正要改善的問題。