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


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

先贴出大佬的文章地址,因为这个项目是采用前后端分离的模式,所以分为两部分:前端代码的搭建以及后台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的好处就是可以自己添加模型还可以节作者服务器的负担):

 

[dangerbox title="注意"]这里说一下可能遇到的坑

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

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

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

[/dangerbox]

 

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

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

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

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

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

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

最后给大家看下效果


文章作者: 小游
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 小游 !
  目录