【亲测免费】 Pixi-Live2D-Display 项目教程

2026-01-18 09:18:01作者：卓炯娓

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

pixi-live2d-display/
├── dist/
│   ├── pixi-live2d-display.js
│   └── pixi-live2d-display.min.js
├── examples/
│   ├── basic/
│   │   ├── index.html
│   │   └── index.js
│   ├── cubism2/
│   │   ├── index.html
│   │   └── index.js
│   ├── cubism3/
│   │   ├── index.html
│   │   └── index.js
│   └── live2d-models/
│       ├── haru/
│       ├── hiyori/
│       └── wanko/
├── src/
│   ├── cubism2/
│   │   ├── index.ts
│   │   └── Live2DModel.ts
│   ├── cubism3/
│   │   ├── index.ts
│   │   └── Live2DModel.ts
│   ├── index.ts
│   └── Live2DModel.ts
├── .gitignore
├── package.json
├── README.md
├── tsconfig.json
└── webpack.config.js

目录结构介绍

dist/: 包含编译后的 JavaScript 文件，分别是 pixi-live2d-display.js 和 pixi-live2d-display.min.js。
examples/: 包含多个示例项目，分别展示了不同版本的 Cubism 模型（Cubism 2 和 Cubism 3）的使用方法。
- basic/: 基础示例。
- cubism2/: Cubism 2 模型示例。
- cubism3/: Cubism 3 模型示例。
- live2d-models/: 包含一些 Live2D 模型文件。
src/: 源代码目录，包含 TypeScript 文件。
- cubism2/: Cubism 2 相关代码。
- cubism3/: Cubism 3 相关代码。
- index.ts: 主入口文件。
- Live2DModel.ts: Live2D 模型类。
.gitignore: Git 忽略文件配置。
package.json: 项目依赖和脚本配置。
README.md: 项目说明文档。
tsconfig.json: TypeScript 编译配置。
webpack.config.js: Webpack 打包配置。

2. 项目的启动文件介绍

项目的启动文件主要位于 examples/ 目录下，每个示例项目都有一个 index.html 和 index.js 文件。

示例启动文件

examples/basic/index.html 和 examples/basic/index.js: 基础示例的 HTML 和 JavaScript 文件。
examples/cubism2/index.html 和 examples/cubism2/index.js: Cubism 2 模型示例的 HTML 和 JavaScript 文件。
examples/cubism3/index.html 和 examples/cubism3/index.js: Cubism 3 模型示例的 HTML 和 JavaScript 文件。

启动文件内容

以 examples/basic/index.html 为例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Basic Example</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="../../dist/pixi-live2d-display.js"></script>
    <script src="index.js"></script>
</body>
</html>

examples/basic/index.js 文件内容：

const { Application, Assets } = PIXI;
const { Live2DModel } = PIXI.live2d;

const app = new Application({
    view: document.createElement('canvas'),
    autoStart: true,
    backgroundColor: 0xffffff,
});

document.body.appendChild(app.view);

Assets.load('live2d-