把live2D模型放上网页

把live2D添加进网页

Live2D是一种应用于电子游戏的绘图渲染技术，技术由日本Cybernoids公司开发。通过一系列的连续图像和人物建模来生成一种类似三维模型的二维图像。
—来源：https://baike.baidu.com/item/Live2D/8496493
那么我们怎么把live2D人物模型添加进网页呢？
我就以我的一个网页为例：
先看效果
可以实现鼠标交互。

开始！

初级部分

1.软件准备

如果只是简单使用的话没有什么技术含量：
live2D做好后本地直接打开是没有效果的，所以我们先用搭建出本地服务器环境。

1. 使用XAMPP或其他软件搭建出本地服务器
2. 剩下的部分我们可以直接去“后宫学长”的博客查看具体操作：https://haremu.com/p/205
   以上就是初级部分

我在此详细讲解高级操作

我们看到，这些人的博客每次刷新后人物都会改变服装，那么这是怎么实现的呢？
1.我们先来分析live2D文件夹的目录

css、js文件夹放的什么我就不多说了，我们重点来看model文件夹
model顾名思义就是放模型文件的地方
其中tia是人物名，没什么意义。知道一个人物模型放一个文件夹就可以了。
textures是放人物贴图的地方
model.moc是人物模型
model.json类似于人物贴图和模型的索引
2. 接下来我们重点关注model.json文件

可以看到，textures存放的是模型的贴图

"textures":[
        "textures/default-costume.png"
    ],

我们把贴图文件放在\live2d\model\人物名\textures下，
获取每一个贴图的文件名，存放在model.json的textures下

换装的原理就是每次载入网页时为模型指定不同的人物贴图。
我们可以在主页中加上这段：

			<script type="text/javascript">
			
			function RandomNumBoth(Min,Max){
                  var Range = Max - Min;
                  var Rand = Math.random();
                  var num = Min + Math.round(Rand * Range); //四舍五入
                  return num;
            }
			
			    $.getJSON('/live2d/model/Pio/model.json', function(model) {
                    modelObj = JSON.parse(JSON.stringify(model, null, 2)); //这里
                    textures = modelObj.textures;
                    
                    modelObj.textures = ['/live2d/model/Pio/textures/' + textures[RandomNumBoth(0,textures.length)]];
                    loadlive2d('live2d', '/live2d/model/Pio/model.json', '', modelObj);
                });
					console.log("使用的贴图和模型：" + modelObj);
			</script>

原理就是通过 $.getJSON()来获取model.json，在随机读取textures中的一个贴图文件载入就完成了。
模型和贴图主要来自于游戏《药水制作师》

结束