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