Live2D使用分享

最新推荐文章于 2024-05-27 09:39:00 发布

不愿意做鱼的小鲸鱼

最新推荐文章于 2024-05-27 09:39:00 发布

阅读量5.5k

点赞数 17

分类专栏： wordpress 文章标签： html

本文链接：https://blog.csdn.net/qq_42038623/article/details/104809860

版权

wordpress 专栏收录该内容

10 篇文章 3 订阅

订阅专栏

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

主要介绍三种玩法

玩法方式一

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

shizuku

wanko

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

使用方式如下：

<!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ㄒ)/~~

使用方式如下

<!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">
	<style>
	</style>
</head>

<body>

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

</html>

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

如何自定义更改样式

下载该模型的源码包
下载地址
最后一行的script脚本就是最重要的加载脚本

<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的方式可以参考大佬博客文章：

参考一
参考二
参考三
然后我把自己使用过可行的live2d的wordpress插件资源放在下面
点击下载
链接：https://pan.baidu.com/s/1mKxg6TZHdPHwMR8WrsrSvg
提取码：udye

总结

这些是自己的使用宝贵经验，也是不断的尝试，花了很长时间自己整理出来的，如果有喜欢的看官可以可以下面文章点赞评论，长的帅的可以打赏一下咯！！！^ _ ^

不愿意做鱼的小鲸鱼

关注

17
点赞
踩
56

收藏

觉得还不错? 一键收藏
打赏
6
评论
Live2D使用分享

记得当时在做这个博客网站的时候，确实搞了很多花样。记得当时完live2d看板娘的时候就花了很多时间在这上面，毕竟是一步一步探索，都是从未知开始，今天我来分享总结一下Live2d的使用经历。主要介绍三种玩法玩法方式一第一种玩法是只加载Live 2D模型，不能变身，可以使用在自己建的html文件里面。这样的模型我一共发现总结了16个比如：izumishizukuwanko具体大...
复制链接

扫一扫