最终效果演示:https://tczmh.gitee.io/live2dmodel/ (加载模型可能需要稍等5~10秒)

最终源码地址:https://gitee.com/tczmh/live2DModel

live2D是通过canvas实时演算,把一个图片格式模型,变成一个动态的人物。

官网:https://www.live2d.com/

本篇博客只简单说下基本用法,以及如何放到快速你自己的网站。

代码实现

引入js依赖

<script src="l2dwidget.min.js"></script>
申明配置文件

var config = {
    model: {
        jsonPath: 'tororo/assets/tororo.model.json' // 加载模型的json路径
    },
    display: {
        superSample: 1, // 超采样等级
        width: 350, // canvas的宽度
        height: 400, // canvas的高度
        position: 'right', // 显示位置:左或右
        hOffset: 0, // canvas水平偏移
        vOffset: 0, // canvas垂直偏移
    },
    mobile: {
        show: true, // 是否在移动设备上显示
        scale: 1, // 移动设备上的缩放
        motion: true, // 移动设备是否开启重力感应
    },
    react: {
        opacityDefault: 1, // 默认透明度
        opacityOnHover: 1 // 鼠标移上透明度
    }
}

初始化模型

L2Dwidget.init(config)

大功告成!

标签: 网站

已有 8 条评论

  1. lyj lyj

    上课的时候刷网站真的是太爽了

    -2020.9.10 413信息技术课
    1. 哈哈,之前我也这么做!

      1. 哈哈他(lyj)是我同学

  2. 简直是very very very good

  3. h2o h2o

    我现在好了,只不过想要黑猫该怎么做?

    1. 改成黑猫文件夹的名字

    2. jsonPath: 'tororo/assets/tororo.model.json' // 加载模型的json路径
      这里改一下

  4. h2o h2o

    这些文件要放到哪里啊?麻烦详细些,我在原作者博客也没找到

添加新评论