vue3项目如何添加属于自己的 live2d 看板娘（支持换模型）

snows_l

于 2024-09-30 15:40:29 发布

阅读量372

点赞数 11

文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/snows_l/article/details/142656279

版权

一、效果如下，想要更加效果前往我的博客

snows_l's BLOGhttp://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>