实现Web前端 live2dw小人物的显示

小人预览效果

图片:
小人的目光会跟着鼠标移动~~更多功能自己去挖掘吧 哈哈哈

效果演示地址

如何显示小人

废话不多说、上源码、
首先肯定是导入小人物的资源了
导入的话只要导入一个js文件

<!-- 导入js资源 注意路径不要写错 -->
<script src="live2dw/lib/L2Dwidget.min.js"></script>

//初始化小人物 需设置属性pluginRootPath: "live2dw/"指明资源跟路径
	L2Dwidget.init({
				pluginRootPath: "live2dw/",//资源root路径
				pluginJsPath: "lib/",//js相对root的路径
				pluginModelPath: "assets/",//模型相对root的路径
				tagMode: !1,
				debug: !1,
				model: {
					scale: 2,
					jsonPath: "live2dw/assets/asuna_33.model.json"
				},
				display: {//大小位置什么的自己慢慢调就是了
					position: "left",//定位
					width: 130,//宽度
					height: 210,//高度
					hOffset: -40,//左右
					vOffset: 0//上下
				},
				mobile: {
					show: !1
				},
				log: !1
			});

完成上述代码，如果不出现路径错误就可以在页面看到小人了~第一次写博客，还有点小激动哈哈哈

资源地址

GitHub地址:https://github.com/jamesluozhiwei/resources.git
百度网盘链接: https://pan.baidu.com/s/1AybRuXIJ_EjD8FgiOjrJzw 提取码: m63y 复制这段内容后打开百度网盘手机App，操作更方便哦
CSDN地址：https://download.csdn.net/download/qq_38403662/10850893

本博客资源转载于：https://www.yanjiayu.cn/posts/ff508987.html