Live2D Browser Renderer

模态跃迁自研用于在浏览器中渲染Live2D模型的轻量级库。该库基于pixi.js和pixi-live2d-display，提供了简单易用的API来加载和显示Live2D模型，并支持音频同步功能。

安装

npm install live2d-browser-renderer

或者使用yarn：

yarn add live2d-browser-renderer

基本用法

import Live2DRenderer, { Live2DEventType } from 'live2d-browser-renderer';

// 获取canvas元素
const canvas = document.getElementById('live2d-canvas');

// 创建渲染器实例
const renderer = new Live2DRenderer(canvas, 'haru', {
  autoResize: true
});

// 渲染模型
renderer.render();

// 添加事件监听
renderer.on(Live2DEventType.MODEL_LOADED, (event) => {
  console.log('模型加载完成!', event.model);
});

// 获取麦克风流并播放
navigator.mediaDevices.getUserMedia({ audio: true })
  .then(stream => {
    // 播放音频并同步Live2D模型的口型动作
    renderer.playAudio(stream);
  })
  .catch(err => {
    console.error('无法获取麦克风:', err);
  });

// 停止音频同步
function stopAudio() {
  renderer.stopAudio();
}

// 清理资源
function cleanup() {
  renderer.destroy();
}

API

Live2DRenderer

主渲染器类，用于加载和显示Live2D模型。

构造函数

constructor(container: HTMLCanvasElement, modelName: ModelName, options?: Live2DRendererOptions)

• container: Canvas元素，用于渲染模型
• modelName: 模型名称，应是预定义模型中的一个，可选项包括kei_vowels_pro、office、real_girl、office_m
• options: 可选的渲染器配置
  • autoInteract: 是否开启自动交互
  • autoResize: 是否跟随父元素大小变化

方法

• render(): 将模型渲染到舞台上
• destroy(): 销毁渲染器和模型资源
• playAudio(mediaStream: MediaStream): 播放音频并同步模型动作
• stopAudio(): 停止音频同步
• on(eventType: Live2DEventType, callback: Live2DEventCallback): 添加事件监听器
• off(eventType: Live2DEventType, callback: Live2DEventCallback): 移除事件监听器

事件类型

enum Live2DEventType {
  MODEL_LOADED = 'modelLoaded',
  ERROR = 'error',
  AUDIO_START = 'audioStart',
  AUDIO_STOP = 'audioStop'
}

浏览器兼容性

该库支持所有现代浏览器，包括：

• Chrome 60+
• Firefox 60+
• Safari 12+
• Edge 79+

许可证

MIT