本來今天規畫執行 Litchi 3D model 任務飛行，但因為接下來連假安排出遊，所以就先當作 sketchfab 上看到的模型為最終版，先開始往下接觸 Three.js

(上一篇有提到先串通整個環境，所以放了一個 2D Map 任務模式的結果，裡面有很多鏤空的現象)

出遊前，先換個腦袋

接下來幾天要出遊，沒辦法飛行、也不方便帶著VM重度運算，剛好趁這幾天，把系列的最後一塊拼圖——Three.js——的基礎打好。

為什麼不直接用Sketchfab完 還要接 Three.js?

到目前為止，模型已經能上傳Sketchfab、任何人都能360度瀏覽，這樣其實已經達成「展示3D成果」的目的了。但我在一開始有規畫有個進階挑戰就是，能不能有額外互動，做點有趣的事。上一篇有提到模型裡面有埋一個物件，這樣的內容，我想衍生類似大家來找碴，或是尋找威力之類的東西

sketchfab的Viewer雖然好用，但它是一個封閉的成品，沒辦法客製化互動邏輯，例如「點擊到藏在場景裡的彩蛋時，跳出恭喜找到的訊息」這種行為，Sketchfab本身是做不到的。

要做到這件事，需要自己掌控「點擊模型的哪個位置，觸發什麼事」這整套邏輯，而這樣的需要我使用 AI 得到了 Three.js。

Three.js是什麼

Three.js 是一套JavaScript的3D繪圖函式庫，讓開發者不用直接跟複雜的 WebGL(瀏覽器底層的3D繪圖技術)打交道，用比較容易理解的方式，在網頁裡建立、操控3D場景。

簡單說：Sketchfab是別人幫你做好的3D展示間，Three.js是給你一套工具，自己蓋一間展示間，想怎麼佈置、怎麼設計互動，完全自己決定。

核心概念，其實只有幾個角色

Three.js的世界，繞來繞去都是這幾個東西在互動：

• Scene(場景)：所有3D物件存在的空間，像一個空的舞台
• Camera(攝影機)：決定「觀眾從哪個角度看這個舞台」
• Renderer(渲染器)：把Scene跟Camera的組合，實際畫成瀏覽器裡看得到的畫面
• Mesh(網格物件)：場景裡實際存在的東西，例如你的獅山公園模型、藏在裡面的彩蛋，都是Mesh
• Loader(載入器)：負責把外部的模型檔案(你的.glb)讀進場景裡變成Mesh

這次要用到的核心角色是 GLTFLoader，專門用來讀取.glb/.gltf 格式，剛好就是從 blender 匯出後的檔案格式。

接下來幾天要做的事

• 各種規畫: 規畫整個計畫的骨架、需具備的背景知識
• 場景/攝影機/渲染器：先搭出一個最基本的空場景，把獅山公園模型載進去顯示出來
• OrbitControls：讓瀏覽者可以用滑鼠拖曳旋轉、縮放檢視模型(這是Three.js官方提供的一個現成外掛，不用自己從零寫旋轉邏輯)
• Raycasting：這是找威利遊戲的核心技術——判斷「滑鼠點擊的位置，有沒有打中場景裡的某個特定物件」，等模型決選出來後，就要用這個技術判斷「有沒有點中彩蛋」