PixiLive2D显示插件安装与配置完全指南

周岚苹Andrea

于 2024-09-13 22:23:38 发布

阅读量353

点赞数 3

本文链接：https://blog.csdn.net/gitblog_09433/article/details/142231462

版权

PixiLive2D显示插件安装与配置完全指南

pixi-live2d-display A PixiJS plugin to display Live2D models of any kind. 项目地址: https://gitcode.com/gh_mirrors/pi/pixi-live2d-display

项目基础介绍及编程语言

PixiLive2D Display 是一个专为Web平台设计的开源项目，它作为PixiJS的插件，允许开发者轻松地在网页应用中展示任何版本的Live2D模型。该项目由Guan维护，采用TypeScript为主要开发语言，并兼容ES6标准，保证了代码的质量与类型安全。

关键技术和框架

PixiJS: 是一个强大的2D渲染引擎，用于构建互动的Web图形和游戏。
Live2D: 一种创建具有逼真表情和动作的2D角色的技术，广泛应用于交互式娱乐产品。
Cubism: Live2D的SDK版本，本项目支持Cubism 2.1和Cubism 4，确保对不同模型版本的兼容性。
TypeScript: 强类型化的JavaScript超集，增加了代码的可读性和可维护性。

安装和配置指南

准备工作

在开始之前，请确保你的开发环境中已经安装了以下软件：

Node.js: 环境版本建议在12以上，用于npm包管理。
Git: 用于克隆项目源码。
文本编辑器或IDE: 如Visual Studio Code、Atom等，方便进行代码编辑。

安装步骤

通过NPM安装（适用于项目集成）

初始化项目环境：如果你的项目是基于npm的，首先确保项目目录下有package.json文件。如果没有，可以通过运行npm init来创建。
安装PixiLive2D Display插件：打开终端，切换到你的项目根目录，然后输入以下命令安装插件及其依赖：
```
npm install pixi-live2d-display --save
```
若只计划使用特定版本的Cubism核心（如仅使用Cubism 2.1或4），应分别使用：
```
npm install pixi-live2d-display/cubism2 --save
```
或
```
npm install pixi-live2d-display/cubism4 --save
```

使用CDN快速集成（适用于简单测试或小型项目）

引入必要的资源：在HTML文件的<head>部分，添加以下CDN链接来加载PixiLive2D Display插件和相应的Cubism核心库：

<script src="https://cdn.jsdelivr.net/npm/pixi-live2d-display/dist/index.min.js"></script>
<!-- 如果只需要Cubism 2.1 -->
<script src="https://cdn.jsdelivr.net/npm/pixi-live2d-display/dist/cubism2.min.js"></script>
<!-- 如果只需要Cubism 4 -->
<script src="https://cdn.jsdelivr.net/npm/pixi-live2d-display/dist/cubism4.min.js"></script>

基本使用示例：在JavaScript代码中，你可以开始使用PixiLive2D Model进行模型加载和显示。

import * as PIXI from 'pixi.js';
import { Live2DModel } from 'pixi-live2d-display';

const app = new PIXI.Application({ view: document.getElementById('canvas') });
document.body.appendChild(app.view);

(async function loadModel() {
  const model = await Live2DModel.from('path/to/model.json');
  app.stage.addChild(model);
})();