个人网站接入live2d详细教程
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中的文件,具体如何操作在网上一搜一大把这里就不做阐述了。
此接入方法django框架亲测可用,其他语言或框架可能会出现一些bug,具体问题还需使用者根据具体情况分析解决。
原文地址: https://www.jhxblog.cn/article/?articleid=9
个人网站接入live2d详细教程相关推荐
- 企业网站建设的详细教程
网站建设教程(企业网站建设的详细教程) 网站建设教程,今天珍奶bb给大家简单唠唠企业网站建设流程及步骤是什么?企业建网站早已不是一件很难的事情,虽然建设网站涉及到代码.服务器.域名申请等等,但是这么专 ...
- Hexo+GitHub搭建个人网站全网最详细教程
前言 这个故事很长,还要从一只蝙蝠说起! 大二寒假在家闲来无事一直想做一个网站但是苦于没有门路,于是我去各大论坛搜索关于搭建网站的资料,这一搜还真给搜到了,于是这一套Hexo+GitHub搭建个人博客 ...
- 2023网站接入谷歌广告教程
如果你是一名网站主,将谷歌广告接入到你的网站中可以为你带来多方面的好处.接下来,我们将探讨这些好处并解释如何轻松地将谷歌广告集成到你的网站中. 想要成为谷歌广告的流量主,需要满足一些条件,并且需要经历 ...
- 网站SEO优化详细教程分享!_网络推广是干什么的
网站从建站初期,到后期有一个好的排名,这中间需要站长们坚持不懈的努力.做SEO优化不是一件简单的事情,除了需要长期坚持外,还要掌握正确的方法,在网站的不同时期采用不同的方法是一件非常重要的事情.今天中 ...
- 网站搭建超详细教程(零基础)
前期准备 服务器 域名 宝塔安装 网站源码 服务器购买 这里推荐本工作室免备案服务器产品,梦想云服务器:idc.mengxiangyun.cn,自己有服务器的就可以直接看下一步了 选择产品 注册账号并 ...
- 腾讯云轻量应用服务器怎么搭建网站?超详细建站流程
腾讯云轻量应用服务器怎么搭建网站?太简单了,轻量服务器选择宝塔Linux镜像,然后在宝塔面板上添加站点,以WordPress建站为例,腾讯云服务器网来详细说下腾讯云轻量应用服务器搭建网站全流程,包括轻 ...
- vue - 【超详细】网站接入使用支付宝支付功能,点击支付跳转新页面后生成订单及支付二维码,实现支付宝在线付款详细的教程(整个支付的完整配置及支付流程,一键复制源码开箱即用)!
效果图 在vue网站网页项目中,实现跳转新页面生成订单,进行 "支付宝" 支付详细教程,包括详细的配置及示例完整源代码, 你可以直接复制示例的完整源码(保证可用),改个参数就能用了 ...
- Java接入支付宝支付超级详细教程——从入门到精通
Java接入支付宝支付教程 源码下载 源码获取:点击获取源码 本文介绍了"二维码付款"的代码.其他支付方式的代码都在源码中. 一.创建应用 1.登录支付宝开放平台 支付宝开放平 ...
- 宝塔搭建网站教程php,怎么利用宝塔面板搭建网站详细教程
利用宝塔面板搭建网站是当前主流形式,宝塔面板操作简单,可视化操作,是新手和老司机搭建网站的首选.今天我的主题网就给小白们分享下怎么利用宝塔搭建自己的网站.如果你还没有安装宝塔可以参考:宝塔面板安装小白 ...
最新文章
- 自己动手制作的一个JDBC的套件封装,求指导
- 用findstr查找特定文件里面的字符串
- 【XSY2719】prime 莫比乌斯反演
- 安装和配置Tomcat
- 【windows gdi+】GDI+ Image类加载图片时异常问题处理与分析
- [codevs 3273] 两圆的交
- 高等数理统计(part2)--常见的离散型分布
- centos7升级openssh
- Vuejs 插值操作
- iOS 14.5广告跟踪功能使广告商在安卓支出增长21%
- 手机上的星号键和井号键有什么用?
- 每日算法系列【LeetCode 1039】多边形三角剖分的最低得分
- 作业2——需求分析原型设计
- 【cluvfy】集群验证工具cluvfy使用方法——stage
- item_cat_get - 获得淘宝商品类目
- 基于JavaWeb的小型超市管理系统的设计与实现
- Cisco CCNP 帧中继网络教程
- 八类网线测试仪之深入探讨-AEM
- 外接竖屏显示器virtual box虚拟机屏幕分辨率不能自适应
- 3D测量| 主动模式投影提高AOI三维测量精度