web端加载live2D模型并使用的实践

2024/05/31

4 mins read See this issue

# 开发实践

# Javascript

Back

To Top

live2D是一种使用静态资源来模拟伪三维动态效果的一种技术，在业务场景中比如一些二次元游戏官网会使用该技术来展示动态人物，可以让网页显得更加灵动，给用户更加新奇的体验

# 依赖库

pixi.js: 下面依赖的依赖库
pixi-live2d-display：基于PixiJS 的 Live2D 插件
live2dcubismcore：live2D提供的核心SDK，针对4版本以上模型处理
live2d.min：老版本live2D的封装，处理2版本的模型处理

# 模型加载

使用插件的能力进行载入网络模型, 这里只展示主要功能代码，和实际有一定出处

// 不放在一开始加载，页面跳转会出现问题，不清楚原因
<script src="lib/live2d.min.js"></script>
<script src="lib/live2dcubismcore.min.js"></script>

import * as PIXI from 'pixi.js'
import { Live2DModel } from 'pixi-live2d-display'

// 插件必须挂载到window上实现实时更新
window.PIXI = PIXI

// 模型地址
const cubism4Model =
  "https://cdn.jsdelivr.net/gh/guansss/pixi-live2d-display/test/assets/haru/haru_greeter_t03.model3.json";

let app: PIXI.Application | null
let model: Live2DModel | null

// 生成PIXI容器
app = new PIXI.Application({
  view: document.querySelector('#canvas') as HTMLCanvasElement,
  autoStart: true,
  resizeTo: window,
  backgroundColor: 0x333333,
})

// 插件加载模型
model = await Live2DModel.from(cubism4Model)

// 将模型加入舞台
app!.stage.addChild(model)

# 执行模型动作和获取时间

在模型文件中可以获取所有动作组通过使用 model!.internalModel.motionManager.startMotion或者model!.motion可以执行模型下的动作，例如

// 播放Idle分组下第一个动作
const isSuccess = await model!.motion("Idle", 0)

通过使用 model!.internalModel.motionManager.loadMotion可以获取模型下的动作文件详情，例如

// 载入匿名分组下第第一动作
const file= await model!.internalModel.motionManager.loadMotion("", 0)

其中duration就是我们需要的该动作延续时间，有了时间可以做一些关于动作进程和结束的操作

其实这个live2D的SDK是比较麻烦的，文档也比较乱，和npm库的便利程度完全不一样，主要是插件大大简化了需要的操作步骤

最后，基于这些模型操作写了一个在线的查看器 live2D viewer