最近在查找资料时,发现博客园上的2D人物挺好看的,这就给网站安排一个。嘿嘿,老规矩, 先看原站【https://www.cnblogs.com/tlfe/p/13037874.html】的效果图:
下面是源代码,还不给自己的小站安排上?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></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": {
# 模型替换的json
jsonPath: "https://unpkg.com/live2d-widget-model-haruto@1.0.5/assets/haruto.model.json",
"scale": 1
},
"display": {
"position": "right",
"width": 150,
"height": 300,
"hOffset": 0,
"vOffset": -20
},
"mobile": {
"show": true,
"scale": 0.5
},
"react": {
"opacityDefault": 0.7,
"opacityOnHover": 0.2
}
});
</script>
</html>
关于模型替换,目前支持如下模型的替换,替换方式
- 浏览器访问
https://unpkg.com/2D模型全名称@1.0.5/ assets/
来查找对应的模型json地址,如https://unpkg.com/browse/live2d-widget-model-chitose@1.0.5/assets/chitose.model.json - 模型的json地址为*.model.json.
- 替换:把json的/browse删除后替换对应源代码位置
# 2D模型全名称
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
本次2D人物集成就讲到这儿,喜欢本文就点个赞吧!