个人网站接入live2d详细教程

最新推荐文章于 2024-08-09 07:46:01 发布

举个锤子²³³³

最新推荐文章于 2024-08-09 07:46:01 发布

阅读量1w

点赞数 8

分类专栏：网站开发文章标签： django live2d 看板娘网站插件

本文链接：https://blog.csdn.net/qq_26024785/article/details/100796732

版权

网站开发专栏收录该内容

12 篇文章 1 订阅

订阅专栏

Live2D是一种应用于电子游戏的绘图渲染技术，技术由日本Cybernoids公司开发。通过一系列的连续图像和人物建模来生成一种类似三维模型的二维图像，对于以动画风格为主的冒险游戏来说非常有用，缺点是Live 2D人物无法大幅度转身，开发商正设法让该技术可显示360度图像。---------------------------------百度百科
在开发个人博客网站时无意间发现了这个东西，仿佛打开了新世界，无论如何也要在自己的博客中加入live2d（以下称看板娘）。在网上找了很久的接入教程，正巧发现了一篇基于django框架的看板娘接入教程（实际上和开发语言、后端框架没有太大关系，但有些静态文件设置还是有所区别）。当时忘记保存大佬的文章链接，以后找到的话会加到文章末尾。
接入看板娘之前需要先下载相关文件：
链接：https://pan.baidu.com/s/1SkMbm_Q8MAz9alF_fAD_Yw
提取码：8k2s
文件目录
如果本地没有jquary文件的话将网盘中的jquery-2.2.0.min.js下载下来并放在js目录中。
这里还有一个重要的步骤，就是讲live2d目录下的message.json文件文件名改为message.jsonmessage.json

目录介绍：

css：这个不需要过多解释，里面存放的是看板娘需要的样式文件。
js：这个也不需要过多解释，很明显这是剑圣
model：这个文件夹中存放看板娘的模型图片，以及相关的动作、音频文件。如果需要更换看板娘模型的话需要替换这个文件夹中的相关文件。

接入方法：

① 新建HTML页面，引入live2d的css、js文件。
相关代码：

<body>

<!--引入css文件-->
<link rel="stylesheet" href="{%static 'live2d/css/live2d.css'%}" />

<!--引入js文件-->
<script src="{%static 'live2d/js/jquery-2.2.0.min.js'%}"></script>
<script type="text/javascript">
        var message_Path = '{%static 'live2d/message.json' %}';
        var home_Path = 'https://www.jhxblog.cn/'               //此处可以修改为你的域名，必须带斜杠
</script>
<script type="text/javascript" src="{%static 'live2d/js/live2d.js'%}"></script>
<script type="text/javascript" src="{%static 'live2d/js/message.js'%}"></script>
<script type="text/javascript">
    loadlive2d("live2d", "{%static 'live2d/model/tia/model.json'%}");
</script>

</body>

由于django框架静态文件的加载机制使文件URL格式为{%static ‘xxx/xxx/xxx.xx’%},使用其他语言或框架时需要吧URL修改成相应的格式。
② 添加canvas

<div id="landlord">
       <div class="message" style="opacity:0"></div>
       <canvas id="live2d" width="280" height="250" class="live2d"></canvas>
       <div class="hide-button">隐藏</div>
</div>

③ 启动服务器，打开网页查看效果。
效果图
在这里插入图片描述

文件修改

其实看板娘的接入到这里已经完成了，但是如果人物模型上方的文字能DIY成自己的岂不美哉？这个可以有！首先，打开live2d目录下的message.jsonmessage.json文件：
在这里插入图片描述
这里面的行为是与用户交互时触发的，比如click表示当你点击看板娘时，她会随机说一句text中的话，同理上面的mouseover表示鼠标操作，selector表示当你选中xxx时所触发的行为，后面表示的是相应标签的类名。
打开live2d/js/message.js文件还可以更改进入页面、复制文本时看板娘说的话。
关于更换看板娘模型方面需要替换model中的文件，具体如何操作在网上一搜一大把这里就不做阐述了。