與 Gemini 結伴編程，結合 Three.js 與 MediaPipe 探索 3D 宇宙
1. 儲存 HTML 程式碼：將與 AI 協作生成的完整網頁代碼複製，儲存為一個獨立的檔案，檔名設定為 index.html。
2. 儲存工作紙為 PDF：完成所有反思與回答後，點擊頁尾按鈕直接將本工作紙下載為 PDF。
3. 上傳並繳交：將 index.html 及工作紙 PDF 檔案一併上傳至 Google Drive 連結，並提交 Google 表單。
運用 Three.js 在網頁中建立一個包含太陽和多顆橢圓軌道公轉行星的 3D 虛擬宇宙空間。
你是一位 3D 網頁前端工程師。請使用 HTML5 和 Three.js 設計一個單一網頁的 3D 太陽系宇宙。畫面中央是黃色的太陽（SphereGeometry），周圍圍繞著幾顆主要行星（如水星、金星、地球、火星等），每顆行星都有其獨特的顏色、大小、橢圓公轉軌道（使用 THREE.EllipseCurve 繪製成灰色細線）和公轉速度。每顆行星須使用明亮、高飽和度、對比清晰的材質（建議 MeshStandardMaterial，並設定適度 emissive 自發光），在深色太空中清楚易辨；可為各行星加入柔和點光源，確保行星看起來光亮、易於觀察。背景設定為深色太空（#020205），並加入數千顆隨機分佈的星空粒子（THREE.Points）。請使用新版 Three.js 模組導入方式（透過 importmap 引入 Three.js 0.160.0 和 OrbitControls），並提供完整的 HTML 代碼。
使用 HTML/CSS 絕對定位，為網頁加入帶有操作指南與公轉速度滑桿的科幻風頂層介面。
請在剛才的 3D 場景上方，使用 HTML/CSS 絕對定位（對最外層 UI 使用 pointer-events: none 避免阻擋 3D 旋轉）加入一個充滿科技感的科幻 HUD 介面。介面需包含：頂部中央標題「SOLAR SYSTEM V11 - COMMANDER EDITION」；左下角一個「手勢指南面板 (GESTURE GUIDE)」，以圖標加文字說明操作方法（包含：單手移動旋轉、握拳停止時間、雙手縮放、滑鼠點擊）；右上角一個「基礎速度控制面板」，包含一個範圍滑桿（Range Slider）可手動調整行星基礎公轉速度（0x 至 5x），並顯示當前速度值。確保介面元件具備半透明深色背景、藍色發光邊框，且面板本身設為 pointer-events: auto 以便正常點擊。
引入 MediaPipe Hands 模組，開啟視訊鏡頭進行雙手 21 個關鍵點的即時影像辨識與骨架繪製。
為了實現手勢控制，請在 HTML 中引入 Google MediaPipe Hands 及其相機工具（camera_utils.js, drawing_utils.js, hands.js）的 CDN 腳本。在網頁右下角建立一個 160x120 像素的相機預覽視窗，包含隱藏的 <video> 和疊加在其上的 <canvas>（設定 transform: scaleX(-1) 鏡像翻轉）。編寫 JavaScript 程式碼，啟動視訊鏡頭並將每一影格傳送給 Hands 模型進行偵測。當偵測到手部時，在畫面中央頂端的手勢狀態盒（Gesture Box）中將連線狀態燈變為綠色，並在預覽 Canvas 上即時繪製出手部骨架連線與關節點。
撰寫 JavaScript 演算法，將雙手食指距離轉化為鏡頭縮放、單手中心座標控鏡頭旋轉、握拳轉化為時間凍結。
請將 MediaPipe 偵測到的手部關鍵點數值轉化為 Three.js 的場景控制邏輯：
1. 雙手模式 (ZOOM)：當偵測到兩隻手時，計算兩手食指尖（Landmark 8）之間的距離（Math.hypot）。將此距離映射到相機與中央太陽的目標距離（targetCamDist），實現雙手張開或靠近時，3D 場景能平滑地 Zoom In 或 Zoom Out。
2. 單手模式 (ONE_HAND)：當偵測到單手時，取得手掌中心（Landmark 9）的 X 座標。若偏離中心（0.5），則平滑旋轉相機鏡頭（計算 targetRotSpeed）。同時編寫一個計算手掌開合度 (Openness) 的函式（計算手腕 Landmark 0 到 4, 8, 12, 16, 20 五個手指尖的平均距離）。當手掌緊握成拳頭（Openness < 0.2）時，將行星公轉速度因子設為 0，達到「時間停止 / TIME STOP」效果；當手掌張開時，速度恢復，並在 HUD 的能量條（Tension Bar）中顯示開合百分比。返回最終完整整合的單一 HTML 代碼。
引入 Raycaster 偵測滑鼠點擊行星，並彈出精緻的科幻視窗展示星體的直徑、溫度與天文科學描述。
請為太陽及各行星加入滑鼠點擊互動功能。利用 Three.js 的 Raycaster（光線投射器）和 window 的 click 事件，偵測使用者點擊了哪一個星體網格（Mesh）。在每顆星體的 userData 中附加詳細的真實科學數據（欄位包含：名稱 Name、類型 Type、直徑 Diameter、表面溫度 Surface Temp、公轉週期 Orbit Period、以及簡介描述 Description）。當點擊星體時，在網頁中央彈出一個精緻的科幻數據視窗（Info Popup，包含磨砂玻璃背景、亮藍色主題和關閉按鈕 ×），動態展示該星體的科學資料；彈窗內文字須採高對比、光亮易讀的配色（例如深色底配白色或淺青色大字，字體不小於 16px）。請再次檢查 3D 場景中所有行星是否保持明亮、飽和、易於辨認。確保點擊太陽周圍的發光光暈（Sprite）時不會阻擋射線，能正確選中後方的太陽網格。完成後，請輸出一份完整、可離線開啟的單一 HTML 檔案（內嵌所有 CSS 與 JavaScript），並在頁面加入「下載 HTML」按鈕，讓使用者可一鍵下載當前完整網頁為 .html 檔案；同時提供完整原始碼，方便學生另存為 index.html 使用。
參考本工作紙的太陽系例子，選擇另一個學習主題，運用 Gemini 生成新一組 Prompt，再逐步建立屬於你的互動 Web Application。
步驟一：分析本例子（先唔好開 Gemini）
步驟二：選擇你的新主題
步驟三：用 Gemini 生成「新一組」任務 Prompt
複製下面 Meta-Prompt 貼去 Gemini。請將【你的主題】、【物件清單】、【要展示的資料欄位】改成你在步驟二填寫的內容。Gemini 應輸出 5 個由淺入深嘅 Prompt（對應任務一至五）。
你是一位中學生互動網頁教學設計專家。請參考「3D 太陽系 + Three.js + MediaPipe 手勢 + Raycaster 點擊彈窗」嘅分步開發模式，為主題【你的主題】設計 5 個可直接貼去 Gemini 編程嘅中文 Prompt。
要求：
1. 任務一：建立 3D 場景（中央主體 + 多個可公轉/分佈物件：【物件清單】），物件要明亮、高飽和、易於辨認（MeshStandardMaterial + 適度 emissive）。
2. 任務二：加入科幻 HUD（標題、手勢指南、速度滑桿），使用 pointer-events 避免阻擋 3D。
3. 任務三：整合 MediaPipe Hands（相機預覽、骨架繪製、連線狀態）。
4. 任務四：手勢控制邏輯（雙手縮放、單手旋轉、握拳時間凍結），返回完整 HTML。
5. 任務五：Raycaster 點擊互動 + 科學/學科資料彈窗（欄位：【要展示的資料欄位】），彈窗文字高對比易讀；最後輸出可離線開啟的單一 HTML，並加入「下載 HTML」按鈕。
每個 Prompt 必須獨立完整、可循序貼上；語氣清晰，適合中學生使用。請直接列出 Prompt 1 至 Prompt 5 的全文，唔好只寫大綱。
步驟四：生成你的新 Web Application