Live2dRender 使用教程

1. 项目介绍

Live2dRender 是一个适用于最新版本 Live2D 模型文件的 JavaScript 渲染器。该项目基于 CubismSdkForWeb 开发，不适用于 IE 浏览器，并且请不要用于商业用途。此项目适用于基于 webpack 构建的项目，如果你的项目是静态页面，可能需要自行调整。

2. 项目快速启动

以下是使用 Live2dRender 的基本步骤：

步骤 1: 创建 Vue3 项目并安装依赖

如果没有 Vue3 项目，首先需要创建一个：

vue create test-live2d-render

然后进入项目目录：

cd test-live2d-render

安装 live2d-render 库：

npm install live2d-render

步骤 2: 准备 Live2D 模型

准备一个 Live2D 模型，通常包含以下文件：

• xxx.moc3
• xxx.model3.json
• 其他相关资源文件

将模型文件夹（例如 cat）放置在项目的 ./public 目录下。

步骤 3: 使用 Live2dRender

在你的 Vue 组件（例如 App.vue）中导入并初始化 Live2dRender：

<template>
  <div id="app">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script setup>
import HelloWorld from './components/HelloWorld.vue'
import { onMounted } from 'vue';
import * as live2d from './lib/live2d-render';

defineComponent({
  name: 'App'
});

onMounted(async () => {
  await live2d.initializeLive2D({
    BackgroundRGBA: [0.0, 0.0, 0.0, 0.0],
    ResourcesPath: './cat/sdwhite cat b.model3.json',
    CanvasSize: { height: 500, width: 400 },
    ShowToolBox: true,
    LoadFromCache: true
  });
  console.log('finish loading');
});
</script>

启动项目：

npm run serve

3. 应用案例和最佳实践

• 静态资源优化：如果你的项目中的 png 图片文件较大，可以考虑将其转换为 webp 格式，并在 model3.json 文件中更新纹理资源的路径。
• 缓存优化：使用 indexDB 进行缓存优化，可以减少网络请求，提高加载速度。

4. 典型生态项目

目前没有明确列出与 Live2dRender 相关的典型生态项目，但你可以通过搜索和探索其他开源项目来找到与 Live2dRender 相关的生态系统项目。这些项目可能会提供额外的功能或集成，以帮助你更好地使用 Live2dRender。