为你的网站加上live2d的动态小挂件,博君一晒
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_122
喜欢二次元的朋友一定对大名鼎鼎的live2d技术并不陌生,live2D是一种应用于电子游戏的绘图渲染技术,技术由日本Cybernoids公司开发,通过一系列的连续图像和人物建模来生成一种类似三维模型的二维图像。
可以看到本站右下角出现了一只可爱的小喵
可以看到这只猫会跟着你的鼠标运动,有着伪3D的感觉,这种技术的核心就是明明是2D平面设计风格,却有3D行为交互的效果就是live2d
值得一提的是Live2D游戏也风靡一时,比较著名的有《梦幻俱乐部》(DREAM C CLUB),其在android端首次使用live2d技术,可以说有着里程碑的意义,得到了业界的一致好评。
live2d官方提供了很多平台的SDK),包括iOS,Android,Flash,Unity,openGL等,然后如果要在网页中呈现,则可以提供了WebGL SDK,可以参照官方网站:https://www.live2d.com/
live2d不仅在移动端,同时也可以在网页中呈现,首先网页要引入官方提供的webgl的js压缩包 L2Dwidget.min.js,建议在页面底部延迟加载,因为其体积过于庞大,如果不延迟加载,会严重影响你的网站的加载速度和性能,然后在页面中写入以下代码:
var arr = ['wanko','hibiki','hijiki','tororo'];
var index = Math.floor((Math.random()*arr.length));
var name = arr[index];
L2Dwidget.init({
pluginRootPath: "live2dw/",
pluginJsPath: "lib/",
pluginModelPath: "live2d-widget-model-"+name+"/assets/",
tagMode: false,
debug: false,
model: { jsonPath: "/live2dw/live2d-widget-model-"+name+"/assets/"+name+".model.json" },
display: { position: "right", width: 150, height: 300 },
mobile: { show: true },
log: false
})
这里我们设置一组小挂件模型,有猫狗和小女孩,随机获取一个模型进行加载,出现的位置设定为右下角,同时在移动端设置兼容。
总体上,二次元的webgl页面技术还是很有意思的,同时对于游戏跨平台的制作有着跨时代的意义,前端技术博大精深,由小见大,学习的道路还是山高水深,最后还是贴出live2d的项目代码,博君一晒,与君共勉。
https://gitee.com/QiHanXiBei/mylive
原文转载自「刘悦的技术博客」 https://v3u.cn/a_id_122
为你的网站加上live2d的动态小挂件,博君一晒的更多相关文章
- 给自己的网站加上robots.txt
今天给自己的网站加了一个robots.txt,在网上收集整理了一些资料,给自己网站也加上了robots.txt ! 顺便给大家分享一下! 一.robots.txt是什么? robots.txt是一个纯 ...
- 免费为网站加上HTTPS
前言 最近有好几位同学直接微信赞助说快点更新文章.这个要和大家说声抱歉,的确很久没有写文章了.我们也不找借口,我会尽力保证多写文章.今天我们的主题来讲解 如何给自己的网站 加上HTTPS HTTPS是 ...
- 总结的一些网站利于搜索引擎优化的小常识及SEO优化
网站利于搜索引擎优化的小常识 1. 尽量用独立IP和空间原因:同IP下其他网站受罚,可能会对你站有影响.如果你的站和很多垃圾.色情站同在一个服务器,搜索引擎会喜欢吗? 2. 做不同内容网站时,避免使用 ...
- 批量下载网站图片的Python实用小工具(下)
引子 在 批量下载网站图片的Python实用小工具 一文中,讲解了开发一个Python小工具来实现网站图片的并发批量拉取.不过那个工具仅限于特定网站的特定规则,本文将基于其代码实现,开发一个更加通用的 ...
- 解决织梦手机网站M文件夹动态游览不生成html
今天的做手机网站的时候,发现dede织梦M文件夹下会生成index.html.对于手机网站来说,太麻烦了.每次更新手机网站首页都要把index.html删除掉重新生成. 然而织梦不支持手机网站首页动态 ...
- 教程:动手用自己电脑搭建一个网站 (nat123 花生壳 动态域名 个人电脑做服务器)
先ps一下..今晚试了N种方法,终于找到一个靠谱 免费 好用的方法,来改装自己电脑成为服务器,在外网也能通过域名访问了!!! 需要准备的东西: Tomcat:这个是web容器,其实有了这个就已经让电脑 ...
- ASP.NET Core 返回文件、用户下载文件,从网站下载文件,动态下载文件
ASP.NET Core 中,可以在静态目录添加文件,直接访问就可以下载.但是这种方法可能不安全,也不够灵活. 我们可以在 Controller 控制器中 添加 一个 Action,通过此Action ...
- 给自己的网站加上HTTPS
前言 现在谷歌等厂商大力推行https协议,如果你的网站不支持https,在使用谷歌浏览器时,会被警告网站不安全.w(゚Д゚)w,不安全?哪里不安全了?OK,那我改成支持https好吧.关于http怎 ...
- 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_3-4.动态Sql语句Mybaties SqlProvider
笔记 4.动态Sql语句Mybaties SqlProvider 简介:讲解什么是动态sql,及使用 1. @UpdateProvider(type=VideoSqlP ...
随机推荐
- 斯坦福NLP课程 | 第15讲 - NLP文本生成任务
作者:韩信子@ShowMeAI,路遥@ShowMeAI,奇异果@ShowMeAI 教程地址:http://www.showmeai.tech/tutorials/36 本文地址:http://www. ...
- Java高并发-概念
一.为什么需要并行 业务要求 http处理多个客户端请求 java虚拟机启动多个线程 进程开销比线程大的多 性能 多线程在多核系统比单线程要好的多 摩尔定律失效 二.几个重要概念 2.1 同步和异步 ...
- 亿信BI——EXCEL组件使用流程
功能模块: 用户点击"excel输入"模块进行excel文件导入操作,excel导入页面的顶部导航栏包括基本属性.文件设置.格式设置和字段列表四部分. 基础属性: 在基本属性模块部 ...
- nacos 快速入门
每日一句 外表可是具有欺骗性的. 每日一句 No victory comes without a price. 凡是成功就要付出代价. 概述 这个快速开始手册是帮忙您快速在您的电脑上,下载.安装并使用 ...
- 计算机网络 - OSI 7层网络模型各层对应的功能
应用层 - 负责给应用程序提供统一的接口 表示层 - 负责把数据的解压缩和编码 会话层 - 负责会话的管理(建立和终止) 传输层 - 负责端到端的数据传输 网络层 - 负责数据的路由.转发.分片 数据 ...
- 22.LVS+Keepalived 高可用群集
LVS+Keepalived 高可用群集 目录 LVS+Keepalived 高可用群集 keepalived工具介绍 Keepalived实现原理剖析 VRRP(虚拟路由冗余协议) VRRP 相关术 ...
- 实现领域驱动设计 - 使用ABP框架 - 解决方案概览
.NET解决方案的分层 下图显示了使用ABP的 应用启动模板 创建的Visual Studio解决方案: 解决方案名称为问题跟踪,它由多个项目组成.通过考虑DDD原则以及开发和部署实践,该解决方案是分 ...
- 安装ImageMagick7.1库以及php的Imagick扩展
由于ImageMagick7以下不支持heic等图片格式,所以重新安装了ImageMagick7.1版本支持heic格式,并写此文章记录一下. 如果安装过程中遇到一些未知的错误,https://ima ...
- 全新升级的AOP框架Dora.Interception[6]: 框架设计和实现原理
本系列前面的五篇文章主要介绍Dora.Interception(github地址,觉得不错不妨给一颗星)的编程模式以及对它的扩展定制,现在我们来聊聊它的设计和实现原理.(拙著<ASP.NET C ...
- NC16692 [NOIP2001]求先序排列
NC16692 [NOIP2001]求先序排列 题目 题目描述 给出一棵二叉树的中序与后序排列.求出它的先序排列.(约定树结点用不同的大写字母表示,长度 ≤ 8). 输入描述 2行,均为大写字母组成的 ...