Live2D Demo 教程

2026-01-16 10:01:34作者：贡沫苏Truman

1. 项目目录结构及介绍

在 live2d_demo 项目中，主要的目录和文件结构如下：

live2d_demo/
├── assets/         # 存放模型和动画资源
│   ├── models/     # 模型文件夹
│   └── motions/    # 动画文件夹
├── index.html      # 主页面文件，引入Live2D核心库和展示模型
├── script.js       # JavaScript脚本，实现Live2D初始化和交互逻辑
└── style.css        # CSS样式文件，控制页面布局和元素样式

assets/: 包含所有用于Live2D展示的资源。
- models/: 存储.moc3等模型文件。
- motions/: 管理.json格式的动作数据文件。
index.html: HTML页面，其中<script>标签引入了必要的库以运行Live2D。
script.js: 提供Live2D实例化、加载模型、播放动画等功能的JavaScript代码。
style.css: 页面样式设定，确保Live2D模型正确地显示和交互。

2. 项目的启动文件介绍

index.html

index.html是项目的核心入口，它主要负责设置HTML结构并引入所需的JavaScript和CSS资源。关键部分包括：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>Live2D Demo</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <canvas id="live2d"></canvas>
  <script src="https://examplecdn.com/cubism-core.min.js"></script>
  <script src="https://examplecdn.com/cubism-model.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

这里，<canvas>标签创建了一个用来绘制Live2D模型的画布。而<script>标签分别引入了Live2D的核心库(cubism-core.min.js)和模型解析库(cubism-model.min.js)，最后引入script.js来实现动态效果。

3. 项目的配置文件介绍

在live2d_demo项目中，没有单独的配置文件。大部分配置工作都是通过script.js中的JavaScript代码完成的。例如，模型加载、动作绑定以及交互事件的处理：

// 初始化Live2D
var live2d = new Live2DCubismCore();
live2d.init(document.getElementById('live2d'));

// 加载模型
var modelJsonPath = 'assets/models/model.json';
live2d.loadModel(modelJsonPath).then(function(model){
  // 设置模型到画布
  live2d.setModel(model);
  
  // 加载动作
  var motionJsonPath = 'assets/motions/hello.json';
  live2d.loadMotion(motionJsonPath);

  // 播放动作
  live2d.startAnimation(motionJsonPath);
});

// 交互示例
document.addEventListener('click', function(event){
  if(live2d.isHit('face')){
    live2d.startMotion('smile');
  }
});