使用live2d web驱动（网页看板娘）

github地址如下：

https://github.com/helloCaijiaqi/live2dDemo/tree/master

原资源位置：

https://link.zhihu.com/?target=http%3A//app2.live2d.com/cubism/sdk/bowiuex/webgl/Live2D_SDK_WebGL_2.0.05_1_en.zip

下载原资源后打开

根据原SampleApp1.html内容重新建立html页面

下面是依照修改的页面 => 下面删除了改变模型的按钮

main.js中引入的文件如下

文件结构如下

修改原SampleApp文件有：SampleApp1.js  LAppDefine.js

SampleApp1.js

删除了按钮的定义

浏览器警告：给其添加passive参数

注释了这一条代码，这个会影响点击感受 => mousedown时会设置 焦点，人物会看向鼠标

增加这一行代码，让鼠标在区域内移动时，会设置焦点

设置 mouseevent 的函数中 注释了mouseup的情况，因为前面已经取消了mousedown 时

设置焦点

LAppDefine.js

重新设置模版配置的路径

补充的修改：LAppLive2DManager.js

 

初始是 –1 这里修改成 4 。就是修改init()时加载的默认模版  这里改的默认模版是shizuku

module.json

观察：shizuku.module.json

textures：是身体部件

physics：是物理配置 => 决定人物头发应该怎么动等

pose: 配置人物的姿势

expressions ：配置人物表情

layout：布局配置

motions ：定义动作

idle :空闲时

tap_body: 点击身体时

pinch_in: 被捏时

pinch_out 被撑开时

shake: 被摇时

flick_head : 被拍打头部时

最后效果：