打造你的虚拟看板娘：分分钟搞定！

前端

2023-09-13 09:11:43

准备工作

在开始制作之前，需要一些材料：

一个 Live2D 模型（请确保已获得授权）
Live2D Viewer（用于预览模型）
一个文本编辑器（如记事本或 Sublime Text）
一个网页编辑器（如 Visual Studio Code 或 WebStorm）

1. 设置 Live2D 模型

打开 Live2D Viewer，导入你的 Live2D 模型。进行必要的调整，例如设置锚点和物理行为。

2. 生成 JSON 文件

导出模型时选择 "导出为 JSON"。这将生成一个包含模型所有数据的 JSON 文件。

3. 编写 HTML 代码

在 HTML 文件中，添加以下代码：

<div id="live2d-widget"></div>
<script src="live2d.js"></script>
<script>
  (function () {
    let live2dWidget = new Live2DWidget({
      model: './model.json',
      width: 200,
      height: 300,
      container: document.getElementById('live2d-widget'),
    });

    live2dWidget.load();
  })();
</script>

其中：

model.json 是模型的 JSON 文件路径。
width 和 height 是看板娘的尺寸。
container 是看板娘容器的 ID。

4. 优化和自定义

根据需要调整代码中的参数。例如，你可以更改看板娘的尺寸、位置和表情。你还可以添加额外的功能，如点击互动或语音控制。

示例：

<div id="live2d-widget"></div>
<script src="live2d.js"></script>
<script>
  (function () {
    let live2dWidget = new Live2DWidget({
      model: './model.json',
      width: 200,
      height: 300,
      container: document.getElementById('live2d-widget'),
      expressions: {
        happy: './happy.json',
        sad: './sad.json',
      },
    });

    live2dWidget.load();

    document.getElementById('btn-happy').addEventListener('click', () => {
      live2dWidget.changeExpression('happy');
    });

    document.getElementById('btn-sad').addEventListener('click', () => {
      live2dWidget.changeExpression('sad');
    });
  })();
</script>