把live2D添加进网页

Live2D是一种应用于电子游戏的绘图渲染技术，技术由日本Cybernoids公司开发。通过一系列的连续图像和人物建模来生成一种类似三维模型的二维图像。
—来源：https://baike.baidu.com/item/Live2D/8496493
那么我们怎么把live2D人物模型添加进网页呢？
我就以我的一个网页为例：
先看效果
可以实现鼠标交互。

开始！

初级部分

1.软件准备

如果只是简单使用的话没有什么技术含量：
live2D做好后本地直接打开是没有效果的，所以我们先用搭建出本地服务器环境。

使用XAMPP或其他软件搭建出本地服务器
剩下的部分我们可以直接去“后宫学长”的博客查看具体操作：https://haremu.com/p/205
以上就是初级部分

我在此详细讲解高级操作

我们看到，这些人的博客每次刷新后人物都会改变服装，那么这是怎么实现的呢？
1.我们先来分析live2D文件夹的目录

css、js文件夹放的什么我就不多说了，我们重点来看model文件夹
model顾名思义就是放模型文件的地方
其中tia是人物名，没什么意义。知道一个人物模型放一个文件夹就可以了。
textures是放人物贴图的地方
model.moc是人物模型
model.json类似于人物贴图和模型的索引
2. 接下来我们重点关注model.json文件

可以看到，textures存放的是模型的贴图

"textures":["textures/default-costume.png"],

我们把贴图文件放在\live2d\model\人物名\textures下，
获取每一个贴图的文件名，存放在model.json的textures下

换装的原理就是每次载入网页时为模型指定不同的人物贴图。
我们可以在主页中加上这段：

         <script type="text/javascript">function RandomNumBoth(Min,Max){var Range = Max - Min;var Rand = Math.random();var num = Min + Math.round(Rand * Range); //四舍五入return num;}$.getJSON('/live2d/model/Pio/model.json', function(model) {modelObj = JSON.parse(JSON.stringify(model, null, 2)); //这里textures = modelObj.textures;modelObj.textures = ['/live2d/model/Pio/textures/' + textures[RandomNumBoth(0,textures.length)]];loadlive2d('live2d', '/live2d/model/Pio/model.json', '', modelObj);});console.log("使用的贴图和模型：" + modelObj);</script>

原理就是通过 $.getJSON()来获取model.json，在随机读取textures中的一个贴图文件载入就完成了。
模型和贴图主要来自于游戏《药水制作师》

结束

把live2D模型放上网页相关推荐

JavaWeb项目中添加live2d模型
前言:之前个人博客中配置的live2d模型的API失效了,所以重新折腾了一下,在自己服务器配置了 live2d 的 API,在此记录一下 JavaWeb项目中添加live2d模型之前在个人博客中使用 ...
从Maya中把模型搬运至网页的过程
虽然利用threejs来在网页中渲染3d模型不是第一次折腾了,但是还是遇到了各种问题.总结下我所遇到的问题,希望能给正在使用threejs的小伙伴一个帮助. 一.所使用的软件与开发环境 Maya201 ...
为什么网页打不开?QQ可以上网页打不开的解决办法
最近经常有网友问这样一个问题,为什么网页打不开?为什么QQ可以上网页无法打开?围绕这些问题电脑百事网为大家在这里做个总结,希望对遇到网页无法打开的朋友有所帮助! 首先我们必须先排除一些最简单的问题,网 ...
不好意思，我和 Java 内存模型杠上了！
昨天发完深入理解 Java 内存模型后将文章转发到朋友圈后(附带开玩笑的说了句:拿着这篇文章.携上 JSR 133,老艿艿再也问不倒我了),刚好彤哥做了下点评(加上 CPU 缓存的架构来类比会更好 ...
c4d导入html,C4D模型导出到网页插件 C4D Web Exporter（WIN）
C4D模型导出到网页插件 C4D Web Exporter(WIN) PlugInTransform.png (163.29 KB, 下载次数: 119) 2016-5-16 01:39 上传 Wel ...
Hexo项目：添加live2d模型
Hexo项目:添加live2d模型文章目录 Hexo项目:添加live2d模型项目最终效果图 1.添加Hexo的live2d接口 2.下载live2d的模型 3.配置live2d模型显示 4.li ...
filco蓝牙不好用_最新黑科技感应式音箱！无需接口不用蓝牙，放上手机 1s畅享动听音乐~...
仙贝君每天最惬意的时间,就是下班回家打开音箱的时候:一首歌,一杯咖啡,一本书,蜷在沙发上就可将烦恼压力不快暂时统统抛弃在脑后.今天就给大家推荐一款能够秒杀蓝牙音箱的感应音箱--[开物KAWOO灵犀感应 ...
php 鼠标点击图片放大,css3如何实现鼠标放上图片放大？（附代码）
在css3的学习中,我们会经常做一些小的动画效果,这感觉非常有趣,所以今天的这篇文章将给大家来介绍关于css3实现图片放大的一个效果,有兴趣的小伙伴可以看一下. 我们都知道css3中增加了一个tran ...
yolo如何降低loss_你一定从未看过如此通俗易懂的YOLO系列(从v1到v5)模型解读 (上)...
转载请务必注明出处. 科技猛兽:你一定从未看过如此通俗易懂的YOLO系列(从v1到v5)模型解读 (上)zhuanlan.zhihu.com 0 前言本文目的是用尽量浅显易懂的语言让零基础小白能够 ...
解决能上QQ不能上网页的批处理〖罗斌原创〗
解决能上QQ不能上网页的批处理[罗斌原创] 今天闲着没事就写个解决局域网里面有些电脑能上QQ却不能上网页的批处理来给大家用用,这个问题相信很多管理员都遇到过吧,我只是把我总结起来的经验和处理方法,写成 ...

把live2D模型放上网页

把live2D添加进网页

开始！

初级部分

1.软件准备

我在此详细讲解高级操作

结束

把live2D模型放上网页相关推荐

最新文章

热门文章