132 lines
3.8 KiB
Markdown
132 lines
3.8 KiB
Markdown
|
### L2Dwidget二次元看板娘的web用法
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
#### 一、看板娘 [hexo](https://so.csdn.net/so/search?q=hexo&spm=1001.2101.3001.7020) live2d 演示
|
|||
|
|
|
|||
|
|
[shizuku 看板娘](http://raoenhui.github.io/domes/live2d-example/index.html?id=shizuku)
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
[看板娘git](https://github.com/raoenhui/live2d-example)
|
|||
|
|
|
|||
|
|
```http
|
|||
|
|
https://github.com/raoenhui/live2d-example
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
[看板娘文档](https://juejin.im/post/6844904032423641096)
|
|||
|
|
|
|||
|
|
```http
|
|||
|
|
https://juejin.im/post/6844904032423641096
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
### 二、代码实现
|
|||
|
|
|
|||
|
|
#### 2.1 方式一：$cdn$
|
|||
|
|
|
|||
|
|
只需要在【页首html代码】中引入L2Dwidget.js即可
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<script src="https://l2dwidget.js.org/lib/L2Dwidget.min.js"></script>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
L2Dwidget.init({
|
|||
|
|
"model": {
|
|||
|
|
"jsonPath": "https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json",
|
|||
|
|
"scale": 1
|
|||
|
|
},
|
|||
|
|
"display": {
|
|||
|
|
"position": "right",
|
|||
|
|
"width": 150,
|
|||
|
|
"height": 300,
|
|||
|
|
"hOffset": 0,
|
|||
|
|
"vOffset": -20
|
|||
|
|
},
|
|||
|
|
"mobile": {
|
|||
|
|
"show": true,
|
|||
|
|
"scale": 0.5
|
|||
|
|
},
|
|||
|
|
"react": {
|
|||
|
|
"opacityDefault": 0.8,
|
|||
|
|
"opacityOnHover": 1
|
|||
|
|
},
|
|||
|
|
"dialog": {
|
|||
|
|
"enable": true,
|
|||
|
|
"script": {
|
|||
|
|
'tap body': '哎呀！别碰我！',
|
|||
|
|
'tap face': '人家是在认真写博客哦--前端妹子',
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
[这里展示部分图：](http://raoenhui.github.io/domes/live2d-example/index.html?id=koharu)
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
#### 2.2 方式二：源码实现
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
npm install --save hexo-helper-live2d
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
# 博客文档
|
|||
|
|
https://huaji8.top/post/live2d-plugin-2.0/
|
|||
|
|
|
|||
|
|
# git地址
|
|||
|
|
https://github.com/EYHN/hexo-helper-live2d/blob/master/README.zh-CN.md
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<!DOCTYPE html>
|
|||
|
|
<html>
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8" />
|
|||
|
|
<title>Live2d Test Env</title>
|
|||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<p>试试摸摸头和这颗星星会有不同的对话哦</p>
|
|||
|
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="190" height="180" class="star">
|
|||
|
|
<polygon points="100,0 160,180 10,60 190,60 40,180" style="fill:yellow;stroke:yellow;stroke-width:1;"/>
|
|||
|
|
</svg>
|
|||
|
|
<script src="https://l2dwidget.js.org/lib/L2Dwidget.min.js"></script>
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
L2Dwidget
|
|||
|
|
.on('*', (name) => {
|
|||
|
|
console.log('%c EVENT ' + '%c -> ' + name, 'background: #222; color: yellow', 'background: #fff; color: #000')
|
|||
|
|
})
|
|||
|
|
.init({
|
|||
|
|
dialog: {
|
|||
|
|
// 开启对话框
|
|||
|
|
enable: true,
|
|||
|
|
script: {
|
|||
|
|
// 每空闲 10 秒钟，显示一条一言
|
|||
|
|
'every idle 10s': '$hitokoto$',
|
|||
|
|
// 当触摸到星星图案
|
|||
|
|
'hover .star': '星星在天上而你在我心里 (*/ω＼*)',
|
|||
|
|
// 当触摸到角色身体
|
|||
|
|
'tap body': '哎呀！别碰我！',
|
|||
|
|
// 当触摸到角色头部
|
|||
|
|
'tap face': '人家已经不是小孩子了！'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|
|||
|
|
```
|
|||
|
|
|