从直接改 Three.js 属性到 Anime.js 4.5：新手可走通的 3D 动画项目流程

Three.js 项目开始有入场、聚焦、展开和退场等多个动作时，手写每帧属性变化容易把时间、缓动和状态重置分散在 render loop 里。Anime.js v4.5.0 提供的 Three.js adapter 适合此时引入：Three.js 继续画场景，Anime.js 组织对象值如何随时间变化。

先判断是否真的需要它

只有一个持续旋转的模型，用 mesh.rotation.y += delta 往往更直白。需要多个对象按顺序开始、支持暂停或 seek、让相机和灯光配合镜头，或者要给实例阵列安排空间延迟时，时间轴式动画开始更有价值。adapter 不是 WebGL 入门替代品：相机、光照、模型加载与基础 render loop 应先能独立工作。

从一个对象迁移

保留原来的 Three.js 创建代码，在动画模块导入 Anime.js 和适配器。官方入口是副作用导入：

import { animate } from 'animejs';
import 'animejs/adapters/three';

animate(mesh, {
  y: 0.8,
  rotateY: 90,
  duration: 700,
  ease: 'outQuad'
});

适配器将常用变换映射到 Object3D：x/y/z 对应 position，rotateX/Y/Z 对应 rotation，旋转名用度数。这段代码只描述值的变化；你的 requestAnimationFrame 仍需调用 renderer。第一次成功标准很简单：控制台没有模块错误、对象可见、数值改变、画面也在刷新。

把直接属性动画逐步换掉

不要一次删除旧逻辑。先把一个按钮触发的入场迁走，记录开始和结束状态；再把相机或灯光添加到同一时间安排。材质属性可以由 adapter 驱动，但共享材质会同步影响所有引用它的对象。若一个物体需要单独变色或淡出，先 clone 材质；透明度淡出还必须设置 transparent。

需要“方块从中心向外展开”时，v4.5.0 的 3D stagger 可描述 grid: [columns, rows, depth]、z 轴和三维 origin。对于 InstancedMesh，按官方实例网格文档取得每个实例代理后再动画。先用很小的网格验证顺序；效果正确后才扩展实例数。

三类常见故障

• 没有动：检查是否导入 animejs/adapters/three，是否真的把 mesh 传给 animate()，以及每帧是否 render。
• 透明度没有视觉变化：确认材质启用了 transparent，并核查它是不是被多个 mesh 共享。
• adapter 像是忽略目标：检查依赖树中是否存在两个 Three.js 副本；官方文档说明重复副本会破坏类型识别。

性能不是最后才看的指标

动画值的写入只是总帧时间的一部分。大模型、过多阴影、昂贵的后处理、过高的 device pixel ratio 和大量实例都可能成为瓶颈。分别在桌面与移动设备测量帧率，resize 后重新配置相机和 renderer，并给 prefers-reduced-motion 用户提供静态或低动态版本。Anime.js 不能自动解决模型加载、GPU 限制、浏览器兼容性或无障碍问题。

最后再测试暂停、重复、向前和向后 seek。v4.5.0 包含与循环、时间线、keyframe 和引擎调度有关的修复，但项目仍要以自己的镜头、路由切换和窗口尺寸为准验收。官方适配器总览是确认支持范围的可靠起点。