为你的网站加上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的动态小挂件，博君一晒

最新文章

热门文章