Live2D看板娘学习

最新推荐文章于 2024-08-09 07:46:01 发布

两条咸鱼儿

最新推荐文章于 2024-08-09 07:46:01 发布

阅读量1.3k

点赞数 2

分类专栏：知识扩展文章标签： javascript html css json

本文链接：https://blog.csdn.net/qq_51049931/article/details/121467940

版权

知识扩展专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、看板娘一（小缓存）

废话不多说，直接上代码和效果（持续学习和更新）：

1.代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>live2d看板娘实现一</title>
	</head>
	<body>
		<h1>live2d看板娘实现，简单容易，实用，缓存小</h1>
		<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
		<script>
			L2Dwidget.init({
			"model":{
				//看板娘模型设置
				jsonPath:"https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json",//模型一
				//jsonPath:"https://unpkg.com/live2d-widget-model-chitose@1.0.5/assets/chitose.model.json",//模型二
				//jsonPath:"https://unpkg.com/live2d-widget-model-unitychan@1.0.5/assets/unitychan.model.json",//模型三
				//jsonPath:"https://unpkg.com/live2d-widget-model-tsumiki@1.0.5/assets/tsumiki.model.json",//模型四
				//jsonPath:"https://unpkg.com/live2d-widget-model-z16@1.0.5/assets/z16.model.json",//模型五
				//jsonPath:"https://unpkg.com/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json",//模型六
				//jsonPath:"https://unpkg.com/live2d-widget-model-tororo@1.0.5/assets/tororo.model.json",//模型七
				//jsonPath:"https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json",//模型八
				//jsonPath:"https://unpkg.com/live2d-widget-model-nito@1.0.5/assets/nito.model.json",//模型九
				//jsonPath:"https://unpkg.com/live2d-widget-model-nipsilon@1.0.5/assets/nipsilon.model.json",//模型十
				//jsonPath:"https://unpkg.com/live2d-widget-model-nico@1.0.5/assets/nico.model.json",//模型十一
				//jsonPath:"https://unpkg.com/live2d-widget-model-ni-j@1.0.5/assets/ni-j.model.json",//模型十二
				//jsonPath:"https://unpkg.com/live2d-widget-model-miku@1.0.5/assets/miku.model.json",//模型十三
				//jsonPath:"https://unpkg.com/live2d-widget-model-izumi@1.0.5/assets/izumi.model.json",//模型十五
				//jsonPath:"https://unpkg.com/live2d-widget-model-hijiki@1.0.5/assets/hijiki.model.json",//模型十六
				//jsonPath:"https://unpkg.com/live2d-widget-model-hibiki@1.0.5/assets/hibiki.model.json",//模型十七
				//jsonPath:"https://unpkg.com/live2d-widget-model-haruto@1.0.5/assets/haruto.model.json",//模型十八
				
				"scale":1
			},
			"display":{
				"position":"left",
				"width":150,
				"height":300,
				"hoffset":0,
				"voffset":-20
				},
			"mobile":{
				"show":true,
				"scale":0.5
				},
			"react":{
				"opacityDefault":0.7,
				"opacityOnHover":0.2
				}
		
				});
		</script>
	</body>
</html>

2.效果：

3.解析（步骤）：

（1）随便用一个开发工具或者记事本创建一个HTML页面；

（2）将以上代码复制粘贴进去

（3）使用live2D看板娘一的前提是要引入它的JS

<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>

（4）随后就可以根据代码实现自己想要的效果【调整位置，高度，宽度......】

（5）注释里面的模型都可以实现，具体实现过程就不再展示了，有问题私信-_-

二、看板娘二（大缓存）

1.代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>live2D看板娘实现二</title>
		<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css"/>
		<script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/autoload.js"></script>
		
	</head>
	<body>
		<h1>live2看板娘实现二</h1>
	
	</body>
</html>

2.效果：

3.步骤：

（1）随便用一个开发工具或者记事本创建一个HTML页面；

（2）将以上代码复制粘贴进去

（3）使用live2D看板娘一的前提是要引入它的JS

<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css"/>
<script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/autoload.js"></script>

（4）可以实现一些互动的功能

（5）缺点就是缓存比较慢，要想成功显示并进行一些操作，就要多让浏览器加载会