先把計畫的骨架想清楚

在正式開始研究 Three.js 之前，先想請出要做的功能有哪些，之後比較好查找對應的技術
單純從「使用者體驗」的角度，這個小遊戲需要具備：

1. 打開網頁，看到獅山公園3D模型：這是最基本的顯示功能
2. 可以用滑鼠拖曳旋轉、縮放檢視模型：對應到OrbitControls
3. 滑鼠點擊模型的某個位置，系統要能判斷「點到了什麼」：對應到Raycasting
4. 如果點到的剛好是藏起來的彩蛋，跳出「恭喜找到」的提示：這是遊戲的核心互動邏輯
5. 如果點到的不是彩蛋(點到公園本體其他地方)，沒有特別反應，或給一點提示引導繼續找

把這五項串起來，就是完整的骨架。前三項是Three.js的基本功能組合，第四、五項才是真正需要自己寫邏輯判斷的「遊戲」部分。

需要具備的技能，盤點一下

老實檢視一下，接下來要用到的技能，哪些是已經會的、哪些需要邊做邊學：

• 基礎HTML/CSS：用來搭建網頁容器，這部分不陌生
• 基礎JavaScript：Three.js的所有操作都是用JS寫的，包含變數、函式、事件監聽(例如「點擊滑鼠時要做什麼」)這些基本概念要熟
• 非同步處理的概念：前面提過GLTFLoader載入模型是非同步的，需要理解「程式不會乖乖照順序一行行等，載入完成前先不能對模型做操作」這種寫法邏輯
• Three.js本身的API：這是全新要學的部分，前面幾天的「認識」跟「規畫」，就是在打這塊的底

老實說，這次會大量依賴AI協助寫程式，這跟前面Litchi、WebODM、Blender、Sketchfab那種「操作既有軟體介面」的性質不太一樣——Three.js這塊需要實際寫程式碼，遇到不會的語法/寫法，會直接問AI協助，這也是接下來幾篇文章裡，如果程式碼是AI協助產出的，我會誠實標註出來的部分。

這個骨架，怎麼對應到接下來的期程

• 場景搭建(顯示模型) → 對應骨架的第1項
• OrbitControls → 對應第2項
• Raycasting → 對應第3項
• 找出彩蛋實作(藏物件、點擊判定、找到提示) → 對應第4、5項

想清楚這個對應關係後，接下來每天要做的事情就不會只是零散的技術練習，而是每天都在往這個完整骨架前進一步。

接下來

骨架想清楚了，下一篇會從最基礎的場景顯示開始，一步步把這五項功能疊上去。