当前位置:网站首页>为你的网站加上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的项目代码,博君一晒,与君共勉。
边栏推荐
猜你喜欢
随机推荐
使用ApacheBench来对美多商城的秒杀功能进行高并发压力测试
二、线性结构
分分钟快速定制您的专属个性化软件应用——BizTool自动化工具简介
上周热点回顾(8.1-8.7)
shell 创建LVM逻辑据卷
Redis 定长队列的探索和实践
Hystrix熔断器
Replication监控及自动故障切换
LeetCode_487_最大连续1的个数Ⅱ
分布式系统设计策略
萤石、小米对垒智能摄像头
Kunpeng Developer Creation Day 2022: Kunpeng Full-Stack Innovation and Developers Build Digital Hunan
便利贴--48{再次,适配屏幕宽高class}
关于振弦采集模块及采集仪振弦频率值准确率的问题
leetcode 1584. 连接所有点的最小费用
ssh 安全 之 密钥登录
MongoDB是什么,怎么用?
彻底弄清楚session,cookie,sessionStorage,localStorage的区别及应用场景(面试向)
结合“xPlus”探讨软件架构的创新与变革
ReentrantLock原理,ReentrantLock和synchronized区别








