live2d（Web SDK 5.x）官方源码的修改和使用

起因

我之前为了做一个产品需要看板娘就想到了使用live2d但发现好像并没有提供给我们cdn的连接或者npm直接拖包所以有了这篇文章，这篇文章大佬勿喷，我也是第一次写文章，帮帮和我一样不会改的人帮助大家如何修改，当然这篇文章也是根据下面文章在此基础上修改的

live2d web笔记之一：官方SDK尝试-CSDN博客

这篇文章版本适合4.x(应该是，我没拉过4.x的代码)

准备

第一

首先需要一个能写代码得到软件我使用的vscode

第二

需要一个能开启html服务的插件和编写html，js(javascript)，css，ts(typescript)

html开启服务

编写类的直接在插件哪里搜就对

第三

需要nodejs和npm(安装nodejs可以看看别人的教程)这个是nodejs官网Node.js — Run JavaScript Everywhere

这个是我的版本

第四

需要在官网拖一个web的SDK包，一般需要挂梯子(如果不知道什么意思可以搜一下)，不然一般是有问题的就是点了没反应那该如何判断是不是正常的可以点开网站后下载Live2D Cubism SDK for Web | Live2D Cubism

看下面的下载

这个是没挂梯子出现错误的样子

他的错误是在没勾选同意软件使用授权及隐私的时候下面是橙色的这时候点下载是点不了的

这个样子是可以点的正确的

所以emmm看自己

它虽然有github但是很奇怪的是它的github缺少了一些文件我还是吧链接放这里

live2d web sdk的githubLive2D/CubismWebSamples (github.com)

正常按照live2d的协议我不该提供web sdk 5.x的压缩包，但我还是放一个吧，主要有一点官方并没有提供有关的js，网上看到的js可能是自己通过对官方的打包后出现的(可能我看的资料不多如果我说的不对联系我我会改的！)。这个是web SDK 5.x的https://cubism.live2d.com/sdk-web/bin/CubismSdkForWeb-5-r.1.zip

第五

需要一个live2d的模型文件，这里用的是B站的MetaLive全新企划【灵境Sanctuary】的

【免费Live2D模型】阿芙洛狄忒𝓐𝓹𝓱𝓻𝓸𝓭𝓲𝓽𝓮-爱，是灵魂深处的永恒之火_哔哩哔哩_bilibili

下载后就会得到以下文件

待会儿就只需要fense文件(就不给大家看包含哪些了，下载下来的文件内容应该是一样的)

开始

第一步-打开包

通过vscode打开我们下载的sdk文件

先给大家看看这个包含哪些文件

总的(只要这个文件里面有东西就对)

Framework(只要这个文件里面有东西就对)

Samples(只要这个文件里面有东西就对)

最主要的还是Samples他和4.x的好像有些文件不同所以最开头的那片文章里面的修改方式有些出入

第二-尝试

按照官方的readme.md的步骤继续就行但可能有些刚接触的朋友不太懂所以我还是一步一步的教教你们

第一步

在vscode里面打开终端(ctrl+`)(" `</