Preface

First debug with the official sdk to understand which items are required to be changed and which are operable parameters. Put your own model into it and see if it can be loaded successfully. Here, let everyone see the
final effect first to understand the purpose of this operation.
Insert image description here

Download official sdk file

Official sdk download
Insert image description here

Compile the project using IDE (vsCode)

Project initialization

Insert image description here
Unzip the SDK from the official website. We will see multiple files and enter the Demo directory. Here we need two operations of node, namely, use cmd to command (node knowledge is required, please send a private message if you have any questions)

//安装所需依赖
npm i
//使项目打包
npm run build

Using vsCode

Open the skd package. This time we open the package in the root directory, because the required configuration for loading the model is in these files.
Insert image description here

Project tree introduction

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

Use live server to run index page

You need to install the live server plug-in here, no more demonstration
Insert image description here
. Load the model normally, click the gear to switch models, the official has configured six models

Demonstrate importing your own model and displaying it

modelDir file

These six exported values are our six officially configured models
Insert image description here

resources folder

The specific location is actually in the resources folder. There are 7 models here. llny is our own model.
Insert image description here

case model

This model is my free version under a certain platform. Please note that the folder name we just named must correspond to the name of the model3.json folder. After creating the llny folder in resources, drag all the contents of our mimanfeimox folder directly. Just enter the llny folder in vsCode
Insert image description here

Modify modelDir and then repackage the project to run

Insert image description here
You can still run the package using cmd in the previous folder location.

npm run build

Just rerun or refresh the page
Insert image description here

final effect
Insert image description here

Introduction of live2d moc3 model into web

Article directory