forked from imuncle/live2d
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
78 lines (67 loc) · 3.65 KB
/
index.html
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Live2D 看板娘 v1.0 Demo</title>
<link rel="icon" href="avatar.png">
</head>
<body style="font-family: 'Microsoft YaHei';">
<div style="position:fixed; top:0px; left:600px; background-color: white;">
<ul>
<li><a href="" style="color: #38A3DB; text-decoration: none;">Demo 1 - 常规引用</a></li>
<li><span>Demo 2 - 自动加载 autoload.js</span></li>
<li><a href="" style="color: #38A3DB; text-decoration: none;">Demo 3 - 内置 waifu-tips.json</a></li>
<li><a target="_blank" href="https://github.com/imuncle/live2d">＜致敬 Model收集者❤＞</a><li>
</ul>
<text> 角色番号：</text><text id="model_id"></text><text> 服饰番号：</text><text id="texure_id"></text>
<button id="Change" class="active">角色变更</button><button id="texure" class="active">服饰变更</button>
</div>
<h3>Live2D 角色配置一览 json </h3>
<ol id="model_info" style="margin-top:0px ;"></ol>
<!-- 动态加载 canvas live2d 添加以下2个jQuery，1个aotuload.js-->
<!-- waifu-tips.js 依赖 jQuery v3.3.1 -->
<script src=https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js></script>
<script src=https://cdn.jsdelivr.net/npm/jquery-ui@1.14.1/dist/jquery-ui.min.js></script>
<!-- 使用 aotuload.js 启动Live2D看板娘 -->
<script src=autoload.js></script>
<!-- 以下为调试用 -->
<script src="https://cdn.jsdelivr.net/gh/hst1189/live2d-widget/ModelDefine.js"></script>
<script>
for(model in ModelDefine.MODELS) {
if(ModelDefine.MODELS[model].length == 1) {
document.getElementById("model_info").innerHTML += "<li>"+ModelDefine.MODELS[model][0]+"</li>";
} else {
var content = "<li>"+ModelDefine.MODELS[model][0]+"</li><ol>";
for(texure in ModelDefine.MODELS[model]) {
content += "<li>"+ModelDefine.MODELS[model][texure]+"</li>";
if(texure == ModelDefine.MODELS[model].length - 1) {
content += "</ol>";
}
}
document.getElementById("model_info").innerHTML += content;
}
}
var current_model_id = 1;
var current_texure_id = 1;
document.getElementById("model_id").innerHTML = current_model_id;
document.getElementById("texure_id").innerHTML = current_texure_id;
btnChangeModel = document.getElementById("Change");
btnChangeModel.addEventListener("click", function(e) {
current_model_id++;
current_texure_id = 1;
if(current_model_id > ModelDefine.MODELS.length) current_model_id = 1;
document.getElementById("model_id").innerHTML = current_model_id;
document.getElementById("texure_id").innerHTML = current_texure_id;
loadlive2d("live2d", ModelDefine.MODELS[current_model_id-1][current_texure_id-1]);
})
btnChangeExure = document.getElementById("texure");
btnChangeExure.addEventListener('click', function(e) {
current_texure_id++;
if(current_texure_id > ModelDefine.MODELS[current_model_id-1].length) current_texure_id = 1;
document.getElementById("model_id").innerHTML = current_model_id;
document.getElementById("texure_id").innerHTML = current_texure_id;
loadlive2d("live2d", ModelDefine.MODELS[current_model_id-1][current_texure_id-1]);
})
</script>
</body>
</html>