授人以鱼不如授人以渔，目前关于网站看板娘的教程，各个博客上找的教程都是封装好的，不能随意换用自己找到的模型（某某游戏扒出来的模型）并且都是知支持较老的模型文件（也可能因为我太菜，找不到新的），并不支持Cubism3.x的模型文件，无奈之下只能去live2d官网看他们的使用手册了，经过几天的摸索，勉强整出来个不影响使用的js脚本。本教程适合前端小白（但起码要知道网页上的各种js脚本引用），因为up自己就是小白。本来是想做成视频呢，那样效果更好，但因为一些原因，只能先写个文章，视频到时候看能不能补上。

好了，那接下来就进入正题

1.准备工作：

#下载并安装工具：所有工具软件和步骤均按照参考手册来准备的，可用类似软件替代

#具体安装方式自行百度

#1.Live2D Cubism SDK for Web（官方的示例Demo）

下载地址：https://www.live2d.com/download/cubism-sdk/

#2.安装Node.js

下载地址：https://nodejs.org/en/download/

#3.安装TypeScript（官方指定的前端语言）

安装方式：用nodejs带的npm来安装，命令: npm install -g typescript

#4.安装Visual Studio Code（代码编写）

下载地址：https://code.visualstudio.com/Download

2.构建并预览官方DEMO项目

2.1  为Visual Studio Code 安装所需插件

#安装Live Server和Debugger for Chrome 然后重启软件

2.2安装方式：在下边输入以上关键字，选择install

2.3.解决npm无法安装插件的问题（如果没问题就忽略）

进行到这一步必须保证第一步所需的软件都装上了

#npm命令在国内好像有点问题（我只是个小白，具体事由未知），安装会报错 rollbackFailedOptional

#原因是设置的代理错误，输入一下命令进行修改即可

npm config rm proxy

npm config rm https-proxy

#然后使用淘宝的cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

#等待加载完毕后就可以使用cnpm来代替npm命令了

2.4.如过出现上面安装插件错误的问题，最好再次安装一下typescript

typeScript安装完成后，进入 下载的SDK解压包（CubismSdkForWeb-4-beta.2）

所在的位置，在此处使用命令行工具（cmd），执行 

 cnpm install 

等待执行完毕后即可进入下一步。如过有错，试试管理员模式的cmd，如果管理员模式还有错的话，我也不知道怎么办~~~

2.5.打开官网提供的项目

    1.打开VScode，file -> opne folder 选择SDK的解压目录，我当前使用的是 

      CubismSdkForWeb-4-beta.2

    2.然后在上边的菜单栏上找到 Terminal -》 Run Build Tstk ，之后找到 

      npm :Build-Sample。点击后等待打包完成。完成之后，会在Sample\TypeScript\Demo文件夹下生成dist文件夹，里面是编译生成的index.js文件，index.html中会用到。

    3.打包完毕，接下来测试一下，能自己启动服务器的话，可以把这个项目放进去使用，没有的话就使用安装的live server。启动后会弹出浏览器，找到项目中的index.html文件打开就能预览效果了。（见下图）

#打包过程会报错，这个是官方提供的SDK里面的BUG，不知道怎么解决

  具体的报错地址为：                              

  SDK解压目录下的Sample\TypeScript\Demo\src\lappdelegate.ts(67,9)

   信息为：TS2322: Type 'WebGLRenderingContext | CanvasRenderingContext2D | ImageBitmapRenderingContext' is not assignable to type &#​39;WebGLRenderingContext'.

 #这个错误不用管，最后不影响网页使用。 

点击右下角的GoLive后。在其打开的网页上找到 Sample->TypeScript->Demo，当然你也可以直接在VSCODE上打开相应的html页面，然后再点击GoLive。

3. 进阶使用，导入自己的模型文件

3.1  SDK包的目录结构

根目录

├─ .vscode              # Visual Studio Code 的一些配置文件，用vscode编辑改项目时，以上几                                    个一键操作基本基于这里面的配置

├─ Core                 # Cubism Core 顾名思义，核心库

├─ Framework            #包含渲染和动画功能等的源代码的目录

└─ Samples              #示例项目，我们关注的重点

   └─ TypeScript

      └─ Demo           # サンプルプロジェクトが含まれるディレクトリ

         ├─ Resources   # 这里面放的是live2D的模型及动作导出的文件

         └─ src         #这里面是ts脚本文件，使用自己的模型时会修改其中的一个文件

3.2修改文件以导入自己的模型文件

# 1.找到 Sample\TypeScript\Demo\src\lappdefine.ts文件

#2.使用文本编辑器打开，定位到以下位置：（这里为我们需要改的地方，将你想要加入的模型文件的文件夹名字填入下面的数组中，不想要的可以从数组中删除）

export const ModelDir: string[] = [

  "Haru&#​34;,

   "Hiyori&#​34;,

   "Mark&#​34;,

   "Natori&#​34;,

   "xiaoxiao&#​34;,

   "Rice&#​34;

] 

 #3.这里面添加完毕后，将模型文件夹拷贝到【Sample\TypeScript\Demo\Resources】 文件夹，其他地方均不需要动

好了，简单的教程到此结束。如果你的模型文件的各种运动属性命名方式是安装官方给的命名方式的话，可以直接导入进来用了，具体命名方式请查看官方文档。最后，日文注释好难理解啊，直接百度翻译，总会有些偏差....

下期就讲如何使用不符合官方命名要求的模型文件，由于up对于liv2d了解甚少，能做的兼容性改动也就较少，不过勉强够用。

如果文章对你有帮助的话，还请点个赞。

注意：

1.  moc3文件的文件名必须和其文件夹名相同

2.如果感觉自己配置没啥问题的话，仍然加载不出来模型，可以通过浏览器的开发者工具来监控网络请求，看下载链接是否请求是否 被提示【HTTP响应截断】，如果有的话，只能放弃了，再换个模型文件（up的web前端技术以及live2D都是超级小白，只能放弃这个模型了）

3.进行一些编辑后不要不开服务器直接在本机预览，不然会啥都没有。因为浏览器安全问题，配置文件只能通过网络请求来进行加载，如果直接本地请求的话会报同源策略错误

补充：

up对于model3.json文件的一些简单认识，只是在参考源码时的一些理解，如有不对欢迎指正。有些除了模型文件，其他文件并不是必须的，多点少点无所谓。

{

"Version&#​34;: 3,

"FileReferences&#​34;: {

#模型文件存放名称

"Moc&#​34;: "Haru11.moc3&#​34;, 

#贴图文件存放位置

"Textures&#​34;: [

"Haru.2048/texture_00.png&#​34;,

"Haru.2048/texture_01.png&#​34;

],

#一些特殊动作

"Pose&#​34;: "Haru.pose3.json&#​34;,

"Expressions&#​34;: [

{"Name&#​34;:"f00&#​34;,"File&#​34;:"expressions/F01.exp3.json&#​34;},

{"Name&#​34;:"f01&#​34;,"File&#​34;:"expressions/F02.exp3.json&#​34;},

{"Name&#​34;:"f02&#​34;,"File&#​34;:"expressions/F03.exp3.json&#​34;},

{"Name&#​34;:"f03&#​34;,"File&#​34;:"expressions/F04.exp3.json&#​34;},

{"Name&#​34;:"f04&#​34;,"File&#​34;:"expressions/F05.exp3.json&#​34;},

{"Name&#​34;:"f05&#​34;,"File&#​34;:"expressions/F06.exp3.json&#​34;},

{"Name&#​34;:"f06&#​34;,"File&#​34;:"expressions/F07.exp3.json&#​34;},

{"Name&#​34;:"f07&#​34;,"File&#​34;:"expressions/F08.exp3.json&#​34;}

],

#动作模型加载，及简单分类

"Motions&#​34;: {

#网页打开后自动播放的动作文件

"Idle&#​34;: [

{"File&#​34;:"motions/haru_g_idle.motion3.json" ,&#​34;FadeInTime":0.5, &#​34;FadeOutTime":0.5}],

#点击头或者身体其他部位时触发的动作文件（嗯，你应该明白的）

"TapBody&#​34;: [

 {"File&#​34;:"motions/haru_g_m06.motion3.json" ,&#​34;FadeInTime":0.5, &#​34;FadeOutTime":0.5},]

},

#下面的还没弄明白是啥

"UserData&#​34;: "Haru.userdata3.json&#​34;

},

"Groups&#​34;: [

{

"Target&#​34;: "Parameter&#​34;,

"Name&#​34;: "LipSync&#​34;,

"Ids&#​34;: [

"ParamMouthOpenY&#​34;

]

},

{

"Target&#​34;: "Parameter&#​34;,

"Name&#​34;: "EyeBlink&#​34;,

"Ids&#​34;: [

"ParamEyeLOpen&#​34;,

"ParamEyeROpen&#​34;

]

}

],

"HitAreas&#​34;: [

{"Name&#​34;:"Head&#​34;, "Id&#​34;:"HitArea&#​34;},

{"Name&#​34;:"Body&#​34;, "Id&#​34;:"HitArea2&#​34;}

]

}