用 Vue + Three.js 做了个零代码 3D 特效生成器，AE 可以卸载了厌倦了 AE 的学习成本？我用 Vue

前言：一个让我抓狂的日常

去年帮一个朋友做产品发布会的 PPT，他要求片头要有那种科技感十足的粒子光柱动效。

我 PS 会用，Figma 能用，但 AE？打开那一刻我就放弃了——光是理解合成、时间轴、表达式这些概念就够喝一壶的，更别提还要导出透明背景。

最后他花了 800 块找了个外包，就做了 3 秒钟的片头。

我当时就想：这件事不应该这么难。

于是我做了「特效魔方」

特效魔方 是一个纯浏览器运行的 3D 特效生成工具，核心目标就一个：

让不会 AE 的人，也能在 5 分钟内生成一个专业级的 3D 特效，并导出透明背景 GIF/视频。

不需要安装软件，打开浏览器就能用：

👉 www.ai4learn.cn/effectself/

技术选型

整个项目是纯前端，主要技术栈：

Vue 3 + TypeScript    # 响应式 UI
Three.js              # 3D 渲染引擎
Element Plus          # UI 组件（按需加载）
FFmpeg.wasm           # 视频导出
gif.js                # 透明 GIF 导出
Vite                  # 构建工具

为什么选 Three.js 而不是 Babylon.js？主要是生态更大、资料更多，作为特效工具够用了。

最难搞的部分：透明背景导出

这是我踩坑最深的地方。

普通的 GIF 不支持半透明——只有全透明或不透明两种状态。如果直接截取 Canvas 帧，边缘会有难看的锯齿。

最终方案是用 gif.js + color key 抠图：把黑色背景设为透明色，再配合 Three.js 的 renderer.setClearColor(0x000000, 0) 渲染到离屏 Canvas：

const gif = new GIF({
  workers: 4,
  quality: 10,
  transparent: 0x000000  // 以纯黑作为透明色
})

renderer.setClearColor(0x000000, 0)
scene.background = null

// 逐帧捕获
for (let i = 0; i < frameCount; i++) {
  renderer.render(scene, camera)
  gif.addFrame(renderer.domElement, { copy: true, delay: 1000 / fps })
}

效果：导出的 GIF 放到任何背景上都不会有白边。

核心设计：原子化组件系统

市面上大多数特效工具是「预设导出」模式，选一个模板、改改颜色就结束了，灵活性很低。

我想要的是乐高积木式的组合方式：每种视觉元素都是一个独立的原子组件，可以自由叠加。

目前内置了 45+ 个原子组件，分为四大类：

分类	组件示例
粒子系	粒子场、粒子流、星尘
光效系	光柱、光圈、光晕、泛光
几何系	能量环、网格、扫描线
动画系	旋转、浮动、脉冲、呼吸

组合示例：粒子场 + 光柱 + 能量环 + 旋转动画 = 科技感光柱特效，全程拖拽，实时预览。

粒子场组件特效