有一天我打开DIYGod的博客。嗯？他的主页上有一只萌萌22娘，还会随着指针转头？

有一天我又打开辉鸭蛋的博客。嗯？他的主页上有一只萌萌的亚丝娜，刷新页面还能换装？

哇啊！我也要看板娘！不加会睡不着！

有了这个万恶的念头，我放下了手中一切事情，去百度，呃，去谷歌看板妹子是怎么加上去的。经过了“网页看板娘”、“博客挂件”、“博客宠物”等一系列牛头不对马嘴的关键词搜索，我陷入了深深的茫然——这搜出来都是什么啊，一定是我打开的方式不对。于是调出他们的源码——仔细一对比，发现DIYGod有个js文件叫live2d.js。l…i…v…e…2…d…可不就是它！SZ们也许玩过动态桌面。就是利用2D变形实现动画效果的引擎。

live2d现在已经支持WebGL了。从官方下了sdk，发现里面有3个Demo，大概可以通过它了解web渲染live2d的工程结构。

/assets/live2d文件夹下放的是live2d的模型文件，是由Cubium导出的文件，可以用sdk直接加载。要是自己做模型的话又是一门高深的学问，网上素材不算多，可以带着钱包请大神帮做，或者从一些游戏拆包取模，或者还可以去steam创意工坊Live2dViewerEx主题下找，不过质量好模型的也不多。

大致看一眼50这个文件夹下的结构。motions文件夹里放的是.mtn格式的动作数据，textures里的是人物的贴图数据。.moc格式的文件是live2d模型的代码，这个不用管就是了。model.json列出了模型的参数，包括贴图，动作文件等，后面sdk读取模型参数就是从这里读取。

/src中的js文件做的事是设置模型参数，加载模型，设置监听事件，依赖两个live2d.min.js和live2dframework.js这两个文件（在包外，上图没列出）。

调整一下妹子的尺寸和位置，改动几个监听事件，就可以移到博客里卖萌了。嘻嘻，感觉智商都下降了。

如果没看到就稍稍等一会儿，模型加载在文档加载完成之后。

PS：发现了一件恐怖的事，加了看板娘后，文章页的渲染速度变得特别慢…肝有点疼，先洗洗睡了明天再看。