Vue+live2d实现虚拟人物互动(一次体验叙述)

目录

故事的开头:

最终的实现效果:

实现步骤:

第一步:下载重要文件

第二步:创建vue项目文件,将刚下载文件拷贝到public目录下

第三步:在index.html文件中引入js

第四步:使用,去创建人物

初步用法

基础用法

人物模型替换

高级用法(只有一些模型提供)

事件监听

显示对话框

完整代码:

参考文章:

结语:


故事的开头:

故事的开头是这样的,因为有一个模块是做类似文心一言那样的界面,但是我感觉这样有点太单调了,突发奇想就有了这样的对话(如下图)。

 很显然,最开始这样的想法比较不切合实际(因为我们都只是个大二学生),文本转语音这个很容易,我早在这个想法提出前就已经利用百度的api给做好了,但是要在web端的页面去实现出一个虚拟人物,这未免有点太过于扯蛋了。但是,既然想法已经有了,就只放在哪里不去试试吗?很显然,我并不是这样的人,在这一天,我去广泛的查询了csdn,掘金以及知乎甚至b站都去查找了。最终终于摸索出来了一个开源的别人写好了的东西!!!既然感觉没问题了,那就尝试下页面的大致思路(如下图) 

画的比较丑,毕竟当时只是急匆匆去做一个大概想法。 

最终的实现效果:

拿来测试

实现步骤:

第一步:下载重要文件

首先我们需要去下载点live2d以及人物模型的配置

live2d看板娘资源文件_html看板娘资源-CSDN文库

下载好后是这样的:

解压后这个文件夹里面是这样的:

第二步:创建vue项目文件,将刚下载文件拷贝到public目录下

第三步:在index.html文件中引入js

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

然后我们就可以在自己需要的模块中去创建自己的人物了

第四步:使用,去创建人物

初步用法
基础用法

我们第一步下载的那个文件提供了很多人物模型

window.L2Dwidget//对人物的属性配置.init({pluginRootPath: '../live2dw/', //人物文件夹的位置pluginJsPath: 'lib/',pluginModelPath: 'live2d-widget-model-wanko/assets/',model: {jsonPath: '../live2dw/live2d-widget-model-wanko/assets/wanko.model.json'},display: { //人物的属性配置position: 'left',width: 350,height: 800,hOffset: 200, // 横向偏移vOffset: -100 // 纵向偏移}, });

通过在mounted(vue2写法)/onMounted(() => {}(vue3写法)周期内,写下该代码就可以加载配置的文件。当然有一些模型是提供去触摸对话的。那么我们就可以提供一个事件监听。

人物模型替换

只需要将打框框的地方给替换成其他人物名称(基础用法图片中model-xxx,xxx就是名称)就好了

高级用法(只有一些模型提供)
事件监听
L2Dwidget.on('*', (name) => {console.log('事件为: ' + name)
})
显示对话框
L2Dwidget.init({dialog: {enable: true,script: {'tap body': 'xxxx','tap face': 'xxxxx',}}
});
完整代码:
<template><div class="app" ref="box"><div class="box1"></div><div class="box2"><el-container><el-header>Header</el-header><el-main>Main</el-main><el-footer>Footer</el-footer>
</el-container></div></div>
</template>
<script>export default {mounted() {window.L2Dwidget//此处是对点击人物时触发事件的监听.on('*', (name) => {})//对人物的属性配置.init({pluginRootPath: '../live2dw/', //人物文件夹的位置pluginJsPath: 'lib/',pluginModelPath: 'live2d-widget-model-wanko/assets/',model: {jsonPath: '../live2dw/live2d-widget-model-wanko/assets/wanko.model.json'},dialog: {enable: true, //是否开启对话框script: {'tap body': '你好呀!这里是,ai智能小助手!!!','hover .app': '嘿!需要帮助吗?','tap face': '汪汪'}},display: { //人物的属性配置position: 'left',width: 350,height: 800,hOffset: 200, // 横向偏移vOffset: -100 // 纵向偏移}, });}}
</script>
<style>body {margin: 0;width: 100%;}.app {width: 100%;height: 100%;display: inline-flex;}.box1{width: 50%;height: 700px;border: 1px solid red;}.box2{width: 50%;height: 700px;border: 1px solid red;}
</style>

参考文章:

https://juejin.cn/post/6844904032423641096

http://t.csdnimg.cn/6ydbx

结语:

感谢观看!!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/391212.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【数据结构算法经典题目刨析(c语言)】顺序表和链表的区别(图文详解)

&#x1f493; 博客主页&#xff1a;C-SDN花园GGbond ⏩ 文章专栏&#xff1a;数据结构经典题目刨析(c语言) 目录 顺序表和链表的区别 一、底层存储空间 二、插入和删除操作 三、随机访问 四、空间利用率 五、应用场景 六、高速缓存 为什么顺序表的缓存利用率高于链表呢…

设计界的新宠:5款热门UI在线设计软件评测

随着用户界面设计行业的蓬勃发展&#xff0c;越来越多的设计师进入用户界面设计。选择一个方便的用户界面设计工具尤为重要&#xff01;除了传统的用户界面设计工具&#xff0c;在线用户界面设计工具也受到越来越多设计师的青睐。这种不受时间、地点、计算机配置限制的工作方法…

OpenCV||超详细的图像边缘检测

一、基本概念 1.图像边缘检测目的 特征提取&#xff1a;边缘是图像中亮度变化最显著的部分&#xff0c;它们通常对应于物体的轮廓、不同区域的边界等。通过边缘检测&#xff0c;可以从图像中提取出这些重要的特征信息&#xff0c;为后续处理如图像分割、目标识别等提供基础。 …

webfunny埋点系统如何进行部署?

hello 大家webfunny埋点系统做了不少功能更新&#xff0c;平常给大家分享比较多的是**webfunny前端监控系统**&#xff0c;最近有不少技术同学来了解webfunny埋点系统&#xff0c;今天主要给大家分享下webfunny埋点系统部署&#xff0c;分为本地部署和线上部署。 还没有试用和…

字节一面面经

1.redis了解吗&#xff0c;是解决什么问题的&#xff0c;redis的应用&#xff1f; Redis 是一种基于内存的数据库&#xff0c;常用的数据结构有string、hash、list、set、zset这五种&#xff0c;对数据的读写操作都是在内存中完成。因此读写速度非常快&#xff0c;常用于缓存&…

第三期书生大模型实战营之XTuner微调个人小助手认知

基础任务 使用 XTuner 微调 InternLM2-Chat-1.8B 实现自己的小助手认知&#xff0c;记录复现过程并截图。 任务结果截图 1. 创建虚拟环境 # 安装一些必要的库 conda install pytorch2.1.2 torchvision0.16.2 torchaudio2.1.2 pytorch-cuda12.1 -c pytorch -c nvidia -y # 安…

2024华数杯数学建模竞赛选题建议+初步分析

提示&#xff1a;DS C君认为的难度&#xff1a;C<A<B&#xff0c;开放度&#xff1a;A<B<C。 综合评价来看 A题适合对机械臂和机器人运动学感兴趣的同学&#xff0c;尤其是有一定编程和优化算法基础的同学。不建议非相关专业同学选择。 B题挑战较大&#xff0…

Go语言实现多协程文件下载器

文章目录 前言流程图主函数下载文件初始化分片下载worker分发下载任务获取下载文件的大小下载文件分片错误重试项目演示最后 前言 你好&#xff0c;我是醉墨居士&#xff0c;最近在开发文件传输相关的项目&#xff0c;然后顺手写了一个多协程文件下载器&#xff0c;代码非常精…

用于遥感数据处理的python脚本

编辑&#xff1a;我不爱机器学习 今天给大家分享一组用于遥感处理的 python 脚本。 作者使用基于无人机的智利中南部泥炭地的高光谱图像。该图像有 41 个波段&#xff08;10 nm 宽&#xff09;&#xff0c;范围为 480-880 nm&#xff0c;像素大小为 10 cm。绿点对应于测量生物…

【Python系列】Python 协程:并发编程的新篇章

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

万物分割(Segment Anything Model)C++模型推理部署

概述 SAM 是一种先进的人工智能模型&#xff0c;已经证明了在分割复杂和多样化图像方面具有优异的表现。该模型是计算机视觉和图像分割领域的一个重大突破。 SAM 的架构旨在处理各种图像分割任务&#xff0c;包括对象检测、实例分割和全景分割。这意味着该模型可以应用于各种用…

CTF-web 基础 网络协议

网络协议 OSI七层参考模型&#xff1a;一个标准的参考模型 物理层 网线&#xff0c;网线接口等。 数据链路层 可以处理物理层传入的信息。 网络层 比如IP地址 传输层 控制传输的内容的传输&#xff0c;在传输的过程中将要传输的信息分块传输完成之后再进行合并。 应用…

使用VM安装K8S

VM 部署K8S 前言 本次使用VM搭建k8s&#xff0c;由于搭建流程复杂&#xff0c;在此记录。 需提前安装好VM&#xff08;可参考&#xff1a;VM安装&#xff09;&#xff0c;起两台虚拟机(模拟master和worker)&#xff0c;且VM里已安装好Docker&#xff08;可参考&#xff1a;D…

操作系统——进程同步

文章目录 进同步和互斥1.什么是进程同步和进程互斥&#xff1f;进程同步进程互斥 2.进程互斥的软件实现方式单标志法双标志检查法双标志后检查法Peterson算法 3. 进程互斥硬件实现方法中断屏蔽方法TestAndSet指令Swap指令 4. 互斥锁5. 信号量机制整形信号量记录型信号量用信号量…

Scrapy 爬取旅游景点相关数据(五)

本期内容&#xff1a;&#xff08;1&#xff09;爬取日本其他城市数据存入数据库&#xff08;2&#xff09;爬取景点评论数据 1 爬取其他城市景点数据 只爬取一个城市的数据对于做数据可视化系统可能是不够的&#xff0c;因为数据样本量少嘛&#xff0c;本期来爬取其他城市的景…

等保测评练习卷25

等级保护初级测评师试题25 姓名&#xff1a; 成绩&#xff1a; 一、判断题&#xff08;10110分&#xff09; 1.安全区域边界对象主要根据系统中网络访问控制设备的部署情况来确定&#xff08;&#xff09;不是网络访问控制设备而…

笔试练习day2

目录 BC64 牛牛的快递题目解析解法模拟代码方法1方法2 DP4 最小花费爬楼梯题目解析解法动态规划状态表示状态转移方程代码 数组中两个字符串的最小距离题目解析解法方法1暴力解法(会超时)方法2贪心(动态规划)代码 感谢各位大佬对我的支持,如果我的文章对你有用,欢迎点击以下链接…

Yolov8在RK3588上进行自定义目标检测(一)

1.数据集和训练模型 项目地址&#xff1a;https://github.com/airockchip/ultralytics_yolov8.git 从github(htps:l/github.com/airockchip/ultralytics_yolov8)上获取yolov8模型。 下载项目&#xff1a; git clone https://github.com/airockchip/ultralytics_yolov8.git …

Python | Leetcode Python题解之第316题去除重复字母

题目&#xff1a; 题解&#xff1a; class Solution:def removeDuplicateLetters(self, s: str) -> str:vis defaultdict(int)cnt defaultdict(int)for ch in s: cnt[ch] 1queue []for ch in s:if vis[ch] 0:while queue and queue[-1] > ch and cnt[queue[-1]]:vi…

《Advanced RAG》-03-使用 RAGAs + LlamaIndex 进行 RAG 评估

摘要 文章首先介绍了 RAG 评估的三个主要部分&#xff1a;输入查询、检索上下文和 LLM 生成的响应。 提到了 RAGAs 提出的 RAG 评估指标&#xff0c;包括 Faithfulness、Answer Relevance 和 Context Relevance&#xff0c;以及 RAGAs 网站提供的两个额外指标&#xff1a;Conte…