Vue或html中使用L2Dwidget实现看板娘互动，对话框，语音，及Vue销毁看板娘

原创已于 2022-08-09 16:10:43 修改 · 3.6k 阅读

38 ·

CC 4.0 BY-SA版权

文章标签：

#vue #html #javascript #live2D

于 2022-07-13 13:50:47 首次发布

这篇博客介绍了如何在Vue项目中集成并配置看板娘（Live2D）动画，包括下载资源、解压并引入JS文件、在APP.vue中创建动画以及设置人物属性。同时，提供了在不同场景下的交互事件和对话配置。此外，还讨论了如何在组件销毁时移除看板娘元素，以及提供了一个参考博客链接来切换人物。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最终效果
下载看板娘文件
csdn下载地址
将下载后的压缩包解压，复制到vue项目的public文件夹下
在index.html文件中引入js

	<!-- 看板娘 -->
	<script type="text/javascript" src="./live2dw/lib/L2Dwidget.min.js"></script>

在这里插入图片描述

在APP.vue中创建动画

APP.vue

<template>
	<div class="app" ref="box">
		<!-- <router-view /> -->
		<div class="star" style="width: 200px; height: 300px; background-color: red;">
		鼠标放在此处和我互动
		</div>
	</div>
</template>

<script>
	export default {
		name: 'App',
		created() {
			window.L2Dwidget
				//此处是对点击人物时触发事件的监听
				.on('*', (name) => {

					console.log('%c 你点击了 ' + '%c -> ' + name, 'background: #222; color: yellow',
						'background: #fff; color: #000')
				})
				//对人物的属性配置
				.init({
					pluginRootPath: '../live2dw/', //人物文件夹的位置
					pluginJsPath: 'lib/',
					pluginModelPath: 'live2d-widget-model-shizuku/assets/',
					model: {
						jsonPath: '../live2dw/live2d-widget-model-shizuku/assets/shizuku.model.json'
					},
					dialog: {
						enable: true, //是否开启对话框
						script: {
							//每20s，显示一言（调用一言Api返回的句子）
							'every idle 20s': '$hitokoto$',
							//触摸到class='star'对象,将会展示的文字
							'hover .star': '星星在天上而你在我心里 (*/ω＼*)',
							//触摸到身体
							'tap body': '害羞⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄',
							//触摸到头部
							'tap face': '~~'
						}
					},
					display: { //人物的属性配置
						position: 'left',
						width: 350,
						height: 800,
						hOffset: 200, // 横向偏移
						vOffset: -100 // 纵向偏移
					}, 
					mobile: {
						show: true, //是否在移动端展示
						scale: 0.5 //t透明度
					}
					
				});
		}

	}
</script>

<style>
	body {
		margin: 0;
		width: 100%;
	}

	html {
		width: 100%;
		height: 100%;
	}

	.app {
		width: 100%;
		height: 100%;
	}
</style>

注意：只有部分人物可以展示对话框

如果需要替换人物，只需修改对应人物文件夹的位置
在这里插入图片描述

销毁看板娘

在beforeDestroy钩子函数中，直接移除dom元素

这个办法不是最好的，因为本人查阅了很多资料，并没有找到相关解决方案，所以只能使用这种比较粗暴的方法，如果有更好的答案，欢迎评论区交流

beforeDestroy() {
			//移除动画人物
			document.querySelector('#live2d-widget').remove();
		}

html中使用看板娘
参考博客链接
点击按钮切换人物
csdn下载demo