一、效果如下，想要更加效果前往我的博客
snows_l's BLOG
http://124.223.41.220/
资源我放这个仓库咯， 直接拉取即可
snows_l/live2d-sourcehttps://gitee.com/snows_l/live2d-source
二、引入（看板娘出来了）
直接在vue项目html中引入live2d的资源， 即可（想要自定义内容可以改源码）， 因为我自己服务带宽不够，加载太慢咯，我自己就放本地咯。这样也方便根据自己需求修改（主要是不想花钱去托管）
代码
<!--
* @Description: ------------ fileDescription -----------
* @Author: snows_l snows_l@163.com
* @Date: 2024-08-05 12:45:59
* @LastEditors: snows_l snows_l@163.com
* @LastEditTime: 2024-09-07 08:51:30
* @FilePath: /BLOG/index.html
-->
<!DOCTYPE html>
<html lang="en" class="">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/comm/logo.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>snows_l's BLOG</title>
<script src="/live2d/TweenLite.js"></script>
<script src="/live2d/live2dcubismcore.min.js"></script>
<script src="/live2d/pixi.min.js"></script>
<script src="/live2d/cubism4.min.js"></script>
<script src="/live2d/pio.js"></script>
<script src="/live2d/pio_sdk4.js"></script>
<script src="/live2d/load.js"></script>
<link rel="stylesheet" type="text/css" href="/live2d/pio.css" />
<!-- <script src="http://124.223.41.220:3333/assets/live2d/TweenLite.js"></script>
<script src="http://124.223.41.220:3333/assets/live2d/live2dcubismcore.min.js"></script>
<script src="http://124.223.41.220:3333/assets/live2d/pixi.min.js"></script>
<script src="http://124.223.41.220:3333/assets/live2d/cubism4.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://124.223.41.220:3333/assets/live2d/pio.css" />
<script src="http://124.223.41.220:3333/assets/live2d/pio.js"></script>
<script src="http://124.223.41.220:3333/assets/live2d/pio_sdk4.js"></script>
<script src="http://124.223.41.220:3333/assets/live2d/load.js"></script> -->
<!-- 引入本地 需要处理的资源 -->
<link rel="stylesheet" type="text/css" href="/comm/main.css" />
</head>
<body>
<!-- 首屏加载动画 -->
<div id="Loading">
<div class="text">☂ snows_l's BLOG</div>
<img class="loading-warp" src="/comm/loading.gif" />
<div class="loader-inner ball-beat">
<div></div>
<div></div>
<div></div>
</div>
</div>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
<!-- 鼠标拖尾效果 引入本地， 线上宽带太低 -->
<!-- <script src="http://124.223.41.220:3333/assets/cursor-effects.js"></script> -->
<script src="/comm/cursor-effects.js"></script>
<script src="/comm/main.js"></script>
<script></script>
</body>
</html>
三、使用的方法（让看板娘与自己的网页进行交互）
1、模型右侧的五个按钮的（首页、切换模型、关于live2d的视频、白天/夜晚模式、关闭）
如果记得不错的话我当时拿到的代码切换黑白模式在我的项目是不能用的，需要根据自己项目进行一个修改。
代码在pis.js中如下图（这也是别个大佬写的， 我只是拿过来根据自己项目修改点东西）
我当时引入后在我项目中夜间模式就不成，然后找源码，发现夜间模式执行了eval(prop.night); night这个方法，然后找到上层，也就是load.js这个文件。如下图
其他的按钮可根据自己项目修改
2、光标移到指定元素， live2d作出交互， 模型是怎么认识指定元素并作出相应的提示的呢？
首先 找到 load.js 文件 ， 发现定义了很多自定义的类名 selector, 以及 type，如下图
然后 在找到 pio.js文件， 如下图；
模型在加载的时候拿到load.js中选择器的所有元素，当光标移到元素上的时候就会判断type, 给出对应的如上图中对应的提示。可根据自己需求进行修改。
我就出了根据我的项目修改了配置，之后直接加了一个垫底的 ，如下图
只要类名为 kbn-cuotom的元素，都会找到当前标签上的data-tip的内容进行提示，
比如我项目的设置
相信一看代码上图机会， 就不做过多解释了，效果如下（动态效果直接去我博客看效果更佳）
四、未解决的
还有一问题没有搞定， 后面接口拉取回来在渲染的dom识别不了， 但是只要点击隐藏在现实就可以了。希望各位大佬解决这个问题可以评论一下
![鸢尾花书实践和知识记录[编程1-11二维和三维可视化]](https://i-blog.csdnimg.cn/direct/6ff055f0c1ff45b5b7b4c4fe5067b76a.png)
