在 Three.js 中使用 Spine 实现 2D 动画

导言

你是否看过米哈游团队为每个版本更新或一些活动所制作的网页活动？他的动画效果是爆炸的，引人注目的。在寻找过程中我一直在想米哈游是怎么实现的？于是我找到了米哈游平台前端团队所编写的「WebGL 动画工业化探索与实践」

今天有幸给大家分享一些米哈游前端在 WebGL 动画工业化上的探索和实践，内容的主角是名为 Fast Scene 的自研编辑器。它是一套易用且高效的用于开发前端富交互动画项目的解决方案。含 3D 场景、动画、Shader 蓝图、粒子的编辑器，市场，丰富的 API 与运行时组件，这三大模块可以帮助前端开发者们高效地制作出复杂动画表现形式的前端营销活动和小游戏，并降低 WebGL 入门的学习成本。

从米哈游中探索： 《原神》1.3版本-明霄升海平我从米哈游的原神1.3版本预告网页开始探索破案了，米哈游用的是Threejs + Spine + Vue的组合拳。

探索 Spine 和 Three.js

Spine： Spine 是由 Esoteric Software 开发的一款2D骨骼动画工具。它使用骨骼和插槽的概念，使得动画的创建和管理变得更加直观和高效。
Three.js： Three.js 是一款基于 JavaScript 的3D图形库，它简化了在Web上创建和展示3D图形的复杂性。Three.js 提供了许多工具和功能，使得在浏览器中呈现复杂的3D场景变得轻而易举。

整合 Spine 和 Three.js

Spine Three.js Runtime： 为了在 Three.js 中使用 Spine，可以使用 Spine 提供的 Three.js runtime。该 runtime 允许将 Spine 导出的数据轻松地集成到 Three.js 项目中。
加载 Spine 数据： 使用 Three.js 提供的加载器，可以加载 Spine 导出的 JSON 数据和纹理图集。

1
2
3
4
5
6
// Spine加载器示例代码
const loader = new THREE.SpineLoader();
loader.load('path/to/spine-data.json', (spineData) => {
  const spineMesh = new THREE.SpineMesh(spineData, new THREE.SpineMaterial());
  scene.add(spineMesh);
});

坑：

问题1：加载 Spine 数据失败
- 解决方案： 确保路径和文件名正确，查看控制台输出以获取更多信息。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
// 示例代码
const loader = new THREE.SpineLoader();
loader.load('path/to/spine-data.json', (spineData) => {
  if (!spineData) {
    console.error('Failed to load Spine data.');
    return;
  }
  const spineMesh = new THREE.SpineMesh(spineData, new THREE.SpineMaterial());
  scene.add(spineMesh);
});

真的十分的有必要来做这个容错，我在排查问题的时候就忘记了我已经给json改了名字了（

问题2：Spine有一些跨版本问题
- 解决方案： 我仍然没有什么进展
- 但我在写这篇博客的时候我在想能否通过高版本的Spine 运行时然后加载低版本的Spine文件！
- (试了，不好使 2024/4/5he补)

结论： Spine 和 Three.js 的结合为Web开发者提供了一个强大的工具，可以创造出生动、交互丰富的用户体验。通过合理的整合和优化，可以在Web页面中实现引人入胜的动画效果，为用户带来更加令人印象深刻的视觉体验。

参考资源：