Max Chu打開我的網站首頁，會有一條龍從遠處飛進來、降落在鏡頭前。這不是影片，是用 three.js 即時渲染的 3D 模型。在 React 專案裡，我用 React Three Fiber（R3F）加上 @react-three/drei 來做，宣告式的寫法讓 3D 場景跟其他 React 元件一樣好管理。
模型減肥：32MB 到 1.8MB
原始的龍模型有 32MB，這在網頁上完全不能用——光下載就要好幾秒，行動網路更不用說。透過幾何壓縮、貼圖降解析度與動畫資料精簡，最後壓到約 1.8MB，視覺上幾乎無損。模型體積是 3D 網頁的第一道效能關卡，先把資產處理好，再談渲染優化。
飛行路徑與動畫銜接
龍的進場是兩段貝茲路徑：從遠處起飛、經過一個中繼點、最後降落在鏡頭前方。到位之後把 flying 動畫 crossfade 到 idle，龍就停在原地輕輕擺動。路徑會依裝置調整——手機畫面窄、直向構圖容易讓龍貼到文字，所以手機版整段軌跡抬高，落點不變。
尊重使用者偏好
不是每個人都想看到會動的東西。我用 prefers-reduced-motion 來判斷：使用者若在系統設定要求減少動態效果，整個 3D 場景就完全不載入——不只是停止動畫，是連模型與 WebGL context 都不建立，把效能和流量都還給使用者。
靜態匯出的注意事項
WebGL 不能在 server 端渲染，所以 R3F 的畫布必須用 next/dynamic 搭配 ssr: false 動態載入。畫布本身鋪在 hero 背景、設 pointer-events: none，內容層再以 z-index 蓋上去，3D 就純粹是視覺層，不干擾任何互動。
3D 不是炫技，是品牌記憶點。控制好資產體積、尊重使用者偏好、做好分層，它可以既華麗又不拖慢網站。