欢迎光临散文网 会员登陆 & 注册

Vue项目中加载live2d

2023-08-13 11:44 作者:罗老师Logic  | 我要投稿

1. 去官网下载SDK for web

https://www.live2d.com/zh-CHS/download/cubism-sdk/

下载解压后将CubismSdkForWeb-4/Core/live2dcubismcore.min.js此文件复制到项目中,并在index.html中引用,这是live2d SDK的本体。

2. 需要安装两个库:

这个库pixi-live2d-display支持了live2d最新4.x的版本

github地址:https://github.com/guansss/pixi-live2d-display

3. 准备好live2d资源

一般设计师会给到一个文件夹,里面包含了一堆json,里面的.model3.json是live2d模型的入口文件,把这个文件夹放到项目的public目录,因为打包后它会出现在dist/下,到时候需要能够引用到。

4. 然后开始写代码

5. 一些常用方法

6. 关于配置文件

live2d资源里有一种.exp3.json, 这些文件是不同的表情文件,里面的内容实际上就是改变人物的不同参数,让人物做出对应的样子。
有可能设计师输出的.model3.json文件没有把这些表情文件加入到配置中,需要自己配置一下:


Vue项目中加载live2d的评论 (共 条)

分享到微博请遵守国家法律