v5.0 版本发布！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

• 官方支持 Nuxt 4
• 提供全新 TresJS Devtools，支持：
  • 场景图可视化
  • 实时属性编辑
  • FPS、内存、绘制调用监控

npx nuxi@latest module add tresjs

7. 生态系统同步升级

• @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 的“完全体”

写在最后

从最初的一个**“小而美”**的实验性项目，到如今 功能完备、架构现代、生态丰富的 3D 框架，TresJS 完成了一次华丽的蜕变。

如果你是 Vue 开发者，又对 3D Web 开发感兴趣，那么 TresJS v5.0 绝对值得你一试！

立即体验：

npx create-tres my-tres-project

官方博客：tresjs.org/blog/tresjs…
‍ GitHub：github.com/Tresjs/tres