Vue + WebGPU！超越 Threejs！
前端开发爱好者 · 软件开发
原创 认真努力的小四子 2026-11-06 08:33 江苏 大家好，我是 xy 。 提到 Web 3D ，大多数前端开发者第一反应还是 Three.js 。 它足够强，但真要做一个完整的 3D 项目，开发体验并不算轻松。场景、相机、渲染器、材质、模型加载、事件系统，全都需要自己维护。 对于习惯了 Vue 的开发者来说，这套写法多少有点“跳出舒适区”。 而 TresJS 做的事情很简单： 把 Three.js 装进 Vue 的开发方式里。 现在，随着 TresJS v5 发布，这个项目又往前迈了一大步。 这次升级不只是补几个 API，而是直接把 WebGPU、CLI、响应式资源加载、事件系统、Nuxt 4、Devtools 一口气补齐。 尤其是 WebGPU 的加入，让 TresJS 的上限明显被拉高了。 用 Vue 组件直接写 3D TresJS 基于 Vue 3 的自定义渲染能力，把 Three.js 对象映射成 Vue 组件。 所以一个最基础的 3D 场景，可以直接这样写： < TresCanvas > < TresPerspectiveCamera :position = "[3, 3, 3]" /> < TresMesh > < TresBoxGeometry /> < TresMeshBasicMaterial color = "hotpink" /> </ TresMesh > </ TresCanvas > 如果你熟悉 Vue，这套写法几乎不需要重新适应。 TresMesh 对应 THREE.Mesh ， TresBoxGeometry 对应 THREE.BoxGeometry 。 Vue 的 组件化、响应式、Composition API 依然可以正常使用，底层还是 Three.js。 所以 TresJS 的价值，其实就是： 让 Vue 开发者可以用自己熟悉的方式进入 3D 世界。 v5 最大升级：WebGPU TresJS v5 这次最抢眼的变化，是开始支持 WebGPU 。 通过 Three.js 的 WebGPURenderer ，TresJS 已经可以把整个渲染链路接到下一代 Web 图形 API 上。 大致可以理解成： Vue → TresJS → Three.js → WebGPU 这意味着未来可以更加自然地使用： Compute Shader GPU 粒子计算 大规模实例渲染 Shader 特效 实时后处理 GPGPU 比如初始化一个 WebGPU Renderer： import { WebGPURenderer } from 'three/webgpu' const createRenderer = ( { canvas } ) => { return new WebGPURenderer({ canvas: canvas.value, antialias: true , }) } 当然，目前这部分能力依然处于实验阶段。 但从方向上看已经很清楚了： TresJS 正在跟着 Three.js 一起进入 WebGPU 时代。 官方 Lab 已经开始上强度了 如果只看文档，很难感受到 TresJS 现在能做到什么程度。 直接打开官方的 TresJS Lab 会直观很多。 里面已经有大量完整实验，包括： 粒子、Shader、WebGPU、物理引擎、3D 汽车、游戏、后处理、VFX。 其中比较有代表性的一个案例是 Plexus Particles 。 它直接涉及： WebGPU 、 TSL 、 Shader 、 Particles 、 Compute 、 VFX 已经属于比较典型的 GPU 实时视觉效果了。 另外还有 Porsche 911 Car Showcase 。 完整的 3D 汽车展示、灯光、材质、视角交互都已经做出来了。 这种案例其实已经很接近真实业务场景： 汽车官网、3D 商品、电商展示、数字展厅、品牌官网。 再往后，还有基于 Rapier 的物理案例，比如车辆、篮球、碰撞、刚体模拟。 所以现在的 TresJS，已经不只是用来做几个旋转模型。 3D 交互、游戏、物理、GPU 特效，都已经进入它的能力范围。 创建项目也更简单了 v5 还推出了全新的 create-tres 。 现在创建一个 TresJS 项目，直接： npx create-tres my-3d-app 脚手架可以选择： Vue + Vite Nuxt TypeScript Cientos Post-processing 其他 TresJS 生态能力 以前做 3D 项目，光初始化环境就容易劝退一批人。 现在体验已经越来越接近普通 Vue 项目。 Composables 终于更像 Vue 了 v5 还重构了不少 Composa