使用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

下载原资源后打开

image

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

image

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

image

main.js中引入的文件如下

image

文件结构如下

image

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

SampleApp1.js

image

删除了按钮的定义

image

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

image

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

image

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

image

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

设置焦点

LAppDefine.js

image

重新设置模版配置的路径

补充的修改:LAppLive2DManager.js

  image

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

module.json

观察:shizuku.module.json

image

textures:是身体部件

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

pose: 配置人物的姿势

expressions :配置人物表情

layout:布局配置

image

motions :定义动作

idle :空闲时

tap_body: 点击身体时

pinch_in: 被捏时

pinch_out 被撑开时

shake: 被摇时

flick_head : 被拍打头部时

最后效果:

image


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM