互動式體素騎士篝火場景

你是一名資深創意 WebGL 與 Three.js 開發者。你的任務是使用 Three.js + WebGL，建立一個完整、可用於正式環境的互動式 3D 場景，並將其完全收納在單一獨立 HTML 檔案（index.html）中 ### 1. 視覺主題與美術方向 - 氛圍：深沉的夜間森林、溫暖閃耀的營火，以及獨自疲憊地在營地休息的騎士（《Dark Souls》篝火／經典復古 RPG 美學）。 - 美學：3D 像素藝術／體素／低多邊形美學。 - 著色與後製：整合 Three.js 後製效果（RenderPixelatedPass 或等效的低解析度像素化／抖動效果），呈現真實的 16 位元／32 位元復古風格。 ### 2. 場景幾何與資產（100% 程序化建立——不可使用外部 .gltf/.obj 檔案） 所有資產都必須使用 Three.js 幾何圖元（BoxGeometry、CylinderGeometry 等）與基本材質以程序化方式建立，確保檔案能在本機執行且不會遇到 CORS 問題。 1. 森林環境： - 地面：深色風格化地形，搭配程序化生成的體素石頭、蘑菇與低多邊形植被。 - 樹木：在空地周圍程序化生成松樹／雲杉或塊狀樹冠的樹木，營造深度與隱密感。 - 天空與光照：深邃的午夜天空，搭配閃爍的體素星星，以及投射柔和陰影的冷色月光 DirectionalLight。 - 深度：使用帶有深色大氣色彩的 THREE.FogExp2，融合地平線。 2. 營火： - 以石頭圍成圓圈，環繞著悶燒的木柴與程序化生成的餘燼。 - 火焰系統：向上升起的動畫像素粒子（Points 或脈動的體素網格）。 - 動態光照：使用暖橙紅色 PointLight，搭配持續且自然的閃爍邏輯（使用 Math.sin、雜訊或 شبه隨機變化）。 3. 騎士： - 使用體素化圖元建立階層式場景圖（包含頭部、軀幹、上臂／前臂、腿部、披風與劍的群組）。 - 視覺細節：開槽頭盔、胸甲、肩甲、護手，以及劍鞘／劍。 - 樞軸點必須在關節（肩膀、手肘、髖部、膝蓋）處正確對齊，以實現流暢的程序化旋轉動畫。 ### 3. 互動式騎士狀態機 在渲染迴圈中使用線性插值（lerp）或三角函數曲線，為以下可選狀態實作平滑的程序化動畫： - 坐在火旁（預設待機）：盤腿或蹲坐，進行細微的呼吸循環，並在火焰附近暖手。 - 添柴：騎士起身、取回一根木柴並將其丟進火中。火焰會明顯竄升，光照半徑暫時擴大，並爆發出一陣火花。 - 練劍：起身、拔劍，完成流暢的三段式攻擊／格擋動作，最後回到戰鬥防禦姿勢。 - 遙望遠方：走到空地邊緣，將劍插入地面，在披風飄動的同時凝視黑暗深處。 - 睡覺：躺在火堆旁的睡墊上；帶動畫效果的像素「Z z z」粒子從頭盔上方飄起。 - 烤肉：拿著串有食物的木棍在火焰上方烘烤，並散發細微的程序化煙霧／蒸氣粒子。 ### 4. 攝影機系統 提供預設攝影機切換功能，並以平滑的轉場插值（對位置與目標點進行 lerp）： - 溫馨特寫：聚焦騎士與火光的中景。 - 等角 RPG：以經典的高位 45 度戰術視角俯瞰空地。 - 電影感地面視角：以低角度戲劇性地向上拍攝騎士，背景是繁星天空與松樹樹冠。 - 自由環繞：無縫切換至標準 OrbitControls，以便互動檢視。 ### 5. UI 與音效 - UI 風格：採用復古 8 位元／16 位元 RPG HUD 版面，以半透明深色框架、像素化邊框，以及嵌入的 Google Font（例如 'Press Start 2P'）構成。 - 底部面板：提供可觸發各個騎士狀態的互動式動作按鈕。 - 右上方面板：提供切換攝影機角度的按鈕。 - 木柴計數器：追蹤已添加的木柴數量與目前的火焰強度。 - 音效（Web Audio API）：程序化合成的火焰劈啪聲與夜間微風／蟲鳴環境音，並提供靜音／取消靜音切換按鈕。 ### 6. 技術規格 - 單一、自包含的 index.html 檔案。 - 使用透過 CDN 載入的 ES Modules（https://t.co/W8o3SZwkCj 或 unpkg）。 - 模組化且附有完善註解的程式碼結構（initScene、buildEnvironment、buildKnight、buildCampfire、setupUI、setupAudio、animate）。 - 完整支援響應式視窗大小調整處理常式，更新攝影機長寬比與像素化後製通道的解析度。