java如何使用live2d_使用live2d web驱动(网页看板娘)

本文介绍如何在网页中集成Live2D,通过修改原SampleApp1.html和相关JavaScript文件,如SampleApp1.js、LAppDefine.js,实现网页看板娘功能。删除不必要的按钮定义,调整鼠标事件处理,更改模型配置,如在LAppLive2DManager.js中设置默认模板为shizuku,并解释module.json中各部分的作用。最终实现动态交互效果。
摘要由CSDN通过智能技术生成

github地址如下:

原资源位置:

下载原资源后打开

58af8b46913a86ff2cb19b4f883966ae.png

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

252960700b48d4318dc7c95a44793ee8.png

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

8a0a7f22793072d8416e04c52a8c2ad0.png

main.js中引入的文件如下

02e3a877cee6bf82fe0631d7b77ebbb9.png

文件结构如下

b30685a08d82c7c1e9f547f76ede2087.png

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

SampleApp1.js

399e0c35b948425c40a0a10201c963c5.png

删除了按钮的定义

7f58557f1bc052fbfebf655d5c533a81.png

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

9ee4130b6b93aaa2b8ffb70b10a42228.png

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

2d0128055775aed1ad9b5032a0e724be.png

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

fe4e7011f0787b932fcaf96e0ced7237.png

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

设置焦点

LAppDefine.js

3a92cd839fabccb26663cdf1cf3ce5cc.png

重新设置模版配置的路径

补充的修改:LAppLive2DManager.js

420f4ff9d92f17c969425163057dc979.png

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

module.json

观察:shizuku.module.json

ac822438b13c13503e6a7912de24cf10.png

textures:是身体部件

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

pose: 配置人物的姿势

expressions :配置人物表情

layout:布局配置

204b88a860bbb1e7a2364014c09e009a.png

motions :定义动作

idle :空闲时

tap_body: 点击身体时

pinch_in: 被捏时

pinch_out 被撑开时

shake: 被摇时

flick_head : 被拍打头部时

最后效果:

15ae97c38e449f6d514f325c51ba2884.png

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值