avatar

Catalog
Live2d 模型

给自己网站加一个可爱的live2d

开始

需要一台计算机,和一双手,就可以开始了(我再说什么?)

不多废话进入主题

我提供了一个较大的模型库
GETHUB

html

我提供了一个 demo html

Github

配置文件

javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
function loadModel(modelId, modelTexturesId){
localStorage.setItem('modelId', modelId);
if (modelTexturesId === undefined) modelTexturesId = 0;
localStorage.setItem('modelTexturesId', modelTexturesId);
loadlive2d('live2d', 'https://api.test404.club/v3/live2d/get/?id='+modelId+'-'+modelTexturesId, console.log('live2d','模型 '+modelId+'-'+modelTexturesId+' 加载完成'));
}

function loadRandModel(){
var modelId = localStorage.getItem('modelId');
var modelTexturesId = localStorage.getItem('modelTexturesId');

var modelTexturesRandMode = 'rand'; // 可选 'rand'(随机), 'switch'(顺序)

$.ajax({
cache: false,
url: 'https://api.test404.club/v3/live2d/'+modelTexturesRandMode+'_textures/?id='+modelId+'-'+modelTexturesId,
dataType: "json",
success: function (result){
if (result.textures['id'] == 1 && (modelTexturesId == 1 || modelTexturesId == 0)) {
showMessage('我还没有其他衣服呢', 3000, true);
} else {
showMessage('我的新衣服好看嘛', 3000, true);
}
loadModel(modelId, result.textures['id']);
}
});
}

function loadOtherModel(){
var modelId = localStorage.getItem('modelId');

var modelTexturesRandMode = 'switch'; // 可选 'rand'(随机), 'switch'(顺序)

$.ajax({
cache: false,
url: 'https://api.test404.club/v3/live2d/'+modelTexturesRandMode+'/?id='+modelId,
dataType: "json",
success: function (result){
loadModel(result.model['id']);
showMessage(result.model['message'], 3000, true);
}
});
}

地址可修改为本地修改

javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
function loadModel(modelId, modelTexturesId){
localStorage.setItem('modelId', modelId);
if (modelTexturesId === undefined) modelTexturesId = 0;
localStorage.setItem('modelTexturesId', modelTexturesId);
loadlive2d('live2d', ''+modelId+'-'+modelTexturesId, console.log('live2d','模型 '+modelId+'-'+modelTexturesId+' 加载完成'));
}

function loadRandModel(){
var modelId = localStorage.getItem('modelId');
var modelTexturesId = localStorage.getItem('modelTexturesId');

var modelTexturesRandMode = 'rand'; // 可选 'rand'(随机), 'switch'(顺序)

$.ajax({
cache: false,
url: 'live2d/'+modelTexturesRandMode+'_textures/?id='+modelId+'-'+modelTexturesId,
dataType: "json",
success: function (result){
if (result.textures['id'] == 1 && (modelTexturesId == 1 || modelTexturesId == 0)) {
showMessage('我还没有其他衣服呢', 3000, true);
} else {
showMessage('我的新衣服好看嘛', 3000, true);
}
loadModel(modelId, result.textures['id']);
}
});
}

function loadOtherModel(){
var modelId = localStorage.getItem('modelId');

var modelTexturesRandMode = 'switch'; // 可选 'rand'(随机), 'switch'(顺序)

$.ajax({
cache: false,
url: 'live2d/'+modelTexturesRandMode+'/?id='+modelId,
dataType: "json",
success: function (result){
loadModel(result.model['id']);
showMessage(result.model['message'], 3000, true);
}
});
}

hexo

安装

Code
1
# npm install --save hexo-helper-live2d

Hexo_config.yml 文件或主题的 _config.yml 文件中添加配置.
参阅 live2d-widget.js API

我的配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
# Live2D
## https://github.com/EYHN/hexo-helper-live2d
## https://l2dwidget.js.org/docs/class/src/index.js~L2Dwidget.html#instance-method-init
live2d:
enable: true
#enable: false
scriptFrom: local # 默认
pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)
pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
pluginModelPath: assets/ # 模型文件相对与插件根目录路径
# scriptFrom: jsdelivr # jsdelivr CDN
# scriptFrom: unpkg # unpkg CDN
# scriptFrom: https://cdn.jsdelivr.net/npm/live2d-widget@3.x/lib/L2Dwidget.min.js # 你的自定义 url
tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
debug: false # 调试, 是否在控制台输出日志
model:
use: live2d-widget-model-hibiki
# use: live2d-widget-model-wanko # npm-module package name
# use: wanko # 博客根目录/live2d_models/ 下的目录名
# use: ./wives/wanko # 相对于博客根目录的路径
# use: https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json # 你的自定义 url
display:
position: right
width: 145
height: 315
mobile:
show: true # 是否在移动设备上显示
scale: 0.5 # 移动设备上的缩放
react:
opacityDefault: 0.7
opacityOnHover: 0.8

接口

我有新模型时将更新本接口(本接口为二开 原作者
猫与向日葵)

API

博客

Author: 寒小林
Link: https://blog.xiaolin.mcxhz.cn/2020/04/03/Live2d-%E6%A8%A1%E5%9E%8B/
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.
Donate
  • 微信
    微信
  • 支付寶
    支付寶