# live2d-moc3

**Repository Path**: JokerPan12/live2d-moc3

## Basic Information

- **Project Name**: live2d-moc3
- **Description**: web中引入live2d的moc3模型教程
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-09-09
- **Last Updated**: 2023-09-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: live2d

## README

# live2d-moc3

#### 介绍
web中引入live2d的moc3模型教程

```
项目结构：

项目根目录
├─ Core                 # Cubism Core 顾名思义，核心库
├─ Framework            #包含渲染和动画功能等的源代码的目录
└─ Samples              #示例项目，我们关注的重点
   ├─ Resources   # 这里面放的是live2D的模型及动作导出的文件
   └─ TypeScript
      └─ Demo           # サンプルプロジェクトが含まれるディレクトリ
         └─ src         #这里面是ts脚本文件，使用自己的模型时会修改其中的一些文件
```

#### 安装教程

1.  使用git拉取代码
2.  进入`Samples/TypeScript/Demo`文件夹下
![输入图片说明](https://foruda.gitee.com/images/1694245277502740174/9d29c464_7845627.png "屏幕截图")
3.  使用 `npm i` 命令安装依赖
4.  使用 `npm run build` 命令打包
5.  运行 `Demo` 下的 `index.html` 文件
```
效果图
```
![输入图片说明](images/image.png)

#### 使用说明

`如果需要安装自己的模型可以按照以下步骤操作`
1. 先把准备好的模型导入进 `Samples/Resources` 下
(注意：模型文件夹的名字必须和里面的 `.model3.json` 文件名一致)
![输入图片说明](https://foruda.gitee.com/images/1694245877846503666/1650ae68_7845627.png "屏幕截图")

2. 进入 `Samples/TypeScript/Demo/src/lappdefine.ts` 文件下
在此处添加刚才加入的模型文件名即可
![输入图片说明](https://foruda.gitee.com/images/1694246009133636536/fb33cf3a_7845627.png "屏幕截图")

3. 重新运行打包命令 `npm run build` , 最后重新运行或刷新 `index.html` 页面即可