在网站上添加可爱的Live 2D模型

流浪 2022-5-23 118 5/23

18年在博客园曾经看到过live2d模型,不过当时虽然感兴趣并没有过多关注,现在自己搭建了网站然后逛b站的时候又看到了,才决定去试试,毕竟本人就是比较喜欢一些花里胡哨的东西~~然后周六日花了两天时间研究了live 2d模型,结果并不理想。由于是18年的技术所以一些资源已经暂停维护了,一些模型加载不出来,或者在本地引入加载不出来。然后又找了很多网站看了很多博客,虽然实现了这个功能但是和博主预想的有点差异,只能引用他人cdn上的资源,自定义更改样式使用本地的资源失效,如果有更好的方法请联系博主

玩法方式有三种:

1.只加载Live 2D模型,不能变身,可以使用在自己建的html文件里面。

 

<!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:中的每一个注释都是一个模型脚本,可以任意使用。

2.集中了好几种live2d模型,有变身,换装功能,也是利用别人写好的轮子来使用。

放在head中就行

<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"/>
<script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/autoload.js"></script>

整体代码

 

<!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>

如果直接像上面使用,所有的样式都是固定的,如果要自己设置人物模型的大小或者位置,就必须引入自己更改后的样式脚本。不过有部分换装失效了。。

效果:

在网站上添加可爱的Live 2D模型

自定义更改样式

地址1

地址2

FGHRSH大佬的博客

 

 

一开始是想使用自定义更改样式的,结果研究了两天都没研究出来,我就懒得弄了,等以后再看看,如果有会的兄弟麻烦告知一下博主。

3.wordpress的插件安装法

Live2D 看板娘来了! - 犬's Blog (moedog.org)

效果:

在网站上添加可爱的Live 2D模型

wordpress插件中搜索Live2d也行

- THE END -

流浪

5月28日22:09

最后修改:2022年5月28日
0

非特殊说明,本博所有文章均为博主原创。