Anime.js 4.5 接入 Three.js：从适配器加载到第一个可验证的 3D 动画

Anime.js v4.5.0 于 2026-06-22 发布。它新增了 registerAdapter()，并内置了 Three.js 适配器。变化的重点不是让 Anime.js 接管 WebGL：Three.js 仍负责场景、相机、材质和渲染；Anime.js 负责在时间轴上驱动这些对象的可动画值。

先确认适配器真的被加载

Three.js adapter 是副作用导入，不能只安装包却忘记这行。官方文档给出的入口是 animejs/adapters/three。先用一个已经加入场景的 mesh 做位移和旋转验证，比立刻迁移整段演出更容易定位问题。

import { animate } from 'animejs';
import * as THREE from 'three';
import 'animejs/adapters/three';

const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

animate(mesh, {
  x: 1.2,
  rotateY: 180,
  duration: 900,
  ease: 'inOutSine'
});

这是官方文档映射下的最小验证：x 写入 mesh.position.x，rotateY 对应旋转 Y 轴，适配器以度数处理这类旋转名。渲染循环仍须由应用维持；没有 renderer.render(scene, camera)，数值即使变化，画面也不会更新。

适配器减少的是目标拆分

过去一个镜头常要分别面向 mesh.position、mesh.rotation、材质和 uniform 建多个 tween。适配器把常见嵌套字段暴露成 mesh 上可读的动画名：位置、旋转、缩放、材质的 opacity 和 color，以及文档列出的材质和 shader uniform 路径。官方支持范围还包括 Object3D、材质、灯光、相机、音频节点、TSL 的 UniformNode 与实例化网格。

这不等于每个属性都应从父 mesh 写入。共享材质是一个重要例外：对一个 mesh 使用材质简写，会更新同一材质实例的其他 mesh。需要独立效果时，先为该对象克隆材质。若动画透明度，也要预先设置 material.transparent = true，否则 Three.js 可能仍按不透明材质绘制。

3D stagger 的价值在于可复现的编排

v4.5.0 将 stagger 的网格概念扩到三维：可用 { x, y, z } 坐标，也可显式给出 grid: [columns, rows, depth]；from 可以是归一化的三维坐标，axis 新增 'z'。这适合立方体阵列、粒子般的实例阵列或分层卡片，而不是只为“更炫”而堆对象。

新参数 jitter 可给 stagger 值加入随机偏移，seed 则让 jitter 与 from: 'random' 可复现。把 seed 固定在演示、截图测试和回归测试中，团队才能讨论同一帧的同一顺序；想要自然差异时再有意更换种子。实例网格应按官方方式从适配器取得每实例代理，再对代理做 stagger，而不是误以为一个 InstancedMesh 会自动产生独立运动。

发布前的检查清单

• 确认打包器只解析到一个 three 实例；重复副本会让依赖 instanceof 的适配器无法识别目标。
• 用暂停、前后 seek 和重复循环测试时间线。v4.5.0 修复了倒向 seek、延迟和 keyframe 的多项旧问题，但业务镜头仍应实测。
• 在窗口 resize 后更新相机比例和 renderer 尺寸；动画库不会替应用做布局管理。
• 尊重 prefers-reduced-motion，并在低端移动设备上观察帧率、发热和电量，而不是只在桌面显卡上验收。

模型加载、纹理压缩、draw call、场景设计、无障碍、浏览器兼容性和移动 GPU 预算，都不由适配器解决。把它定位为“让已有 Three.js 对象更容易接入 Anime.js 动画系统”的工具，实施范围才会清晰。完整属性表与限制应以官方 Three.js adapter 文档为准。