avatar

给你的网页添加一个moc3格式的Live2d模型
二维码

前言

之前搞网页Live2d模型的时候在网上找了很多文章,但大部分都只支持moc格式的模型,不支持moc3格式的模型。

如果你的模型是moc格式,请参考给网页添加一个Live2D看板娘(前端)

最近在Github上看到这个项目AzurLaneL2DViewer, 根据这个项目做成了JS库。

使用方法

  1. <body>标签内添加如下内容:

    <!-- 用于存放Live2d的元素,可自定义 -->
    <div class="Canvas" style="position: fixed; right: 10px; bottom: 10px;z-index: 99999999" id="L2dCanvas"></div>
  2. </body>之前添加以下内容:

    <!-- 低版本浏览器支持 -->
    <script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"> </script>
    <!-- 核心JS -->
    <script src="https://cdn.jsdelivr.net/gh/HCLonely/Live2dV3/js/live2dcubismcore.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/pixi.js@4.6.1/dist/pixi.min.js"></script>
    <!-- live2dv3.js -->
    <script src="https://cdn.jsdelivr.net/gh/HCLonely/Live2dV3@1.1.1/live2dv3.min.js"></script>
    <!-- 加载Live2d模型 -->
    <script>
    window.onload = () => {
    new l2dViewer({
    el: document.getElementById('L2dCanvas'), // 要添加Live2d的元素
    basePath: 'https://cdn.jsdelivr.net/gh/HCLonely/Live2dV3/assets', // 模型根目录
    modelName: 'biaoqiang_3', // 模型名称
    width: 500,
    height: 300
    })
    }
    </script>

Demo

https://live2dv3demo.hclonely.com/

文章作者: HCLonely
文章链接: https://blog.hclonely.com/posts/8a7f7919/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 HCLonely Blog
打赏
  • 微信
    微信
  • 支付宝
    支付宝

评论