Pixi-Live2D-Display 项目教程
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-