自制live2D模型在网页中自动跟随鼠标和自由拖拽的实现日志

将昨天de完bug的项目提交之后,意料之中地被组中大佬提出了两个优化点:一是模型要能自动跟随鼠标,二是模型能够被自由拖拽和放置,放置页面有功能点被遮挡。于是我又开始了我的漫漫现学现卖之路……

一、使用的环境和技术

Windows

VS Code

Live2D Cubism Editor 4.2

Live2D Cubism Viewer 4.2

vue

pixi-live2d-display

二、参考资料

【Live2D】PixiJS实现2D交互动画:【Live2D】PixiJS实现2D交互动画_手机游戏热门视频

【Live2d模型展示】公益模型:【Live2d模型展示】公益模型(结尾彩蛋)_哔哩哔哩_bilibili

三、自动跟随鼠标

1.  模型自查。

(1)按常理来说我已经使用了插件,应该能直接实现自动跟随才对,但考虑到我的live2D模型是我自己拆分自己做的,我担心会不会有什么设置点在live2D模型制作的时候漏了,于是我觉得先拉个别人同样使用这个插件但可以直接实现自动跟随的模型试试,排除变量。

        拉取了一个别人的模型,还是不能自动跟随鼠标,说明可能是代码的问题,遂查找相关实现代码哪里出了问题。

(2)代码审查。

  • 9
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
很多博客都有live2D的萌萌哒看板娘,手痒,所以整理了一套HTML5可以用的,注释换一下就可以用啦,最好是放到线上服务器上使用。 L2Dwidget.init({ "model": { //萌娘 jsonPath: "model/live2d-shizuku/assets/shizuku.model.json", //短发女生 //jsonPath: "model/live2d-epsilon2_1/assets/Epsilon2.1.model.json", //双马尾女仆 // jsonPath: "model/live2d-haru_1/assets/haru01.model.json", //双马尾学生装 // jsonPath: "model/live2d-haru_2/assets/haru02.model.json", //小可爱(男) // jsonPath: "model/live2d-haruto/assets/haruto.model.json", //小可爱(女) // jsonPath: "model/live2d-koharu/assets/koharu.model.json", //傲娇学生装女 // jsonPath: "model/live2d-hibiki/assets/hibiki.model.json", //红衣长发女生 // jsonPath: "model/live2d-izumi/assets/izumi.model.json", //黄发制服可爱女生 // jsonPath: "model/live2d-z16/assets/z16.model.json", //黄发女生 // jsonPath: "model/live2d-unitychan/assets/unitychan.model.json", //可爱白猫 // jsonPath: "model/live2d-tororo/assets/tororo.model.json", //可爱黑猫 // jsonPath: "model/live2d-hijiki/assets/hijiki.model.json", //初音未来 // jsonPath: "model/live2d-miku/assets/miku.model.json", //小帅哥 //jsonPath: "model/live2d-chitose/assets/chitose.model.json", //持剑绿衣剑士 // jsonPath: "model/live2d-gf/assets/Gantzert_Felixander.model.json", //科技感短发小女孩 // jsonPath: "model/live2d-ni-j/assets/ni-j.model.json", //狐妖 // jsonPath: "model/live2d-nico/assets/nico.model.json", //绿发女生 // jsonPath: "model/live2d-tsumiki/assets/tsumiki.model.json", "scale": 1 }, "display": { "superSample": 2, "position": "top", "width": 150, "height": 300, "hOffset": 0, "v

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值