在线live2d使用

为网站增加live2d看板娘

moc3类型是cubism新版模型的类型，而旧版模型的类型是moc模型

1. moc模型使用

html

 <div>
        <div id="landlord">
            <div class="message" style="opacity:0"></div>
            <canvas id="live2d" width="280" height="250" class="live2d"></canvas>
            <div class="hide-button">隐藏</div>
        </div>
    </div>
    

    <link rel="stylesheet" type="text/css" href="live2d/css/live2d.css" />
    <script>
        var message_Path = 'live2d/message.json';
        var home_Path = 'http://127.0.0.1:8080/';               //此处可以修改为你的域名，必须带斜杠
    </script>

    <script src="live2d/js/live2d.js"></script>
    <script src="live2d/js/message.js"></script>
    
    <script type="text/javascript">
        loadlive2d("live2d", "live2d/model/aniya/ANIYA.model3.json");
    </script>

live2d目录

message.jsonmessage.json里存放对话

var message_Path = ‘live2d/message.json’;会自动映射为message.jsonmessage.json

2. moc3模型使用

参考 https://letere-gzj.github.io/hugo-stack/p/live2d-moc3/

js

const cdnPath = 'live2dmoc3';
    localStorage.clear();
     localStorage.setItem("modelName", name);
    // console.log("localStorage.getItem('modelName')", localStorage.getItem('modelId'));
    const config = {
      // 资源路径
      path: {
        modelPath: cdnPath + "/Resources/",
        cssPath: cdnPath + "/waifu.css",
        tipsJsonPath: cdnPath + "/waifu-tips.json",
        tipsJsPath: cdnPath + "/waifu-tips.js",
        live2dCorePath: cdnPath + "/Core/live2dcubismcore.js",
        live2dSdkPath: cdnPath + "/live2d-sdk.js"
      },
      // 工具栏
      tools: ["hitokoto", "asteroids", "express", "switch-model", "switch-texture", "info", "quit"],
      // 模型拖拽
      drag: {
        enable: true,
        direction: ["x", "y"]
      },
      // 模型切换(order: 顺序切换，random: 随机切换)
      switchType: "order"
    }
  
    // 加载资源并初始化
    if (screen.width >= 768) {
      Promise.all([
        loadExternalResource(config.path.cssPath, "css"),
        loadExternalResource(config.path.live2dCorePath, "js"),
        loadExternalResource(config.path.live2dSdkPath, "js"),
        loadExternalResource(config.path.tipsJsPath, "js")
      ]).then(() => {
        initWidget({
          waifuPath: config.path.tipsJsonPath,
          cdnPath: config.path.modelPath,
          tools: config.tools,
          dragEnable: config.drag.enable,
          dragDirection: config.drag.direction,
          switchType: config.switchType
        });
      });
    }
  
    // 异步加载资源
    function loadExternalResource(url, type) {
      return new Promise((resolve, reject) => {
        let tag;
        if (type === "css") {
          tag = document.createElement("link");
          tag.rel = "stylesheet";
          tag.href = url;
        }
        else if (type === "js") {
          tag = document.createElement("script");
          tag.src = url;
        }
        if (tag) {
          tag.onload = () => resolve(url);
          tag.onerror = () => reject(url);
          document.head.appendChild(tag);
        }
      });
    }

live2dmoc3目录

waifu-tips.json存放对话

3. moc3效果