數位魚缸（3D Aquarium）

數位魚缸（3D Aquarium）

2026/4/27

數位魚缸

一個用 React Three Fiber 打造的 3D 海底魚缸。深藍色的海底、慢慢游動的魚群、持續上升的氣泡，魚和造景的數量都可以自己調整。

🛠️ 技術架構

框架： Next.js + TypeScript 3D： three.js + React Three Fiber + drei 模型： 金魚、斑馬魚、河豚三種 GLB 模型

✨ 核心特色

  • 生態配比：三種魚各自可以調整 0～10 隻
  • 造景：用滑桿增減石頭與水草，位置預先設計，不會破壞構圖
  • 獨立游動：每條魚有自己的速度、擺動節奏與邊界轉向
  • 穩定性：固定解析度倍率、關閉反鋸齒、簡化陰影，避免 WebGL 白屏
Live Demo →GitHub Source →

本專案的相關開發日誌 / 文章

數位魚缸：用 React Three Fiber 打造可以自己佈置的 3D 海底世界

2026/4/27

深藍海底、獨立游動的魚群與上升的氣泡：魚和造景都能即時調整，並透過降低 GPU 負擔避免 WebGL 白屏。