three.js 编辑器的动画能力概览本文围绕three.js 编辑器一款基于 Three.js 的 AI 驱动可视化低代码编辑器展开。- 在线预览 https://z2586300277.github.io/threejs-editor/- GitHub 开源仓库 https://github.com/z2586300277/three-editor- 文档地址 https://z2586300277.github.io/three-editor/docs/dist动画是 3D 场景的灵魂也是低代码编辑器最难兼顾“易用性”与“表现力”的部分。three.js 编辑器没有只提供简单的旋转平移而是把模型动画、补间动画、顶点动画、时间线动画和路径动画等多种形态整合到一个统一的动画体系里让不同层次的用户都能找到合适的表达方式。模型内置动画GLB 一键播放对于从外部导入的 GLB/GLTF 模型three.js 编辑器会自动读取其中的animations数组。在右侧面板的动画列表中用户可以查看当前场景的所有动画片段并通过播放、暂停、重置按钮直接控制。底层通过modelCores.modelAnimationPlay创建THREE.AnimationMixer与AnimationAction支持播放速度、循环模式等参数的实时调节。“模型路径运动”组件进一步展示了编辑器对模型动画的扩展它不仅播放模型自带的骨骼动画还用THREE.CatmullRomCurve3生成随机路径让汽车在曲线上巡航车头始终朝向路径切线方向。模型动画与空间运动叠加创造出更生动的展示效果。补间动画GSAP 驱动three.js 编辑器内置了 GSAP 作为补间引擎。无论是相机视角飞行、对象位移旋转缩放还是材质属性渐变都可以通过createGsapAnimation与setGsapMeshAction实现平滑过渡。AI 助手也封装了animateMeshTransform动作允许用户用自然语言触发对象的补间动画例如“让立方体在 2 秒内移动到 (10,0,0) 并旋转 90 度”。顶点与几何动画对于需要拆解、形变、粒子化的效果three.js 编辑器提供了顶点级动画能力。“分解还原”组件把模型每个面的顶点数据备份到originPosition属性然后在每一帧根据贝塞尔曲线重新计算顶点位置实现模型像积木一样飞散再聚合的效果。这类动画直接操作 BufferGeometry性能可控视觉冲击力极强。时间线动画Theatre.js 集成当场景需要多对象、多属性、精确节奏的编排时three.js 编辑器集成了 Theatre.js 时间线。用户可以加载预先编辑好的动画 JSON编辑器会在启动时自动还原时间线并在右侧面板列出所有 Sheet。每个 Sheet 都可以独立播放、暂停、重置适合制作产品展示、建筑漫游、数据叙事等需要精确控制的影片级场景。逐帧更新与组件自驱动动画除了上述高层动画机制three.js 编辑器还提供了scene.addUpdateListener钩子。组件可以在每一帧更新自己的 uniform、位置、旋转或缩放例如“告警信标”的脉冲环扩散、“彩虹漩涡”的 Shader 时间 uniform、“极光”的顶点波动。这种自驱动动画与全局渲染循环解耦是特效组件最常用的动画模式。代码一瞥下面展示了“模型路径运动”组件中动画叠加的核心片段if (gltf.animations.length) {const mixer new THREE.AnimationMixer(gltf.scene); const action mixer.clipAction(gltf.animations[gltf.animations.length - 1]); action.play(); scene.addUpdateListener(() mixer.update(0.01)); }const curve new THREE.CatmullRomCurve3(points); let t 0; scene.addUpdateListener(() { t 0.0004; const point curve.getPointAt(t % 1); gltf.scene.position.copy(point); const pointNext curve.getPointAt((t 0.01) % 1); pointNext.add(group.position); gltf.scene.lookAt(pointNext); });从模型骨骼动画到顶点拆解从 GSAP 补间到 Theatre 时间线three.js 编辑器的动画能力覆盖了 3D 内容创作的主流需求。无论你是想做一个会跑的汽车、会呼吸的光柱还是一部精剪的三维短片都能在这里找到趁手的工具。