Vue-live2d在项目中展示Live2D 模型

给钱，谢谢！

已于 2024-04-02 08:39:38 修改

阅读量1.3k

点赞数 4

文章标签： vue.js javascript

于 2024-03-22 16:52:50 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43073383/article/details/136945930

版权

使用 Vue-live2d 在您的 Vue 项目中展示可爱的 Live2D 模型

Live2D 技术可以为网页增添一些趣味性，而 Vue-live2d 是一个基于 Live2D 技术的 Vue 组件，可以帮助我们在 Vue 项目中展示可爱的 Live2D 模型。在本文中，我们将介绍如何安装、配置和使用 Vue-live2d，并展示一些示例代码。
参考：https://www.npmjs.com/package/vue-live2d

1. 安装和配置

首先，我们需要安装 Vue-live2d。在命令行中执行以下命令：

npm install vue-live2d

然后，在 Vue 项目中引入 Vue-live2d 组件：

// 在需要使用 Live2D 的组件中引入
import vueLive2d from 'vue-live2d'

// 注册 Vue-live2d 组件
export default {
  components: {
    vueLive2d
  }
}

2. 使用方法

现在，我们可以在 Vue 组件中使用 Vue-live2d 组件来展示 Live2D 模型。在模板中添加以下代码：

<template>
  <div>
      <vueLive2d
        :width="config.display.width"
        :height="config.display.height"
        :model="config.model.model"
        :apiPath="config.model.pluginRootPath"
      />
  </div>
</template>

<script>
export default {
  data() {
    return {
    var config = {
        model: {
          pluginRootPath: "https://yjy.yiyiny.com/static/live2dw", //人物文件夹的位置
          pluginJsPath: "lib/",
          pluginModelPath: "live2d-widget-model-shizuku/assets/",
          jsonPath: "", // xxx.model.json 的路径
          model: ["live2d-widget-model-" + name + "/assets",name + ".model",];
        },
        display: {
          position: "right", //看板娘的表现位置left
          width: 200, //小萝莉的宽度
          height: 250, //小萝莉的高度
          hOffset: 20,
          vOffset: 20,
        },
       
    }
  }
}
</script>

这个最后打包发布线上不知道为何会一直加载资源后来改为ifame访问这种形式的

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
    />

    <title>使用L2Dwidget实现二次元卡通看板娘</title>
    <style type="text/css">
      body {
        /* background: linear-gradient(to top, #ff9a9e, #fecfef);
         */
        width: 100%;
        height: 100%;
      }
    </style>
  </head>

  <body></body>
</html>

<script
  type="text/javascript"
  src="https://yjy.yiyiny.com/static/live2dw/lib/L2Dwidget.min.js"
></script>
<script>
  var name = getQueryVariable("name") || null;
  var width = getQueryVariable("width") || null;
  var height = getQueryVariable("height") || null;

  var jsonData =
    "https://yjy.yiyiny.com/static/live2dw/live2d-widget-model-" +
    name +
    "/assets/" +
    name +
    ".model.json";

  L2Dwidget.init({
    model: {
      // 模型
      jsonPath: jsonData, //"./live2dw/live2d-widget-model-shizuku/assets/shizuku.model.json",
      scale: 1, //模型缩放比例
    },
    display: {
      position: "left", //模型的位置（左or右）
      width: width || 300, //模型宽度
      height: height || 600, //模型高度
      hOffset: 0, //模型水平偏移量
      vOffset: 0, //模型垂直偏移量
    },
    mobile: {
      show: true, //手机端是否显示
      scale: 1, //缩放比例
    },
    react: {
      opacity: 1, //模型不透明度
    },
  });
  // JS`正则表达式`获取地址栏url参数：
  function getQueryVariable(variable) {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i = 0; i < vars.length; i++) {
      var pair = vars[i].split("=");
      if (pair[0] == variable) {
        return pair[1];
      }
    }
    return false;
  }
</script>