Live2D看板娘使用&示例

最新推荐文章于 2024-09-13 22:02:35 发布

Jedi Hongbin

最新推荐文章于 2024-09-13 22:02:35 发布

阅读量2.4k

点赞数 3

分类专栏：大前端文章标签： live2d 模型看板娘 jsonPath 前端开发

本文链接：https://blog.csdn.net/printf_hello/article/details/115453735

版权

大前端专栏收录该内容

134 篇文章 3 订阅

订阅专栏

更改两处使用不同看板娘

在这里插入图片描述

可选看板娘

live2d-widget-model-chitose
live2d-widget-model-epsilon2_1
live2d-widget-model-gf
live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haruto
live2d-widget-model-hibiki
live2d-widget-model-hijiki
live2d-widget-model-izumi
live2d-widget-model-koharu
live2d-widget-model-miku
live2d-widget-model-ni-j
live2d-widget-model-nico
live2d-widget-model-nietzsche
live2d-widget-model-nipsilon
live2d-widget-model-nito
live2d-widget-model-shizuku
live2d-widget-model-tororo
live2d-widget-model-tsumiki
live2d-widget-model-unitychan
live2d-widget-model-wanko
live2d-widget-model-z16

示例：

jsonPath: "https://unpkg.com/live2d-widget-model-izumi@1.0.5/assets/izumi.model.json",
在这里插入图片描述

jsonPath: "https://unpkg.com/live2d-widget-model-hijiki@1.0.5/assets/hijiki.model.json",
在这里插入图片描述

jsonPath: "https://unpkg.com/live2d-widget-model-z16@1.0.5/assets/z16.model.json",
在这里插入图片描述

jsonPath: "https://unpkg.com/live2d-widget-model-tsumiki@1.0.5/assets/tsumiki.model.json",
在这里插入图片描述

jsonPath: "https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json",
在这里插入图片描述

jsonPath: "https://unpkg.com/live2d-widget-model-unitychan@1.0.5/assets/unitychan.model.json",
在这里插入图片描述

jsonPath: "https://unpkg.com/live2d-widget-model-tororo@1.0.5/assets/tororo.model.json"
在这里插入图片描述

jsonPath: "https://unpkg.com/live2d-widget-model-nipsilon@1.0.5/assets/nipsilon.model.json",
在这里插入图片描述

jsonPath: "https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json",
在这里插入图片描述

jsonPath: "https://unpkg.com/live2d-widget-model-haruto@1.0.5/assets/haruto.model.json"
在这里插入图片描述

jsonPath: "https://unpkg.com/live2d-widget-model-hibiki@1.0.5/assets/hibiki.model.json",
在这里插入图片描述

代码示例：

const Live = document.createElement('script');
        Live.src = "https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js";
        Live.onload = function () {
            L2Dwidget.init({
                "model": {
                    jsonPath: "https://unpkg.com/live2d-widget-model-izumi@1.0.5/assets/izumi.model.json",
                    "scale": 1
                },
                "display": {
                    "position": "right",
                    "width": 120,
                    "height": 240,
                    "hOffset": 0,
                    "vOffset": -20
                },
                "mobile": {
                    "show": true,
                    "scale": 0.5
                },
                "react": {
                    "opacityDefault": 0.7,
                    "opacityOnHover": 0.2
                }
            });
        };

        document.body.appendChild(Live);
        }