V5 強勢發布！Vue3 生態最強大的 3D 開發框架！
其實在很早之前，我就有分享過 TresJS 這個庫。
但當時的它功能相對單一，支持面也有限，很多想法只能“淺嘗輒止”，因此關注的人并不算多。
然而，就在前幾天，TresJS v5.0 正式發布，這一次，它帶著一系列重磅更新強勢歸來，徹底脫胎換骨，成為 Vue 3 生態中最值得關注的 3D 開發框架！
一、什么是 TresJS？
讓我們再來認識一下它吧！
TresJS = Three.js + Vue.js
它是一個基于 Vue 3 的聲明式 3D 場景構建框架，讓你可以用寫 Vue 組件的方式，輕松構建 Three.js 3D 場景，無需手動處理渲染器、相機、光照等繁瑣細節。
<TresCanvas>
<TresPerspectiveCamera :position="[3, 3, 3]" />
<TresMesh>
<TresBoxGeometry />
<TresMeshBasicMaterial color="hotpink" />
</TresMesh>
</TresCanvas>簡單、直觀、響應式，這就是 TresJS 的魅力。
二、TresJS v5.0 亮點一覽
1. 全新 CLI 工具：create-tres
再也不用自己搭環境了！一條命令，初始化完整項目：
npx create-tres my-3d-app支持：
- Vue + Vite 或 Nuxt 模板
- TypeScript / ESLint 配置
- 可選生態包（Cientos、Post-processing、Leches）
2. WebGPU 原生支持（實驗性）
TresJS 正式擁抱 WebGPU —— 下一代 Web 圖形 API：
- 更高性能、更低延遲
- 支持 GPU 計算著色器
- 自動回退至 WebGL，兼容舊瀏覽器
const createWebGPURenderer = (ctx) =>
new WebGPURenderer({ canvas: ctx.canvas, alpha: true })3. ESM-only 架構
徹底拋棄 UMD，全面擁抱現代標準：
- 更小的打包體積
- 更快的加載速度
- 更好的 tree-shaking 支持
?? 注意：舊項目需確保構建工具支持 ESM。
4. Composables 全面重構
過去的“工具函數”終于變成了真正的 Vue Composables，支持響應式狀態：
const { state, isLoading, progress } = useLoader(GLTFLoader, '/model.gltf')- 支持加載狀態、錯誤處理、進度追蹤
- 支持動態路徑切換
- 自動資源清理
5. 事件系統重構
基于 @pmndrs/pointer-events，全面標準化：
- 事件命名改為標準 DOM 格式（如 @pointerdown）
- 只觸發首個被拾取的物體，性能更佳
- 移除 useTresEventManager，推薦原生事件或父級處理
6. Nuxt 4 支持與全新 Devtools
(1) 官方支持 Nuxt 4
(2) 提供全新 TresJS Devtools，支持：
- 場景圖可視化
- 實時屬性編輯
- FPS、內存、繪制調用監控
npx nuxi@latest module add tresjs7. 生態系統同步升級
- @tresjs/cientos 整合更多工具（如 useTexture）
- 所有子包 API 風格統一
- 支持按需引入，模塊化更強
三、用 TresJS 能做出什么？—— 官方 Showcase 精選
以下作品100% 是官網案例，基于 TresJS 開發，可直接在線體驗！
Vite 2024 落地頁：
保時捷 911 汽車展示：
太空游戲：
3D 多功能場地：
更多案例持續更新中，想要獲取相關案例源碼，訪問 →
- https://lab.tresjs.org/
- https://tresjs.org/showcase
三、總結：TresJS v5.0，是 3D + Vue 的“完全體”
維度 | v5.0 提升 |
性能 | WebGPU 支持、ESM-only、事件優化 |
易用性 | CLI 工具、響應式 composables、標準化事件 |
可維護性 | 去除冗余 API、統一生態風格 |
擴展性 | Nuxt 4 支持、Devtools、模塊化架構 |
四、寫在最后
從最初的一個“小而美”的實驗性項目，到如今 功能完備、架構現代、生態豐富的 3D 框架，TresJS 完成了一次華麗的蛻變。
如果你是 Vue 開發者，又對 3D Web 開發感興趣，那么 TresJS v5.0 絕對值得你一試！
?? 立即體驗：
npx create-tres my-tres-project- 官方博客：https://tresjs.org/blog/tresjs-v5
- GitHub：https://github.com/Tresjs/tres
- 案例源碼：https://github.com/Tresjs/lab/tree/main/app/components
