html网页制作看板娘原理,博客网页上添加live2D看板娘

一：前言

“看板娘”，简而言之就是小店的女服务生，也有“吸引顾客，招揽生意，提高人气”等作用类似品牌形象代言人的含义。所用的技术是live2D，live2d并不是一种先进的技术，它产生的效果，都是用基本的平移、旋转、透明、曲面变形等操作实现的。最终的效果与贴图关系很大，而每一个动作，都需要制作师的精细调整。这是一个需要消耗大量时间精力的过程，因此质量好的模型并不多，质量好的也一般是在游戏中，版权受到保护，不能随意使用。

本文章中所用模型解包自药水制作师手机游戏，版权归该官方所有。

二：教程

先下载看板娘的资源文件，包含两个模型的动作和服装，以及我整理的语言提示。

1.解压文件

解压文件到网站根目录，本文文件名以live2D示例。

2.引入资源文件

在网页头部文件中(header.html)引入样式，在

标签内插入代码：

在网页脚部文件中(footer.html)引入脚本，在脚本结束前插入代码:

var message_Path = '/live2d/'

var home_Path = 'https://www.baikesec.com/'

//载入人物

loadlive2d("live2d", "/live2d/model/pio/model.json");

人物的切换也只需改为相应的文件夹名字即可。也可以做一个切换人物的功能。

loadlive2d("live2d", "/live2d/model/tia/model.json");

3.页面插入live2D元素

在合适的页面上，放入元素，在页面底部也可以。

4.自定义提示语

鼠标放在页面某个元素上时，需要 Live2D 看板娘提示的请修改 message.json 文件。只需添加或修改标签或元素的text即可。

5.效果欣赏

pio

tia

转载：感谢您对梦屿千寻个人博客网站平台的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人站长或者朋友圈，但转载请说明文章出处“来源梦屿千寻个人博客”。

很赞哦!()