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 的"完全体"

维度	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

📖 官方博客：tresjs.org/blog/tresjs...

🧑‍💻 GitHub：github.com/Tresjs/tres