领一只动态live2d小猫咪到你的网站

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

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

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

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

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

代码实现

引入js依赖

申明配置文件

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)

大功告成!

评论

  1. h2o
    8月前
    2020-8-30 19:10:14

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

  2. h2o
    8月前
    2020-8-30 19:35:58

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

    • n3em3o 博主
      8月前
      2020-8-30 19:56:24

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

    • n3em3o 博主
      8月前
      2020-8-30 19:56:42

      改成黑猫文件夹的名字

  3. 8月前
    2020-9-01 19:02:04

    简直是very very very good

  4. lyj
    7月前
    2020-9-10 13:48:29

    上课的时候刷网站真的是太爽了
    -2020.9.10 413信息技术课

    • 7月前
      2020-9-11 13:32:36

      哈哈,之前我也这么做!

      • n3em3o 博主
        7月前
        2020-9-15 20:21:27

        哈哈他(lyj)是我同学

  5. 不想留下姓名的吸血鬼
    6月前
    2020-10-14 21:43:26

    挺强的,直播时很常用

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇