1. 首页
  2. 网络干货

[教程]网页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://ikmoe.com/live2d.css' type='text/css'/>

二-加载JS

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

<script type="text/javascript" src="https://ikmoe.com/live2d.js"></script>

三-加载人物

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

<script type="text/javascript">
    loadlive2d("live2d", "https://ikmoe.com/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:

[打赏一下]
  • 版权声明:本文基于《知识共享署名-相同方式共享 3.0 中国大陆许可协议》发布,转载请遵循本协议
  • 文章链接:https://ikmoe.com/7218.html [复制] (转载时请注明本文出处及文章链接)
上一篇:
:下一篇

作者:月宅

介绍:今天也要看我装逼吗?

文章:2624篇
https://ikmoe.com/
最后更新:18-01-05

33 条评论

gravatar

  1. 像晚约 1
    初来乍到

    签到成功!be86172cdd8fc6cc633871815cd9ac6b签到时间:下午7:07:08每日打卡,生活更精彩哦~

    #倒数1楼
  2. be86172cdd8fc6cc633871815cd9ac6b

    #倒数2楼
  3. 未来 1
    初来乍到

    签到成功!签到时间:下午9:26:27每日打卡,生活更精彩哦~

    #倒数3楼
  4. 18G 2
    喜欢月宅

    签到成功!签到时间:下午1:47:26每日打卡,生活更精彩哦~

    #倒数4楼
  5. Qa 1
    初来乍到

    邮件订阅哪有RSS方便 :黄色滑稽脸:

    #倒数5楼
  6. 情醉中国风 5
    正正正正

    傲游浏览器RSS阅读器订阅的 :黄色滑稽脸:

    #倒数6楼
  7. summerlemon 3
    爱上月宅

    谢谢啦~我就是懒人,准备要把这些教程里的代码带走啦~

    #倒数7楼
    1. 月宅 6
      月宅后宫
      [最萌站长]

      @summerlemon :阿鲁8: 好哒

  8. littleplus 2
    喜欢月宅

    看起来懒人们需要一个插件 :黄色滑稽脸:

    #倒数8楼
    1. 月宅 6
      月宅后宫
      [最萌站长]

      @littleplus :黄色滑稽脸: 交给你了,上吧!

  9. 后宫学长 3
    爱上月宅

    其实,tia 是模型名字,可以换掉……
    然后,default-costume.png 这个,随便什么名字都行的…… :阿鲁6:

    #倒数9楼
    1. 月宅 6
      月宅后宫
      [最萌站长]

      @后宫学长 其实完全是为了方便

  10. Sakura 2
    喜欢月宅

    对于懒得可以破记录的人来说还是太复杂了23333333

    #倒数10楼
  11. ha 1
    初来乍到

    别的倒还好,就是这个眼老是眯着是咋个回事啊,而且眯得这个程度总让我有种她被玩坏了的既视感 :贴吧表情28:
    https://www.moelori.cn/images/2018/01/04/EB3K.png

    #倒数11楼
    1. 月宅 6
      月宅后宫
      [最萌站长]

      @ha 看见正字了吗

    2. ha 1
      初来乍到

      @ha 我了个去(✪╻✪)‼‼‼‼‼‼ :吃惊:
      无fuck说
      牛x了

    3. 后宫学长 3
      爱上月宅

      @ha 快黑化了的感觉。 :瞧你那傻样:

    4. ha 1
      初来乍到

      @ha 之前的回复消失了 :贴吧表情6:

      这个正字厉害了,真的无话可说 :贴吧表情4:

    5. 月宅 6
      月宅后宫
      [最萌站长]

      @ha 不是消失了。。被判定为垃圾评论,自动删了,我刚刚才看见回收站2333

  12. 情醉中国风 5
    正正正正

    订阅了

    #倒数12楼
    1. 月宅 6
      月宅后宫
      [最萌站长]

      @情醉中国风 :阿鲁5: 你才没有订阅我

  13. 狂放 5
    正正正正

    我知道但我PS太烂了,只好扒diygay的了

    #倒数13楼
    1. 月宅 6
      月宅后宫
      [最萌站长]

      @狂放 :黄色滑稽脸: 他的在贴吧有下

    2. 月宅 6
      月宅后宫
      [最萌站长]

      @狂放 有个33还是22的,更好看 :阿鲁8:

  14. HXC 1
    初来乍到

    不错啊,总算知道这个小人怎么弄的了 :黄色滑稽脸:

    #倒数14楼
    1. 月宅 6
      月宅后宫
      [最萌站长]

      @HXC :阿鲁8: 可以去看看其他人的教程,更棒

  15. Zero 3
    爱上月宅

    签到成功!签到时间:上午8:37:41每日打卡,月宅祝你生活越过越好喔~

    #倒数15楼
  16. Zero 3
    爱上月宅

    对于真正的懒人来说还是好麻烦2333333333 :黄色滑稽脸: :黄色滑稽脸:

    #倒数16楼
    1. 月宅 6
      月宅后宫
      [最萌站长]

      @Zero :黄色滑稽脸: 不就是想要插件吗滑稽

  17. Guest 1
    初来乍到

    我倒是喜欢Rss,可惜QQ邮箱的Rss不争气,不支持http/2的Rss订阅
    其他工具又没有历史记录,不是很人性化。另外,小人儿不可以调戏吗?不会说些羞羞( # ▽ # )的话吗

    签到成功!签到时间:上午8:28:01每日打卡,月宅祝你生活越过越好喔~

    #倒数17楼
    1. 月宅 6
      月宅后宫
      [最萌站长]

      @Guest 可以,懒得弄这些功能

    2. 月宅 6
      月宅后宫
      [最萌站长]

      @Guest 参考别人的教程与小人,会说话会娇喘还会雅蠛蝶 :黄色滑稽脸:

  18. 月宅 6
    月宅后宫
    [最萌站长]

    签到成功!签到时间:下午11:51:04每日打卡,月宅祝你生活越过越好喔~

    :阿鲁8:

    #倒数18楼
当前页面评论被关闭,原因如下: