Live2D AI 项目安装与使用教程

2026-01-21 05:07:47作者：戚魁泉Nursing

1. 项目的目录结构及介绍

live2d_ai/
├── assets/
│   ├── waifu-tips.js
│   ├── live2d.js
│   └── waifu.css
├── LICENSE
├── README.md
├── index.html
└── 其他文件和文件夹

目录结构说明

assets/: 包含项目所需的所有资源文件，如 JavaScript 文件、CSS 文件等。
- waifu-tips.js: 用于实现交互功能的 JavaScript 文件。
- live2d.js: 用于实现 Live2D 动画的 JavaScript 文件。
- waifu.css: 用于样式控制的 CSS 文件。
LICENSE: 项目的许可证文件，本项目使用 WTFPL 许可证。
README.md: 项目的说明文档。
index.html: 项目的启动文件，包含了 Live2D 动画小人的嵌入代码。

2. 项目的启动文件介绍

index.html

index.html 是项目的启动文件，包含了 Live2D 动画小人的嵌入代码。以下是 index.html 的主要内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Live2D AI</title>
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="stylesheet" type="text/css" href="assets/waifu.css"/>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
    <input placeholder="和她聊天" id="talk"/>
    <form id="uploadForm">
        <input type="file" name="file"/>
    </form>
    <div class="waifu">
        <div class="waifu-tips"></div>
        <canvas id="live2d" width="320" height="280" class="live2d"></canvas>
    </div>
    <script src="assets/waifu-tips.js"></script>
    <script src="assets/live2d.js"></script>
    <script type="text/javascript">initModel("assets/")</script>
</body>
</html>

启动文件说明

head 部分: 包含了页面的元数据、样式表链接和 jQuery 库的引用。
body 部分: 包含了 Live2D 动画小人的嵌入代码，包括聊天输入框、文件上传表单、动画小人的容器和初始化脚本。

3. 项目的配置文件介绍

assets/waifu-tips.json

assets/waifu-tips.json 文件用于配置动画小人的交互功能。通过修改该文件，可以自定义小人对用户操作的反应。

配置文件说明

waifu-tips.json: 该文件包含了动画小人对鼠标移动、点击等操作的反应配置。开发者可以根据需要修改该文件，以实现不同的交互效果。

示例配置

{
    "mouseover": {
        "selector": ".waifu",
        "text": "你点击了我！"
    },
    "click": {
        "selector": "#talk",
        "text": "你在和我聊天吗？"
    }
}