不用插件自己搭一个可以换人物的看板娘

前面我们介绍了几个好看的二次元老婆,但是这些还是有一点点不足,就是不能同时切换不同人物,在写为你的博客添加二次元老婆的时候,我无意发现了有一个大佬的项目,所以我就借鉴了一下他的项目改成了现在这个样子。废话不多说,现在开始教程

先贴出大佬的文章地址,因为这个项目是采用前后端分离的模式,所以分为两部分:前端代码的搭建以及后台API的搭建。当然作者也是贴出了现成的API调用地址,但是我们最好还是自己搭建一个API服务器,因为这样就可以自己修改和添加模型(别人的接口请求量太多了,我们还是体谅一下别人吧)。

好的现在开始教程:

先到作者的github上面下载前端代码

下载好后可以直接放到我们服务器的根目录,接下来我们就可以开始把调用代码嵌入到我们的网页中去。

目前有两种方式:直接嵌入或者调用js代码自动嵌入

先来讲一下直接嵌入,先嵌入如下代码到头部(注意修改waifu.css的地址):

<link rel="stylesheet" type="text/css" href="https://www.example.com/path/to/waifu.css"/>

然后在加入如下代码到尾部(注意:须 jQuery 支持

<div class="waifu">
    
    <!-- 提示框 -->
    <div class="waifu-tips"></div>
    
    <!-- 看板娘画布 -->
    <canvas id="live2d" class="live2d"></canvas>
    
    <!-- 工具栏 -->
    <div class="waifu-tool">
        <span class="fui-home"></span>
        <span class="fui-chat"></span>
        <span class="fui-eye"></span>
        <span class="fui-user"></span>
        <span class="fui-photo"></span>
        <span class="fui-info-circle"></span>
        <span class="fui-cross"></span>
    </div>
    
</div>

<script src="path/to/waifu-tips.js"></script>
<script src="path/to/live2d.js"></script>

<!-- 初始化看板娘,加载 waifu-tips.json -->
<script type="text/javascript">
	/* 可直接修改部分参数 */
    live2d_settings['modelId'] = 5;                  // 默认模型 ID
    live2d_settings['modelTexturesId'] = 1;          // 默认材质 ID
	/* 在 initModel 前添加 */
	initModel("https://www.example.com/path/to/waifu-tips.json")
</script>

当然,我们可以直接自动加载,如果你要自动加载的话,前面两部都不需要做,直接在尾部嵌入如下代码

<script src="https://www.example.com/path/to/autoload.js" type="text/javascript"></script>

然后在修改一下autoload.js,把里面的引用文件改一下路径。然后就可以直接使用了,如果不想搭API服务器的可以先走了,下面我们讲一下怎么搭建API服务器(搭建自己API的好处就是可以自己添加模型还可以节作者服务器的负担):

 

注意

这里说一下可能遇到的坑

1.要使用看板娘我们就必须让我们的网页有jQuery,这里就是直接引入jQuery文件就行了,具体自己到百度上搜

2.如果你选择的是自动引入,我们那个引入时需要修改路径,autoload.js里面的几个文件必须是你自己网站的完整路径(要加上网址的完整路径)。

3.autoload.js里面有一个文件是写错了的,waifu.css这个文件中间没有min,这个要特别注意。

 

首先先到作者的github上面下载模型切换的API源码

下载好好直接上传到自己服务器的根目录即可,比如我们在自己的根目录下新建一个API的文件夹,API源码就放放在里面。

然后到waifu-tips.js文件夹里面修改一下,改成自己的API地址

接下来,就可以直接访问自己的网站查看效果了。当然这个文件里面可以修改自己看板娘的大小。

注意:你需要先清除浏览器的数据,然后才能看到。

还有,这里在写文件路径的时候最好加上自己的网址,单纯使用相对路径好像没用。(可能是我相对路径引用错了吧。)当然如果你想调节看板娘的大小的话可以修改wifu-tip的那个js文件。

最后给大家看下效果

点赞
  1. derder说道:

    大佬能给个QQ嘛,我有点不太懂 :xinsui: 我的邮箱就是QQ号 :aixin:

    1. 小游 小游说道:

      可以的,已经发送邀请了 :bilibili27:

  2. 秦有时说道:

    :bugaoxing: 用wordpress太慢了改成typecho了,喜欢折腾没法,但我准备按照你的设置方式嵌入和自动载入 看板娘同时都遇到了问题,嵌入人不见了,自动载入人和模块都不见了 :han:

    1. 小游 小游说道:

      这个应该是通用的啊,你在wordpress上有用的话,这里也应该有用啊,你在检查一下哪里是不是漏了?

      1. 秦有时说道:

        刚刚咋回事? 在调试?

        1. 小游 小游说道:

          对,好像出了一点bug :bilibili42:

          1. 秦有时说道:

            你的看板娘也消失了~~ :yinxian:

        2. 小游 小游说道:

          对,刚才在调试 :bilibili42:

        3. 小游 小游说道:

          看板娘还在啊

          1. 秦有时说道:

            刚才没了 , :yinxian: 你帮我看一下调试页面吧 我快愁死了

          2. 秦有时说道:

            请问 自制的模型 如何才能在自己的api生效?

    2. 小游 小游说道:

      大佬还能自制看板娘模型啊?你这个要看最早开发出这个看板娘的大佬了,这个好像要自己调姿势然后生成动作文件,反正挺麻烦的

      1. 秦有时说道:

        不算是自造吧,修改猫与向日葵版本的血小板 ,早就想弄了 但是 就是在api 调用 总是JSON调用素材图出错,
        ```
        type "Live2D Model Setting"
        model "../model/kesshouban/kesshouban_v2/model.moc"
        textures
        0 "../model/kesshouban/kesshouban_v2/texture/../model/kesshouban/kesshouban_v2/texture_00.png"
        motions
        idle
        0
        file "../model/kesshouban/kesshouban_v2/motions/Idle.mtn"
        sleepy
        0
        file "../model/kesshouban/kesshouban_v2/motions/Nemui.mtn"
        flick_head
        0
        file "../model/kesshouban/kesshouban_v2/motions/Anone_Synced.mtn"
        tap_body
        0
        file "../model/kesshouban/kesshouban_v2/motions/Dance.mtn"
        ```

        1. 小游 小游说道:

          你要把图片名字的 texture去掉,要不然替换时会出错,当初我也卡这半天,更具体可以看一下我写的魔改主题的文章,里面有详细介绍

  3. Asuka说道:

    博主您好,按照帖子的教程已经搭建成功博客了。非常感谢 :bilibili4: ,在安装主题时遇到了好多坑,可能是自己没有基础的原因。无法更新主题的配置文件、找不到添加live2d代码的地方,可以的话能用微信或者qq交流一下吗?

    1. 小游 小游说道:

      可以的,加我QQ:1487998424

  4. Asuka说道:

    dalao可以方便留个qq不。。。 :bilibili2: ,安装主题后插件一类的默认都没有,想自己装一下。可是wp无法更新文件,刚开始玩不久

发表评论

昵称和uid可以选填一个,填邮箱必填(留言回复后将会发邮件给你)
tips:输入uid可以快速获得你的昵称和头像

Title - Artist
0:00