Live2D使用分享

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

主要介绍三种玩法

玩法方式一

第一种玩法是只加载Live 2D模型,不能变身,可以使用在自己建的html文件里面。
这样的模型我一共发现总结了16个
比如:
izumi
Live2D使用分享_第1张图片
shizuku
Live2D使用分享_第2张图片
wanko
Live2D使用分享_第3张图片
在这里插入图片描述
具体大家可以看这里:live2d看板娘一览图

使用方式如下:


<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/[email protected]/assets/chitose.model.json",
            // jsonPath: "https://unpkg.com/[email protected]/assets/haruto.model.json",
            // jsonPath: "https://unpkg.com/[email protected]/assets/hibiki.model.json",
            // jsonPath: "https://unpkg.com/[email protected]/assets/hijiki.model.json",
            // jsonPath: "https://unpkg.com/[email protected]/assets/izumi.model.json",
            // jsonPath: "https://unpkg.com/[email protected]/assets/koharu.model.json",
            // jsonPath: "https://unpkg.com/[email protected]/assets/miku.model.json",
            // jsonPath: "https://unpkg.com/[email protected]/assets/ni-j.model.json",
            jsonPath: "https://unpkg.com/[email protected]/assets/shizuku.model.json",
            // jsonPath: "https://unpkg.com/[email protected]/assets/tororo.model.json",
            // jsonPath: "https://unpkg.com/[email protected]/assets/tsumiki.model.json",
            // jsonPath: "https://unpkg.com/[email protected]/assets/unitychan.model.json",
            // jsonPath: "https://unpkg.com/[email protected]/assets/z16.model.json",
            // jsonPath: "https://unpkg.com/[email protected]/assets/nico.model.json",
            // jsonPath: "https://unpkg.com/[email protected]/assets/nipsilon.model.json",
            // jsonPath: "https://unpkg.com/[email protected]/assets/nito.model.json",
                        // jsonPath: "https://unpkg.com/[email protected]/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ㄒ)/~~

使用方式如下


<html>

<head>
	<meta charset="UTF-8">
	<title>Live2D 看板娘 / Demotitle>
	<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里面添加自己的代码就行了。
说明一下:如果直接像上面使用,所有的样式都是固定的,如果要自己设置人物模型的大小或者位置,就必须引入自己更改后的样式脚本。

如何自定义更改样式

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

下载源码之后导入本地的autoload.js
Live2D使用分享_第4张图片
3. 打开autoload.js,发现里面加载了一个css文件
Live2D使用分享_第5张图片
这个css样式文件下载的源码中有,可以把路径改为本地路径,然后直接修改waifu.css里面的样式就可以对模型的位置大小等样式进行更改了。

玩法方式三

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

网上看到有很多种,有些需要自己修改wordpress主题的页面源代码,这样做有些麻烦,而且会有很多路径问题,也有第二种方法就是有大佬直接把live2d做成了插件,直接打开wordpress后台进行插件安装,然后启用,就可以使用了。
Live2D使用分享_第6张图片
这种wordpress的方式可以参考大佬博客文章:

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

总结

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

你可能感兴趣的:(wordpress)