网站建设创业,wordpress the7 中文,邢台wap网站建设报价,网站如何发布目录
故事的开头#xff1a;
最终的实现效果#xff1a;
实现步骤#xff1a;
第一步#xff1a;下载重要文件
第二步#xff1a;创建vue项目文件#xff0c;将刚下载文件拷贝到public目录下
第三步#xff1a;在index.html文件中引入js
第四步#xff1a;使用
最终的实现效果
实现步骤
第一步下载重要文件
第二步创建vue项目文件将刚下载文件拷贝到public目录下
第三步在index.html文件中引入js
第四步使用去创建人物
初步用法
基础用法
人物模型替换
高级用法只有一些模型提供
事件监听
显示对话框
完整代码
参考文章
结语 故事的开头 故事的开头是这样的因为有一个模块是做类似文心一言那样的界面但是我感觉这样有点太单调了突发奇想就有了这样的对话如下图。 很显然最开始这样的想法比较不切合实际因为我们都只是个大二学生文本转语音这个很容易我早在这个想法提出前就已经利用百度的api给做好了但是要在web端的页面去实现出一个虚拟人物这未免有点太过于扯蛋了。但是既然想法已经有了就只放在哪里不去试试吗很显然我并不是这样的人在这一天我去广泛的查询了csdn,掘金以及知乎甚至b站都去查找了。最终终于摸索出来了一个开源的别人写好了的东西既然感觉没问题了那就尝试下页面的大致思路如下图 画的比较丑毕竟当时只是急匆匆去做一个大概想法。 最终的实现效果 拿来测试 实现步骤
第一步下载重要文件
首先我们需要去下载点live2d以及人物模型的配置
live2d看板娘资源文件_html看板娘资源-CSDN文库
下载好后是这样的 解压后这个文件夹里面是这样的 第二步创建vue项目文件将刚下载文件拷贝到public目录下 第三步在index.html文件中引入js !-- 看板娘 --script typetext/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-xxxxxx就是名称就好了
高级用法只有一些模型提供
事件监听
L2Dwidget.on(*, (name) {console.log(事件为 name)
})显示对话框
L2Dwidget.init({dialog: {enable: true,script: {tap body: xxxx,tap face: xxxxx,}}
});完整代码
templatediv classapp refboxdiv classbox1/divdiv classbox2el-containerel-headerHeader/el-headerel-mainMain/el-mainel-footerFooter/el-footer
/el-container/div/div
/template
scriptexport 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
stylebody {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
结语 感谢观看
