为网站页面添加live2D小猫猫

live2D是一种应用于电子游戏的绘图渲染技术，技术由日本Cybernoids公司开发，通过一系列的连续图像和人物建模来生成一种类似三维模型的二维图像。

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小猫猫相关推荐

在网站页面标题显示小图片
一.在http://www.ico.la 中将你需要的图片转换成ico图标注意: 1. 原始图片必须为jpg.jpeg.gif.png格式之一 2. 原始图片文件大小<300k. 二.将成功 ...
flex 底部固定_小猿圈网站页面底部固定的方法
网络发展到了今天,很多朋友对于网站已经不陌生了,但是当我们看网页时你注意到网站的底部了吗?虽然很少人会注意到他,但是如果不在底部的话,会很难看,今天小猿圈web前端讲师就为你介绍网站页面底部固定的方法 ...
实现微信小程序预览文件，预览页面添加倒计时
项目场景: 提示:1.实现小程序预览doc.docx.xls.xlsx.ppt.pptx.pdf类型文件 2.进入页面展示文件内容.开始按钮,点击,按钮变为[(**s)]倒计时 3.倒计时结束后,此按 ...
微信小程序页面添加背景图，图片全屏显示
前言微信的wxss里面不允许使用使用 background: url(),只能另外找方法进行背景图片显示. 方法 1.wxss页面里面设置页面的全屏宽高,以及view添加宽高 page{height ...
html网页制作看板娘原理,博客网页上添加live2D看板娘
一:前言 "看板娘",简而言之就是小店的女服务生,也有"吸引顾客,招揽生意,提高人气"等作用类似品牌形象代言人的含义.所用的技术是live2D,live2d并不 ...
SEO之网站页面优化策略
网站的页面优化,也即网页优化是对网页的程序.内容.版块.布局等多方面的优化调整,使其适合搜索引擎检索,满足搜索引擎排名的指标,从而在搜索引擎检索中获得的排名提升,增强搜索引擎营销的效果使网站的产品相关 ...
网站页面左右_广州网站优化的技巧是什么？
说到网站优化,大家都不陌生,但首先,我们知道为什么要优化网站吗?我们网站优化是为了改善网站在百度,搜狗等搜索引擎搜索结果排名中的网站页面,以增强搜索引擎的流量.下面拓王朝广州网站优化公司小编针对网站的 ...
【云速建站】按照给定模板从0开始编辑网站页面
[摘要] 本文以一个示例网站为模板,用云速建站从0开始一步步编辑网站页面内容. 1 示例网站这次已示例网站为模板,从零开始编辑建设网页示例网站地址:http://security-456 ...
雅虎网站页面性能优化的34条黄金守则（转）
2019独角兽企业重金招聘Python工程师标准>>> 雅虎团队经验:网站页面性能优化的34条黄金守则 1.尽量减少HTTP请求次数终端用户响应的时间中,有80%用于下 ...

为网站页面添加live2D小猫猫

为网站页面添加live2D小猫猫相关推荐

最新文章

热门文章