[教程]网页live2D技术虚拟小人-懒人版WordPress/typecho/emlog/Z-Blog

月宅说

挺多人在自己博客、网页界面上调用这样的一个小人物，这项技术被命名为live2D可交互性动画角色，目前普遍运用在动态壁纸、游戏、桌面挂件上，如今已经被运用到了网页上了。不少人在问月宅如何实现的？是插件么，不，这不是。接下来 月宅教你实现它。

其实我的友链中有不少人已经出了教程，也告诉过别人了。但这不是长久之计，每人都来问，我都要复制断手了。接下来是月宅风格的教程。 :阿鲁12:

跪着再提一点！求求你们订阅我的博客吧，不要再用RSS了QAQ :阿鲁10:

教程须知

适用于所有网页程序、博客程序、单页html、php，由于太简单了，月宅就没必要制作成WordPress插件发布了。下面的文件、代码所有权均为原作所有-0- 修改版为月宅所有。

一-加载CSS

两种解决办法：

• 1.直接在头部引用css路径
• 2.将live2d.css内的所有CSS代码复制进主题的全局style.css文件中（推荐）

<link rel='stylesheet' href='https://mikumoe.cn//live2d.css' type='text/css'/>

二-加载JS

复制到你的footer.php中，或者主题设置中，这里的地址替换为你自己的。

<script type="text/javascript" src="https://mikumoe.cn//live2d.js"></script>

三-加载人物

将以下代码放入你想放的地方，推荐footer.php

<script type="text/javascript">
    loadlive2d("live2d", "https://mikumoe.cn//live2d/model/tia/model.json"); 写上自己域名的绝对路径
</script>

四-显示人物

放在哪，就在哪显示，

<div id="landlord">
    <canvas id="live2d" width="280" height="250" class="live2d"></canvas>
</div>

放在侧边栏，就在有侧边栏的地方加载，放在footer就在全局加载。

五-修改人物

里面啥东西，月宅已经为你打包做好了，只需要上传图片与model.moc文件就OK了，懒人必备。PS:文件里面用的是月宅酱的月娘，务必替换掉

以chitose模型为例子，这里texture_00.png文件重命名为default-costume.png

\live2d总文件\模型\chitose\moc\chitose.2048\texture_00.png

这里的chitose.moc重命名为model.moc

\live2d总文件\模型\chitose\moc\chitose.moc

将重命名后的文件依次上传到

\live2d总文件\加载文件\model\tia\textures\default-costume.png
\live2d总文件\加载文件\model\tia\model.moc

然后刷新一下你就能看见你新加的人物啦！人物是PNG格式可以在PS里面自己修改，但不要随便移动原来的位置。另外更多模型你可以到live2d官方网站与live2d贴吧下载资源，或者自行提取。

六-显示范围修改

这里的width与height控制显示范围。与CSS文件中的#landlord标签下 width: 280px;height: 250px;修改为一致。这是用来解决不同人物的显示范围不一样，导致别的人物太高只显示半个身子。

 <canvas id="live2d" width="280" height="250" class="live2d"></canvas>

总计

目前月宅已经打包，分为以下三个文件夹：

• 1.js-css文件
• 2.加载文件
• 3.模型文件
• 1.首先你需要根据教程一、二来加载js与css
• 2.接着将加载文件中的model文件夹上传到你自己想放的地方，用教程三来加载它。
• 3.教程4用来显示这个人物
• 4.剩下的自己重命名模型覆盖就OK，接着修改下CSS来显示出整个人物

解压密码ikmoe

下载地址：https://pan.baidu.com/s/1i5xS5Id

其他

祝你们成功，可以拥有属于自己的网页live2D。感谢以下用户提供本文教程支持。@后宫学长@猫与向日葵@幻想帖

如果看不懂月宅风的，你可以去看以上小伙伴的教程。目前月宅是最简化来完成。

:阿鲁11: