当前位置:网站首页>为你的网站加上live2d的动态小挂件,博君一晒
为你的网站加上live2d的动态小挂件,博君一晒
2022-08-08 11:24:00 【用户9127725】
喜欢二次元的朋友一定对大名鼎鼎的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的项目代码,博君一晒,与君共勉。
边栏推荐
- 分布式系统设计策略
- Mysql的分布式事务原理理解
- STM32的内存管理相关(内存架构,内存管理,map文件分析)
- #yyds Dry Goods Inventory#【Yugong Series】August 2022 Go Teaching Course 005-Variable
- 在SAP分析云里根据业务数据绘制词云(Word Cloud)
- Classificition Loss in target detection
- 如何使用shell来进行版本管理-以iptables为例
- vim /etc/profile 写入时 出现 E121:无法打开并写入文件解决方案
- 《STM32MP1 M4裸机CubeIDE开发指南》第二十四章 DAC实验
- 深度学习网络结构图绘制工具及方法
猜你喜欢
随机推荐
Leetcode 700. 二叉搜索树中的搜索
力扣(LeetCode)219. 存在重复元素 II(2022.08.07)
JVM的GC讲解及调优
测试开发专栏——序言:总结过去,展望未来
如何使用shell来进行版本管理-以iptables为例
四、哈希表
目标检测中的Bounding Box Regression Loss
皕杰报表之数据校验与处理
结合“xPlus”探讨软件架构的创新与变革
PG核心篇--物理存储结构
2G 3G 4G 5G 基站覆盖范围
文档数据库中的文档有什么用呢?
一文读懂配置管理(CM)
Thoroughly understand the differences and application scenarios of session, cookie, sessionStorage, and localStorage (interview orientation)
LeetCode 219. Repeating Elements II (2022.08.07)
小程序使用npm包
转转商品系统高并发实战(数据篇)
Leetcode 617. 合并二叉树
Redis 定长队列的探索和实践
ets declarative ui development, how to get the current system time