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

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

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

好的现在开始教程:

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

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

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

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

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

然后在加入如下代码到尾部 (注意:须 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>
Markup

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

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

然后在修改一下 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 文件。

最后给大家看下效果

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

- THE END -
Tag:

昔日轮回

12 月 20 日 20:00

最后修改:2019 年 12 月 20 日
0

非特殊说明,本博所有文章均为博主原创。

共有 0 条评论

您必须 后可评论