Three.js 的小遊戲功能在昨天已經告一小段落，並放上 GitHub；整套流程都已經走過一遍
接下來想讓作品的視覺更加完整

現在的公園模型，會有之前提到，部分物件中間鏤空、或有破洞的狀態，這跟當初用 Litchi 的 2D map 任務飛行有關，因為 2D map 全部都是 90 度垂直拍攝，沒有斜角，因此看不到物間垂直的樣貌

為了讓模型更完整，今天改用 Litchi 的 3D model 任務重新飛了一次，並如同過去一樣跑 WebODM，並在 Blender 匯入 WebODM 產生的 obj 檔。
下圖是在 Blender 匯入的樣貌，每次飛行都需要挑假日且晴天的時候外出，所以能飛行的機會很珍貴，這次就盡可能讓飛行的範圍更廣，連公園的周遭停車場，路面都涵蓋進來。

這些資訊是多出來的，所以在 Blender 上嘗試去除周遭不相關的地區，這部分今天花了不少時間，所先做到這裡。

今天的文章會以以下兩個主題說明

1. 交代這次的 3D 模型是怎麼來的，以及 Blender 去邊目前做到哪裡。
2. 趁這個中繼點，把整條技術流程回顧一遍。

一、這次的 3D 模型是怎麼來的

Litchi：改用 3D model 任務飛行

第一次飛的是 2D MAP，用垂直向下拍攝的方式建模。這次改用 3D model 任務，目的是對照兩種拍法建出來的模型，看鏤空、破洞的情況會不會改善。

兩種模式的差別，之前文章整理過：2D 與 3D 指的是拍攝手法。2D map 是垂直拍，3D model 則是額外加拍斜角，比較適合有明顯垂直面的物體。

這次 3D 模型任務的飛行設定：

其餘沒提到的參數為預設值
預估飛行拍攝張數: 78 張

WebODM：照片變成帶紋理的模型

新建專案，Options 選擇 Edit:
針對 Texturing 的部分，勾選 texturing-keep-unseen-faces: 保留網格裡沒有被任何一台相機拍到的面
前面有提到，每次飛行的機會都很珍貴，所以參數的選擇上，我都盡可能勾選保留相關的選項

等照片處理完後，Download -> Textured Model

Blender：匯入之後，去除周邊不必要的資訊

在 Blender 裡用 File → Import → Wavefront (.obj) 匯入，切到 Material Preview 看模型圖。

然後就是今天主要的工: 把外圈不需要的部分刪掉，只留有清楚紋理的公園本體。

我的去邊做法

1. 在大綱選單只選地形物件（後面場景裡還會有彩蛋角色，編輯時要避開）。
2. 按 Tab 進入 Edit Mode。
3. 用框選圈出外圈，按 X 刪除。
4. 選擇 Faces，如果殘留一些小點，繼續按 X，改由 Vertices

來回多次 2. ~ 4. 直到對模型感到滿意

相較於前言的圖，周邊沒有破碎情況，拍攝中 unseen 的淺綠色部分，也都移除掉，
雖然周圍線條不規則，不是很美觀，但因為時間有限先做到這邊。等 Three.js 載入模型後才會知道最終的成果如何 ~

二、溫故：從空拍到 3D 展示，走過的技術流程

目前整個計畫接近尾聲，趁今天放入 3D 來把流程再順一次

① Litchi（拍攝）
Litchi 是第三方的無人機飛行 App，讓消費級的 DJI Air 2S 也能執行自動格線飛行。用 Area Mapping 設定重疊率（我設的是 80% / 70%），開啟 Crosshatch 多飛一次垂直方向的格線，自動拍完整個區域。

② WebODM（建模）
WebODM 是開源的攝影測量引擎，用 Docker 執行。它靠 Structure from Motion 比對照片重疊處的特徵點，反推出 3D 結構，產出正射影像、點雲、DSM，以及帶紋理的 3D 模型。

③ Blender（修模）
把 WebODM 的 OBJ 匯入 Blender，去除不要的區域、放進彩蛋角色，和地形一起匯出成單一的 .glb。

彩蛋角色的來源
彩蛋角色來自 Quaternius。授權條款請以官方 License 頁面為準，使用前建議自己讀過一遍。

④-a Sketchfab（線上展示）
Sketchfab 是 3D 模型的線上展覽館，把 .glb 上傳後，任何人都能在瀏覽器裡旋轉、縮放。

④-b Three.js（自製互動）
.glb 另一條出路是自己寫網頁：用 GLTFLoader 載入、TrackballControls 旋轉縮放、Raycaster 判斷點擊到哪個物件，再加上計時與結果面板。程式碼拆成 main、scene、timer、ui、loader 五個模組，放在 GitHub。

兩條出路都是拿 Blender 匯出的 .glb，所以圖上畫成分支，不是一條線串到底。

三、接下來的計畫

1. 加上更多彩蛋：在 Blender 刪掉外圈後，增加多個彩蛋，之前 2D 串流程時，只有先放一個。程式裡用 getObjectByName 找彩蛋，這個方法只會回傳第一個符合的物件，彩蛋變多時，找彩蛋、計數和防重複的邏輯都要跟著調整。
2. 重新匯出 .glb，再走一遍 Three.js：換上新模型後，確認取景、彩蛋位置、點擊判斷都正常。
3. 放到 GitHub Pages：目前遊戲只能在自己電腦上跑。我的 GitHub 帳號本來就有放其他靜態網頁，預計把這個專案也部署上去，讓任何人用網址就能玩。部署時 .glb 的檔案大小要特別注意，等到那天再查官方文件，確認限制後再記錄。

小結

今天沒有新功能，主要就是把這條路從頭看一遍，然後對 Blender 介面上的操作，比之前更加熟練!