HW#6 3D models and Navigation

  課堂練習 

Deadline:  Saturday at 23:59 (one more week)

Send all the share links to  me chang212@gmail.com by email with subject HW#6 [your id, your name]

1-5 任選2題

1. 從文字製作太陽-地球-月亮 3d 模型 （Hint: Three.js for Sun, Earth, Moon,  starfield.）

2. 從影像資料庫選取 1 幅，製作3d 模型圖 (Hint: Prompt "3D model")

3. Add engine animation of Leap 71 (Hint: prompt "Add engine animation")

4. Add navigation for the urban pedestrian (Hint: prompt "navigate")

5. 製作3d 障礙模型圖，模擬盲人行進 

The model is broken. The pedestrian got stuck ahead of the air-conditioner. Your task is repair the model to walk around it and make it to the destination.

Your prompts show a clear progression from initial obstacle identification → edge detection → 3D visualization → realistic models → collision detection → intelligent avoidance → critical safety zones.

• Try the vanilla version. No detection of obstacles. No avoidance.
• Try the detection only version.
• Try the shaky version with detection and avoidance 
• Make a comprehensive, functional version with detection and Voronoi-based avoidance

prompt share: ＡＩ障礙偵測，行進模擬

作業：互動式 3D 模型 — 場景重建、導航、Voronoi、火箭引擎與合成物件

A-F 任選三題

概述

本作業以「做出來」為主：每個部分都要繳交一個可在瀏覽器中操作的互動式 3D 作品（artifact），含動畫，而非書面報告。共五個部分（A–E）加上一個整合小專題，總分 100 分。主題延續部落格的 3D 模型系列：場景重建、3D 導航、Voronoi 路徑規劃、火箭引擎設計與合成物件。

學習目標。 完成後，你應該能夠：

1. 將照片重建的場景載入網頁，做成可旋轉、縮放、標註的 3D 檢視器。
2. 以動畫呈現路徑搜尋演算法在 3D 地圖中的運作過程。
3. 做出可拖曳障礙物、即時更新的 3D Voronoi 導航沙盒。
4. 用滑桿即時生成參數化火箭噴嘴，並以粒子動畫呈現排氣。
5. 將 3D 物件合成到真實場景中，光影一致、可互動切換。

繳交方式。

• 每部分一個可直接開啟的網頁連結（GitHub Pages、CodePen、Claude artifact 或同類服務皆可）。
• 一段 30–60 秒的螢幕錄影，展示主要互動與動畫。
• 原始碼（repo 或 zip）與 README。
• 不需寫報告：每個作品頁面內附一個「說明」面板，每部分 100 字以內，說明你做了什麼、遇到什麼問題。
• 建議工具：Three.js 或 React Three Fiber、Babylon.js、<model-viewer>、Blender（動畫／渲染）、lil-gui 或 Tweakpane（滑桿面板）。Python 僅用於前處理資料。
• 目標效能：一般筆電上 ≥ 30 fps。

A場景重建互動檢視器

作品　一個網頁版 3D 檢視器，呈現你用照片重建的真實場景，並以動畫重播「照片是怎麼變成 3D 的」。

圖 A從照片到網頁檢視器 · 5 個步驟

SfM 產生的相機位姿不只用於重建，也直接拿來驅動 A3 的「重播」飛行鏡頭。

A1. 拍攝與重建

1. 選擇一個小場景（雕像、建築轉角、房間、中庭），繞行拍攝 40–100 張、相鄰重疊約 60–80%。
2. 以 COLMAP、Meshroom、RealityScan 或 Gaussian Splatting 工具重建，匯出 glTF/GLB、PLY 或 .splat，以及相機位姿。

A2. 互動檢視器

頁面需具備：

• 軌道控制（旋轉、平移、縮放）與一個「重設視角」按鈕。
• 表示法切換：稀疏點雲 ↔ 稠密點雲 ↔ 網格（或 splat），切換時有淡入淡出。
• 至少 3 個可點擊的熱點（hotspot），點了後相機平滑飛到該處並顯示標註。
• 一個「重建瑕疵」熱點，從你的模型中找出破洞或噪點，用一句話說明原因。

A3. 動畫

1. 將每個相機位姿畫成小角錐（frustum），按拍攝順序逐一出現。
2. 做一個「重播」按鈕：相機沿原始拍攝路線飛行，並在角落顯示該位置的原始照片。
3. 點雲「生長」動畫：點由少到多逐漸出現，模擬 SfM 的增量重建。

B3D 導航沙盒

作品　一個體素化 3D 場景，使用者點選起點與終點，就能看到 A* 一步步搜尋路徑的動畫。

圖 BA* 搜尋動畫的一幀 · 波前、膨脹區與路徑

你的動畫應讓觀眾看到波前逐幀推進，以及紅圈處「最短但不安全」的問題。

B1. 場景與表示法

• 將 Part A 的模型（或提供的範例）轉成體素格網，以 InstancedMesh 繪製。
• 滑桿：體素大小（0.1–0.5 m）與載具半徑，調整後障礙物膨脹區即時更新（用半透明顏色區分）。
• 切換按鈕：點雲 / 體素 / 2.5D 高程圖，對同一場景即時切換，讓人看出差異。

B2. 搜尋動畫

1. 點擊場景設定起點與終點（raycasting）。
2. 以 26 鄰接執行 A*，每幀展開數個節點：open set 一種顏色、closed set 另一種顏色，讓搜尋「波前」看得見。
3. 找到後，路徑以發光管線（TubeGeometry）由起點延伸到終點，再讓一個小無人機沿路徑飛行。
4. 播放／暫停／單步按鈕，及速度滑桿。

B3. 即時指標

畫面上的 HUD 顯示路徑長度（m）、展開節點數、執行時間（ms）與最小間距（m）。當路徑貼牆時以紅色閃爍警示，這就是 Part C 要解決的問題。

C互動式 3D Voronoi 導航

作品　一個可拖曳障礙物的 3D 空間，Voronoi 路網與「最大間距」路徑會即時重算，無人機沿路徑飛行。

對障礙點 pᵢ，其 Voronoi 胞元是所有距離 pᵢ 最近的點；胞元之間的邊到多個障礙物等距，因此是最安全的飛行走廊：

圖 C六個圓形障礙物的 Voronoi 路網 · 依間距上色

綠線到兩個最近障礙物等距，就是飛行器可以走的「走廊」；紅線太窄，要先篩掉。

C1. 路網生成

1. 在 20 × 20 × 10 m 的空間中放 20–30 個障礙物（方塊、柱子或球），並在其表面取樣點。
2. 計算 3D Voronoi：可在 JS 中由 3D Delaunay 對偶求得，或以 scipy.spatial.Voronoi 預先計算並匯出 JSON，或用體素距離場的「脊線」近似。
3. 只保留邊界內、間距 ≥ 載具半徑的邊，並依間距用色階上色（紅 = 窄、綠 = 寬）。
4. 以 Dijkstra 或 A* 在路網上找路，再用樣條平滑（CatmullRomCurve3），且不低於安全間距。

C2. 互動

• 可用滑鼠拖曳障礙物（TransformControls），放開後路網與路徑重算並以動畫過渡。
• 「新增障礙物」、「隨機場景」按鈕。
• 切換顯示：Voronoi 邊、Delaunay 四面體、胞元半透明面。
• 滑桿調整載具半徑，看著太窄的邊消失。

C3. 對比動畫

同一場景中讓兩架無人機同時起飛：一架走 A* 最短路徑，一架走 Voronoi 路徑。每架旁顯示即時間距數值，若低於安全值就變紅。結束後顯示小表：長度、最小／平均間距、計算時間。

D參數化火箭引擎工作台

作品　拉動滑桿就能即時重塑 3D 噴嘴，並以粒子排氣展示不同高度的效果。

出口與喉部的面積比決定出口馬赫數 Mₑ（γ = 比熱比）：

圖 D錐形噴嘴剖面與三種羽流 · 範例參數

將上半剖面輪廓交給 LatheGeometry 繞軸旋轉，就是 D1 的 3D 噴嘴；下排是 D2 高度滑桿應該跑出的三種羽流。

D1. 即時噴嘴生成

1. 滑桿：γ（1.1–1.4）、喉部半徑、面積比（2–100）、擴張角，以及錐形 / Rao 鐘形切換。
2. 以 LatheGeometry 將 2D 輪廓旋轉成 3D 噴嘴，每次調整即時重建。
3. 以數值法（二分法或牛頓法）求 Mₑ 並顯示在 HUD；噴嘴表面依局部馬赫數上色（熱圖）。
4. 「匯出 STL」按鈕（STLExporter）。

D2. 排氣動畫

• 粒子系統模擬排氣羽流，搭配發光（bloom）效果。
• 「高度」滑桿從海平面到真空：過度膨脹時羽流向內收縮、出現馬赫環（shock diamonds）；膨脹不足時羽流向外展開。
• 一個小儀表顯示推力係數隨高度變化，讓人「看到」為何上面級噴嘴更大。

D3. 爆炸視圖

建立推力室的簡化模型（噴注器、燃燒室、喉部、噴嘴、再生冷卻流道）。按下按鈕時各部件沿軸向展開並顯示名稱標籤，再按一次合回。

E合成物件：虛實合成

作品　把你的噴嘴（或任何 3D 物件）放進 Part A 的真實場景，光影一致到「看不出來是後加的」。

圖 E虛實合成的五個輸入 · 合成後做成互動展示

任何一個輸入沒對齊（陰影方向、比例、遮擋），觀眾就會看出物件是後加的。

E1. 合成

1. 將物件放在場景中的真實表面上，比例正確。
2. 用 HDRI 或從照片推估的環境光設定光照，並匹配主光方向。
3. 加入「陰影接收面」（ShadowMaterial）產生接觸陰影，並處理遮擋（物件被場景前景擋住）。

E2. 互動展示

• 前後對照滑桿（左右拉動切割線）。
• 可拖曳光源方向，陰影即時更新。
• 加分：支援 WebXR，用手機以 AR 將物件放在真實桌面上；或用 <model-viewer> 的 AR 模式。
• 在「說明」面板列出三個仍會露出破綻的地方。

★Ｆ 整合小專題：飛越展示

作品　把各部分串成一個網頁：在重建的場景中規劃安全路徑，讓一架搭載你噴嘴的小飛行器沿路徑飛行。

圖 F整合小專題架構 · 4 個輸入、1 個網頁、1 支影片

各部分做好時就把輸出格式定好（GLB、JSON 路徑、模組化的粒子系統），整合時就只是匯入。

1. 場景：Part A 模型；障礙物由模型體素化而來。
2. 路徑：Part C 的 Voronoi 路徑，起點／終點可點選。
3. 飛行器：合成在場景中（Part E），尾部噴出 Part D 的粒子排氣。
4. 鏡頭模式：追隨、第一人稱、自由軌道；底部時間軸可拖曳、播放／暫停。
5. 繳交一段 60 秒展示影片。

評分與繳交

評分看作品「能不能玩、好不好看、對不對」，不看文字量。各部分滿分內容如下，每部分再依底下四個標準評定。

部分	分數	滿分標準
A — 場景檢視器	20	模型流暢載入；熱點與飛行鏡頭順暢；相機重播動畫完整
B — 導航沙盒	15	搜尋波前清楚可見；滑桿即時生效；HUD 數值正確
C — Voronoi 導航	25	拖曳後路網正確重算；路徑安全平滑；對比動畫說服力強
D — 火箭引擎	20	Mₑ 正確；噴嘴即時重建；排氣隨高度變化；爆炸視圖順暢
E — 合成物件	10	比例、光線、陰影、遮擋一致；對照滑桿可用
F 整合小專題	10	各部分無縫串連；鏡頭與時間軸可用；影片完整
總計	100

每部分的評分標準

35%互動性控制項即時生效、操作直覺

30%動畫與視覺轉場平順、顏色有意義、畫面精緻

25%技術正確性演算法與公式正確、數值合理

10%效能與穩定≥ 30 fps、無當機、手機上可開啟

繳交檢查清單

• Part A–E 與整合專題的網頁連結（共 6 個，或一個網站含 6 個頁面）
• 每個頁面內的「說明」面板（每部分 ≤ 100 字）
• 30–60 秒螢幕錄影 × 5，整合專題 60 秒展示影片 × 1
• 原始碼與 README（如何本機執行）
• Part D 匯出的 STL 檔
• 使用的模型、素材、函式庫與部落格文章的來源引用

圖 D 的喉部半徑 2 cm、面積比 10、擴張半角 15° 為範例參數。勾選清單只存在你自己的瀏覽器中。