live2d是一种图像渲染技术,通过一系列的连续的二维图像和人物建模来生成类似三维的模型,简单来说就是让纸片人动起来 ¬_¬


Cubism2

这是一个被广泛使用的版本,可以通过网站 Live2d Cubism 2 预览模型,并且在开源项目 Live2d Cubism获取模型文件;同样的网络上有许多针对此版本的配置教程和一些简化配置的开源项目,下面仅提供一个基础的配置方法,也即3个部分:

  • 引用必要的js文件:live2d核心js
  • 添加canvas元素:可以为其添加css以适应不同页面场景
  • 初始化live2d:loadlive2d("[canvas元素id]", "模型js路径");

效果演示

(嵌入页面的demo,如无法加载可 点击此处 跳转查看)

示例代码

(和演示内容一致,代码添加至网页</body>标签之前即可查看演示效果)

<canvas id="live2d" width="300" height="800" style="position: fixed; right: 10px; bottom: 10px;z-index: 99999999"></canvas>
<script src="https://cdn.jsdelivr.net/gh/fordes123/cdn/notion/asset/js/live2d.js"></script>
<script>
    window.onload = () => {
        loadlive2d("live2d", "https://cdn.jsdelivr.net/gh/fordes123/cdn/notion/asset/model/2/seele/model.json");
    }
</script>

Cubism3

相比上一个版本,v3具有更好的效果,但是并不兼容上一个版本模型;可以通过网站 Live2d Cubism 3 预览模型,并且在开源项目 Live2d Cubism) 中获取模型文件;参考live2dv3项目,我们可以较为简单的进行配置,步骤类似:

  • 引用必要的js文件:其中live2dcubismcorepixilive2dv3是必须的
  • 添加元素:此处不要求为canvas元素,但同样可以为其添加css样式
  • 初始化live2d:参数表如下:
参数类型描述默认
el[必需] DOM 对象或 jQuery 对象要挂载Live2d模型的元素, 支持DOM选择器和jQuery选择器,例:document.getElementById('L2dCanvas')document.querySelector('#L2dCanvas')$('#L2dCanvas')null
basePath[必需] String模型根目录null
modelName[必需] String模型目录null
width[可选] NumberCanvas宽度,单位: px500
height[可选] NumberCanvas高度,单位: px300
sizeLimit[可选] Boolean当窗口大小小于设置的宽或高时不加载模型false
mobileLimit[可选] Boolean移动端不加载模型false
sounds[可选] Array触摸播放声音, 留空则不播放null

效果演示

(嵌入页面的demo,如无法加载可 点击此处 跳转查看)

示例代码

(内容和演示内容一致,同样的添加至网页</body>标签之前即可查看演示效果:)

<div class="Canvas" style="position: fixed; right: 10px; bottom: 10px;z-index: 99999999" id="L2dCanvas"></div>

<!------ 依赖 JS | Dependent JS ------>
<!---- 可选 | Optional ---->
<!-- 兼容低版本浏览器 | Compatible with low-level browsers -->
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"> </script>
<!-- 音频播放兼容 | Audio playback compatible -->
<script src="https://cdn.jsdelivr.net/npm/howler@2.1.3/dist/howler.min.js"></script>
<!---- 必需 | Required ---->
<script src="https://cubism.live2d.com/sdk-web/cubismcore/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/npm/live2dv3@1.2.2/live2dv3.min.js"></script>

<!------ 加载Live2d模型 | Load Live2d model ------>
<script>
    window.onload = () => {
        new l2dViewer({
            el: document.getElementById('L2dCanvas'),
            basePath: 'https://cdn.jsdelivr.net/gh/fordes123/cdn/notion/asset/model/3',
            modelName: 'dafeng_2',
            sounds: [
                'sounds/demo.mp3', // 相对路径是相对于模型文件夹
                'https://cdn.jsdelivr.net/npm/live2dv3@latest/assets/biaoqiang_3/sounds/demo.mp3' // 也可以是网址
            ],
            height: 500,
            width: 892.47
        })
    }
</script>

标签: Demo

添加新评论