综合 / 开发工具 · 2026-10-29 15:36 · 1 阅读 · 0 赞
Anime.js 4.5 内置 Three.js Adapter：3D 动画与 2D 动效统一 API
Anime.js v4.5.0 发布内置 Three.js Adapter，可直接将 Mesh、Camera、Material 作为动画目标，与 2D 动画共享时间轴、Stagger 和 Scroll 能力，简化 WebGL 动效开发。
做 WebGL 落地页的同学多半踩过这个坑：Three.js 负责渲染，动画却要自己写 requestAnimationFrame、手动插值 position / rotation / material.uniforms，或者把 mesh.position 拆成三条线塞进时间轴——代码散、难维护，和页面上的 DOM 动画也接不上。
2026 年 6 月，Anime.js v4.5.0[1] 正式发布内置 Three.js Adapter。现在可以把 Mesh、Camera、Material 直接丢进 animate()，和动 SVG、动 CSS 一样顺手。这才是原文说的「前端 3D 动画王炸组合」——不是新框架，而是两个成熟库终于官方牵手。
为什么值得关注
| 维度 | 以前（手动拼） | 现在（官方 Adapter） |
|---|---|---|
| 写法 | targets: mesh.position + 另写 mesh.rotation | animate(mesh, { x, rotateY, scale }) |
| 角度 | 自己换算弧度/角度 | Adapter 自动处理 |
| 材质/Uniform | 在 update 里改 uniform.value | 属性名直接映射到材质字段 |
| 与 UI 联动 | 两套动画系统 | 同一套 Timeline / Stagger / Scroll |
Anime.js 本体 gzip 后约 24.5 KB（按需引入更小），Three.js 仍是可选 peer dependency（0.150.0+ 均可）。对官网、产品 3D 展示、数据可视化大屏这类「要炫但不要重引擎」的场景，组合很合适。
四大升级，直击 3D 动效痛点
1. 官方 Three.js Adapter，一行 import 启用
侧载适配器后，Object3D、灯光、相机、材质、UniformNode（TSL）、实例化网格都能作为动画目标：
import { animate, createTimer } from 'animejs';
import * as THREE from 'three';
import 'animejs/adapters/three';
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
animate(mesh, {
rotateY: { to: 360, duration: 3000 },
x: { to: 2, duration: 1500 },
ease: 'inOutQuad',
loop: true,
});
// 与渲染循环同步
createTimer({
onUpdate: () => renderer.render(scene, camera),
});
文档：Three.js adapter[2]
2. 属性扁平化，告别嵌套对象
Adapter 把 mesh.position.x、mesh.rotation.y、mesh.material.opacity 等折叠成 x、rotateY、opacity。颜色支持 CSS 写法，旋转统一用角度读写，不用再心算 Math.PI。
3. 3D Stagger：粒子、矩阵、群控一次搞定
v4.5 的 Stagger 支持三维网格 grid: [列, 行, 深]，配合 axis: 'z'、jitter、seed，适合做方块墙、点云展开、展厅阵列入场——以前要写嵌套循环，现在声明式配置即可。
import { stagger, utils } from 'animejs';
import { getInstances } from 'animejs/adapters/three';
const instances = getInstances(mesh);
utils.set(instances, {
x: stagger([-5, 5], { grid: [10, 10, 10], axis: 'x' }),
y: stagger([-5, 5], { grid: [10, 10, 10], axis: 'y' }),
z: stagger([-5, 5], { grid: [10, 10, 10], axis: 'z' }),
});
4. 与 2D 动画同一套时间轴
createTimeline()、onScroll、弹簧缓动、Draggable 等 Anime.js 4 能力，可以直接编排「页面标题飞入 → 相机推进 → 模型旋转 → UI 面板淡入」。营销页、发布会 H5、作品集站点不用再维护 GSAP + 自写 Tween 两套逻辑。
实测：从「能跑」到「好用」
社区里早期集成通常是 anime({ targets: cube.rotation, y: Math.PI * 2 })，加载 GLTF 后还经常遇到 undefined——模型没进场景就开时间轴，或该绑 Group 却绑了子节点。官方 Adapter 没有消灭异步加载问题，但目标写法统一后，调试成本明显下降。
实际项目里比较顺手的组合：
•产品 3D 展示：相机 createTimeline 多机位，模型 rotateY + 材质 color 高亮部件 •滚动叙事页：onScroll 驱动相机 z 轴，DOM 文案与 3D 场景同一条时间轴 •Shader 艺术站：UniformNode、材质参数直接参与动画，少写 update 回调 •轻量互动：createAnimatable 跟手移动 + Three.js 射线拾取
复杂骨骼动画、物理模拟、大规模场景漫游——仍建议用 three.js AnimationMixer 或专业 DCC 流程；Anime.js 的定位是补位「程序化动效 + 页面编排」，不是替代 glTF 动画剪辑。
快速上手（3 步）
1. 安装
npm i animejs three
2. 启用 Adapter 并写第一个动画（见上文代码块）
3. 用 createTimer 或 renderer.setAnimationLoop 保证每帧渲染
**加载 GLTF 时务必在 loader.load / loadAsync 完成后再 animate()，必要时包一层 Group 再作为 targets。
视频 / 动图参考
•Anime.js 官方站：https://animejs.com/[3] （首页有 SVG、Stagger、Timeline 等交互 Demo，可先熟悉 API 再接入 Three.js） •Three.js 入门：https://threejs.org/[4] （官方 Examples 含大量 WebGL 场景） •v4.5 Release Note：https://github.com/juliangarnier/anime/releases/tag/v4.5.0[5]
选型建议（实话版）
适合上 Anime.js + Three.js：
•品牌官网、电商 3D 详情、创意 coding 作品 •需要 DOM + WebGL 统一动效编排 •团队已熟悉 Anime.js，不想引入更重方案
不必强上：
•纯游戏级 3D、复杂角色动画 → 考虑 PlayCanvas / Unity WebGL •只要简单旋转展示 → Three.js 自带 AnimationMixer 可能更轻 •极致包体 → 评估是否值得同时加载两库
常见问题
| 现象 | 原因 | 处理 |
|---|---|---|
| 画面不动 | 没触发 renderer.render | 用 createTimer 或 setAnimationLoop |
| GLTF 不跟手 | 异步未就绪 | await loadAsync 后再 animate |
| 旋转角度怪 | 旧习惯写弧度 | Adapter 下旋转用角度 |
| 包体变大 | 全量引入 | 按模块 import { animate } from 'animejs' |
最后
Anime.js 4.5 的意义，是把 Three.js 从「只能写渲染循环」拉进现代前端动画工作流。你仍然需要懂场景、相机、光照，但镜头推进、阵列入场、材质过渡这些高频需求，终于可以用同一套 API 和 2D 动效一起编排。
如果你正在做 2026 年的 3D 落地页或互动展览页，这个组合值得花半天接入试一下——改动小，收益直观。
参考链接
•Anime.js 文档：https://animejs.com/documentation/[6] •Three.js Adapter：https://animejs.com/documentation/adapters/threejs-adapter/[7] •v4.5.0 Release：https://github.com/juliangarnier/anime/releases/tag/v4.5.0[8] •Three.js 官网：https://threejs.org/[9]