V5 强势发布！Vue3 生态最强大的 3D 开发框架！

原创于 2025-09-29 13:47:58 发布 · 1k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#3d

就在前几天，TresJS v5.0 正式发布，这一次，它带着一系列重磅更新强势归来，彻底脱胎换骨，成为 Vue 3 生态中最值得关注的 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 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、模块化架构