web中引入live2d的moc3模型

最新推荐文章于 2024-04-23 16:26:38 发布

鬼鬼骑士

最新推荐文章于 2024-04-23 16:26:38 发布

阅读量1k

点赞数 1

文章标签：前端 web live2d node

本文链接：https://blog.csdn.net/qq_39123467/article/details/131735085

版权

文章目录

前言
下载官方sdk文件
使用ide编译项目（vsCode）
演示导入自己的模型并显示

前言

先跟着官方sdk调试一遍，明白哪些是必改项，哪些是可操作参数，放入自己的模型，看看能否成功加载
这里先让大家看个最终效果，以明白本次操作的目的性
在这里插入图片描述

下载官方sdk文件

官方sdk下载
在这里插入图片描述

使用ide编译项目（vsCode）

项目初始化

在这里插入图片描述
解压官网的sdk，我们会看到多个文件，进到Demo目录，这里我们需要node的两个操作，分别为，使用cmd进行命令即可（需要node知识，有问题可私信）

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

使用vsCode

打开skd包，这次我们打开根目录的包，因为加载模型的所需配置都在这些文件中
在这里插入图片描述

项目树介绍

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