沉浸式 3D 稻田網站

建立一個可在瀏覽器中執行的沉浸式 3D 稻田網站，主題為： 「一片綠意海洋／風吹過稻田。」 完成程式碼、安裝必要的相依套件並啟動預覽。不要只停留在提案或實作計畫。 1. 視覺方向 整體氛圍應自然、寧靜且精緻，像是一個具備一致藝術指導的互動式景觀網站。 場景應包含： 前景：清楚可辨識的細長葉片、彎曲莖稈，以及少量下垂的稻穗。 中景：向遠方延伸的連續稻田，具備足夠密度，且株距自然變化。 背景：不規則的樹線、層疊的低矮丘陵，以及細微的大氣透視效果。 天空：柔和的灰藍色調、細微的雲層變化，以及自然的地平線過渡。 將預設攝影機放置在略高於稻穗的位置，朝著遠方丘陵橫向眺望整片稻田。 天空約佔畫面的三分之一，構圖應以稻田為主。 植被顏色以深綠、橄欖綠和黃綠色為主。避免使用螢光綠。 自然地改變稻株的高度、朝向、彎曲程度與顏色。 2. 動畫需求 風必須呈現持續橫向穿過田野的波浪： 讓根部大致固定，並使越靠近葉尖和稻穗的位置產生越強的位移。 同一區域的植株應協調移動，同時保留個體差異。 結合緩慢的大尺度風浪與細微的局部擾動。 避免所有植株完全同步搖擺。避免平移整株植物，也不要讓葉片閃爍。 使用柔和的預設微風，長時間觀看時仍應舒適。 3. 互動需求 提供確實會影響場景的簡易控制項： 風速滑桿：平順調整風動畫的強度與速度。 光照模式：早晨、午後和黃金時刻。同步調整天空、光線方向、色溫與霧的顏色。 視角模式：開闊田野與稻田之間，並提供平順的攝影機轉場。 暫停／繼續：暫停並繼續環境動畫。 滑鼠移動可以產生非常細微的攝影機回應，但不應造成暈眩。 預設情況下，不要讓攝影機持續旋轉大幅度的角度。 4. 介面設計 使用全螢幕場景，並在上方疊加介面： 左上角：小型 VERDANT 字標。 左下角：襯線標題「一片綠意海洋」。 標題下方放置較小的副標「無須做任何事，只要隨風而行。」 右下角：小巧、半透明的深綠色控制面板。 確保文字清晰易讀，保留充裕間距，並避免控制項遮擋主要景觀。 在窄螢幕上也必須能使用控制項，且不可互相重疊。 5. 技術與效能 使用 Three.js。若已有現成專案，請保留其建置環境。 使用實例化和 GPU 頂點動畫，以處理大量植被。 避免為每株植物建立獨立的繪製物件，也不要在每一幀由 CPU 更新所有植株。 隨距離增加降低植被細節，並設定合理的像素比上限。 優先使用程序化幾何與材質，以確保資產載入可靠。 場景必須即時算圖。不要以完整景觀圖片或影片作為主要場景。 模型名稱與比較標籤會在後製階段加入；不要將它們放入場景。 6. 完成標準 完成實作後，使用可用的瀏覽器工具確認： 初始視圖能正確算圖，且沒有明顯的主控台錯誤。 每個控制項都確實會影響場景。 前景、中景和背景具有可辨識的深度與層次。 稻株不只是簡單直立的綠線。 風的運動持續且自然，不會出現明顯的規律性重複。 攝影機轉場平順，介面在窄螢幕上仍可使用。 若無法執行某項檢查，請清楚說明。 最後提供啟動說明，以及實際完成的功能摘要。