为网站页面添加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页面技术还是很有意思的,同时对于游戏跨平台的制作有着跨时代的意义,前端技术博大精深,由小见大,学习的道路还是山高水深。

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在网页上添加Live2D,需要先准备好以下文件: 1. Live2D Core SDK:下载地址为 https://live2d.github.io/#js-core。 2. Live2D 模型文件:可以在网络上搜索到各种免费和付费的Live2D模型,下载后需要将其解压缩到本地。 3. jQuery 库:如果网页中已经用到了jQuery,可以省略这一步。 接下来,按照以下步骤逐步操作: 1. 创建一个 HTML 文件,引入 jQuery 和 Live2D Core SDK: ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Live2D Demo</title> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@live2d/[email protected]/dist/Live2DCubismCore.min.js"></script> </head> <body> </body> </html> ``` 2. 在 `body` 中添加一个 `canvas` 元素: ``` <canvas id="live2d" width="300" height="400"></canvas> ``` 3. 在 JavaScript 中加载模型文件: ``` var model; function loadModel() { var modelJson = "模型文件的路径/model.json"; var modelDir = "模型文件的路径/"; Live2D.core.readModel(modelJson, function (buf) { model = Live2D.core.createModel(buf); model.loadTextures(modelDir, function () { draw(); }); }); } ``` 4. 在 `draw` 函数中绘制模型: ``` function draw() { var canvas = document.getElementById("live2d"); if (canvas.getContext) { var gl = canvas.getContext("webgl"); model.setGL(gl); gl.clearColor(0.0, 0.0, 0.0, 0.0); gl.clear(gl.COLOR_BUFFER_BIT); model.draw(); } } ``` 5. 最后调用 `loadModel` 函数即可加载模型并在网页中显示Live2D。 ``` $(document).ready(function () { loadModel(); }); ``` 以上就是给网页添加Live2D的基本步骤,具体实现还需要根据实际情况进行调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值