Live2D使用分享

2022-09-24 09:27:38 浏览数 (1)

记得当时在做这个博客网站的时候，确实搞了很多花样。记得当时完live2d看板娘的时候就花了很多时间在这上面，毕竟是一步一步探索，都是从未知开始，今天我来分享总结一下Live2d的使用经历。

主要介绍三种玩法

玩法方式一

第一种玩法是只加载Live 2D模型，不能变身，可以使用在自己建的html文件里面。 这样的模型我一共发现总结了16个 比如： izumi

shizuku

wanko

在这里插入图片描述 具体大家可以看这里：live2d看板娘一览图

使用方式如下：

代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>live2d模型</title>

</head>

<body>

</body>
<!-- 导入模型的脚本文件 -->
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>

<script>
    L2Dwidget.init({
        // 引用的模型
        "model": {
            // jsonPath: "https://unpkg.com/live2d-widget-model-chitose@1.0.5/assets/chitose.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",
            // jsonPath: "https://unpkg.com/live2d-widget-model-hijiki@1.0.5/assets/hijiki.model.json",
            // jsonPath: "https://unpkg.com/live2d-widget-model-izumi@1.0.5/assets/izumi.model.json",
            // jsonPath: "https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json",
            // jsonPath: "https://unpkg.com/live2d-widget-model-miku@1.0.5/assets/miku.model.json",
            // jsonPath: "https://unpkg.com/live2d-widget-model-ni-j@1.0.5/assets/ni-j.model.json",
            jsonPath: "https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json",
            // jsonPath: "https://unpkg.com/live2d-widget-model-tororo@1.0.5/assets/tororo.model.json",
            // jsonPath: "https://unpkg.com/live2d-widget-model-tsumiki@1.0.5/assets/tsumiki.model.json",
            // jsonPath: "https://unpkg.com/live2d-widget-model-unitychan@1.0.5/assets/unitychan.model.json",
            // jsonPath: "https://unpkg.com/live2d-widget-model-z16@1.0.5/assets/z16.model.json",
            // jsonPath: "https://unpkg.com/live2d-widget-model-nico@1.0.5/assets/nico.model.json",
            // jsonPath: "https://unpkg.com/live2d-widget-model-nipsilon@1.0.5/assets/nipsilon.model.json",
            // jsonPath: "https://unpkg.com/live2d-widget-model-nito@1.0.5/assets/nito.model.json",
                        // jsonPath: "https://unpkg.com/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json",

            "scale": 1
        },
        // 模型的样式，可以自行更改
        "display": {
            "position": "right",
            "width": 150,
            "height": 300,
            "hOffset": 0,
            "vOffset": -20
        },
        "mobile": {
            "show": true,
            "scale": 0.5
        },
        "react": {
            "opacityDefault": 1,
            "opacityOnHover": 0.2
        }
    });
</script>

</html>

上面的代码引入的脚本文件都是别人写好的轮子，我们可以不用下载源模型文件，可以根据我的代码进行更改为自己的样式使用，jsonpath：中的每一个注释都是一个模型脚本，可以任意使用。 提一下：自己也下载过很多这样的源脚本文件，但发现本地引入会报错，因为涉及到json数据请求，必须使用服务器来接受请求，所以不怎么行的通，以前做过部署在服务器上，直接引入服务器上的，发现是可行的。

玩法方式二

第二种玩法是集中了好几种live2d模型，有变身，换装功能，也是利用别人写好的轮子来使用。 效果如下：

哈哈哈，是不是很酷/(ㄒoㄒ)/

使用方式如下

代码语言：javascript复制
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Live2D 看板娘 / Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css" rel="nofollow noopener"  rel="nofollow noopener" >
    <style>
    </style>
</head>

<body>

    <script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/autoload.js"></script>
</body>

</html>

上面的代码引入的脚本文件都是别人写好的轮子，我们可以不用下载源模型文件，可以根据我的代码进行更改为自己的样式使用，jsonpath：中的每一个注释都是一个模型脚本，可以任意使用。 提一下：自己也下载过很多这样的源脚本文件，但发现本地引入会报错，因为涉及到json数据请求，必须使用服务器来接受请求，所以不怎么行的通，以前做过部署在服务器上，直接引入服务器上的，发现是可行的。

玩法方式二

第二种玩法是集中了好几种live2d模型，有变身，换装功能，也是利用别人写好的轮子来使用。 效果如下：

哈哈哈，是不是很酷/(ㄒoㄒ)/

使用方式如下

代码语言：javascript复制
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Live2D 看板娘 / Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css" rel="nofollow noopener"  rel="nofollow noopener" >
    <style>
    </style>
</head>

<body>

    <script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/autoload.js"></script>
</body>

</html>

对的就是这么简单使用，所有的脚本和样式都是引入了外部的，我们要做的只要在body里面添加自己的代码就行了。 说明一下：如果直接像上面使用，所有的样式都是固定的，如果要自己设置人物模型的大小或者位置，就必须引入自己更改后的样式脚本。

如何自定义更改样式
  1. 下载该模型的源码包 下载地址
  2. 最后一行的script脚本就是最重要的加载脚本
代码语言：javascript复制
<script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/autoload.js"></script>

下载源码之后导入本地的autoload.js

3. 打开autoload.js，发现里面加载了一个css文件

这个css样式文件下载的源码中有，可以把路径改为本地路径，然后直接修改waifu.css里面的样式就可以对模型的位置大小等样式进行更改了。

玩法方式三

第三种玩法是wordpress的插件安装法。

网上看到有很多种，有些需要自己修改wordpress主题的页面源代码，这样做有些麻烦，而且会有很多路径问题，也有第二种方法就是有大佬直接把live2d做成了插件，直接打开wordpress后台进行插件安装，然后启用，就可以使用了。

这种wordpress的方式可以参考大佬博客文章： 1. 参考一 2. 参考二 3. 参考三 然后我把自己使用过可行的live2d的wordpress插件资源放在下面 点击下载 链接：https://pan.baidu.com/s/1mKxg6TZHdPHwMR8WrsrSvg 提取码：udye

总结

这些是自己的使用宝贵经验，也是不断的尝试，花了很长时间自己整理出来的

wordpress 网站建设

0 人点赞