日式櫻花山谷互動式 3D 景觀網頁

請直接製作一個可在瀏覽器中即時互動的高完成度 3D 景觀網頁。 主題：日式櫻花山谷。 使用 HTML、CSS、JavaScript 實作。不要生成圖片，不要只提供設計方案， 不要用一張背景圖加上視差效果冒充 3D。我要的是實際可執行、可探索的完成品。 【一、作品定位】 這是一片完整、連續、具有遠近層次的山谷景觀， 不是孤立的小擺件、浮空島、帶底座的沙盤，也不是單純的技術展示。 風格為現代精緻體素／voxel art： 保留立方體幾何的造型語言，但畫面應具備高解析度、抗鋸齒與細膩的光影。 不要做成復古低解析度像素風，不要用粗大的積木堆砌，也不要在畫面上套用像素濾鏡。 視覺品質優先。寧可少幾個功能，也不要犧牲構圖、材質與光照。 【二、參考圖的使用方式】 如果附有參考圖，請先理解其構圖層次、尺度、光線與色彩關係。 僅借鑑氛圍與視覺語言，重新設計場景， 不要照搬建築、樹木、山體與道路的位置，不要 1:1 複製。 參考圖不是網頁中的背景素材。場景本身必須由真正的 3D 幾何構成。 【三、場景構圖】 預設開啟時就應呈現一幅完整、吸引人的畫面， 不需要使用者先旋轉鏡頭才能找到好看的角度。 採用透視相機，而不是沙盤式等距俯視相機。 畫面要有明確的前景、中景與遠景： 前景： 一株具有存在感的古老櫻花樹，搭配岩石、草木、石燈籠與少量落花， 形成畫面邊緣的自然框景，但不能擋住河流、橋樑與主要建築。 中景： 一條蜿蜒的河流引導視線深入畫面，紅色木橋橫跨河面； 村落、茶屋、神社與小徑順著地勢分布，建築之間要有真實的通行關係。 地面要有起伏、岸線與自然的地形過渡，不是將模型均勻擺放在平面上。 遠景： 山坡上的多層塔、不同距離的森林與山脊，以及遠處的雪山。 透過尺度變化、遮擋、冷暖變化與空氣透視來呈現距離， 而不是只把遠處的物體縮小。 不要把所有元素均勻鋪滿。需要有主次、疏密、留白與清楚的視覺焦點。 【四、造型與畫面品質】 櫻花樹： 樹幹要有轉折、分岔與根部，樹冠由不規則的花簇組成， 要有間隙、厚薄變化與可見的枝條。不要做成幾個規則球體或方塊團。 建築： 屋頂要有層疊瓦片、挑簷、樑柱與窗櫺； 不同建築要有各自的用途、體量與高度差異，不要用同一棟房子複製鋪滿山谷。 地形： 岸邊要有濕潤的石塊、草叢與植被的自然過渡。 避免過於規律的階梯、重複條紋、棋盤格與明顯的程序化生成網格。 水面： 必須能反射周圍景物，具有適度的波紋、深淺變化與岸邊過渡。 盡量使用場景的實際反射；需要降低效能時，也應維持視覺上的可信度。 不要用閃爍雜訊、強烈扭曲或整片藍色平面來代替水面。 細節： 可以加入少量錦鯉、落花、螢火蟲、瀑布與遠處飛鳥， 但都應服務於氛圍，不能讓畫面顯得雜亂。 不要為了宣稱模型數量而堆砌細節。 【五、色彩與氛圍】 預設為藍調時刻： 偏冷的山谷與遠山、柔和的粉色櫻花，以及溫暖但不過曝的燈籠光與窗光。 暖光集中在人員活動的區域，不要把整個環境染成橘色。 需要柔和的陰影、物體接觸處的明暗變化、合理的曝光、 克制的泛光、抗鋸齒，以及具有距離層次的薄霧。 避免發白、灰濛、過度飽和、滿版濃霧、過曝燈光與明顯鋸齒。 方塊幾何可以清晰，但渲染本身不能粗糙。 另外提供「清晨」與「雨中」兩種氛圍； 切換時應同步改變天空、環境光、霧氣與局部效果， 不能只修改背景顏色。 【六、互動與介面】 提供四個經過設計的鏡頭： 山谷全景、河畔低機位、寺廟小徑與山坡俯瞰。 切換時應平順，每個鏡頭都需要有獨立的構圖價值。 基本互動： 用滑鼠拖曳觀察、滾輪縮放或前進；觸控螢幕支援拖曳與雙指縮放。 提供重設視角、隱藏介面與儲存目前畫面的功能。 可選的增強功能： 自由探索、緩慢鏡頭巡遊與環境音。 環境音預設關閉，只在使用者主動點擊後播放。 額外功能不能影響預設畫面的完成度。 介面要克制且具設計感，以景觀為主。 標題與控制列放在邊緣，不要遮擋視覺焦點。 桌機與手機上都不能出現按鈕超出畫面、文字重疊或無法操作的問題。 【七、工程與效能】 允許使用 Three.js／WebGL，以及版本固定且彼此相容的 CDN 依賴。 優先使用成熟的渲染能力，不要為了「零依賴」而重寫整套引擎。 自行撰寫的 HTML、CSS、JavaScript 盡量整理在單一 HTML 檔案中。 景物由程序化幾何與材質生成，不依賴外部圖片或 3D 模型資源。 重複物件採用適合的批次或實例化繪製方式； 合理控制細分、陰影、反射與渲染解析度。 提供高畫質與輕量模式，手機預設使用較輕量的設定。 不要靠無限增加體素數量來換取細節。 加入載入提示、WebGL 不支援時的提示與必要的錯誤處理。 未開啟聲音時不要自動播放；尊重系統的減少動態效果偏好。 【八、交付前驗收】 不要寫完程式碼就立即交付。 如果目前環境支援在瀏覽器中執行與截圖，請先實際開啟頁面， 檢查預設鏡頭、四個視角、氛圍切換，以及桌機與手機版面， 再根據截圖修正明顯的構圖、曝光、遮擋與渲染問題。 重點檢查： 是否存在空白畫面、載入失敗或主控台錯誤； 是否有穿模、閃爍、陰影條紋、過曝或水面異常； 預設畫面是否真正像完整景觀，而不是小型沙盤； 功能按鈕是否確實可用，行動版是否超出畫面。 可以使用瀏覽器截圖進行驗收，但不要呼叫圖像生成工具。 未完成的測試要如實說明，不要宣稱已完成驗證。 最終交付： 1. 實際存在且可以開啟的 HTML 檔案，或目前環境支援的互動式預覽。 2. 如果可以截圖，附上一張真實瀏覽器渲染截圖。 3. 簡短說明操作方式與必要的執行條件。 請直接完成製作；非關鍵細節自行做出一致的設計決策， 不要把可以自行解決的實作問題反覆交給我決定。