forked from imuncle/live2d
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
87 lines (86 loc) · 4.35 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
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<html>
<head>
<title>Live2d Cubism 2</title>
<meta charset="utf-8">
<link rel="icon" href="avatar.png">
<style>
.live2d {
position: fixed;
bottom : 0;
left : 460px;
}
</style>
</head>
<body>
<div style="position:fixed;top:0;background-color: white;">
<button id="Change" class="active">换人</button>
<button id="texure" class="active">换衣服</button>
<text>当前：模型编号 </text><text id="model_id"></text><text>；衣服编号 </text><text id="texure_id"></text>
<input type="number" id="model" placeholder="模型编号">
<input type="number" id="Texure" placeholder="衣服编号">
<button onclick="JumpToModel()">跳转</button>
<a href="live2d_3">Live2d Cubism 3</a>
<a target="_blank" href="https://github.com/imuncle/live2d">Github</a>
</div>
<ol id="model_info" style="margin-top:30px ;"></ol>
<canvas class="live2d" id="live2d" width="300" height="800"></canvas>
</body>
<script src="js/LAppDefine.js"></script>
<script src="js/live2d.js"></script>
<script>
for(model in LAppDefine.MODELS) {
if(LAppDefine.MODELS[model].length == 1) {
document.getElementById("model_info").innerHTML += "<li>"+LAppDefine.MODELS[model][0]+"</li>";
} else {
var content = "<li>"+LAppDefine.MODELS[model][0]+"</li><ol>";
for(texure in LAppDefine.MODELS[model]) {
content += "<li>"+LAppDefine.MODELS[model][texure]+"</li>";
if(texure == LAppDefine.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;
function JumpToModel() {
if(document.getElementById("model").value == "") document.getElementById("model").value = "1";
if(document.getElementById("Texure").value == "") document.getElementById("Texure").value = "1";
current_model_id = parseInt(document.getElementById("model").value);
current_texure_id = parseInt(document.getElementById("Texure").value);
var model_id = current_model_id - 1;
var texure_id = current_texure_id - 1;
if(model_id > LAppDefine.MODELS.length - 1) {
model_id = LAppDefine.MODELS.length - 1;
texure_id = 0;
} else if(texure_id > LAppDefine.MODELS[model_id].length - 1) {
texure_id = LAppDefine.MODELS[model_id].length - 1;
}
loadlive2d(LAppDefine.CANVAS_ID, LAppDefine.MODELS[model_id][texure_id]);
document.getElementById("model_id").innerHTML = current_model_id;
document.getElementById("texure_id").innerHTML = current_texure_id;
}
btnChangeExure = document.getElementById(LAppDefine.TEXURE_BUTTON_ID);
btnChangeExure.addEventListener('click', function(e) {
current_texure_id++;
if(current_texure_id > LAppDefine.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(LAppDefine.CANVAS_ID, LAppDefine.MODELS[current_model_id-1][current_texure_id-1]);
})
btnChangeModel = document.getElementById(LAppDefine.BUTTON_ID);
btnChangeModel.addEventListener("click", function(e) {
current_model_id++;
current_texure_id = 1;
if(current_model_id > LAppDefine.MODELS.length) current_model_id = 1;
loadlive2d(LAppDefine.CANVAS_ID, LAppDefine.MODELS[current_model_id-1][current_texure_id-1]);
document.getElementById("model_id").innerHTML = current_model_id;
document.getElementById("texure_id").innerHTML = current_texure_id;
})
loadlive2d("live2d", "model/22/model.default.json");
</script>
</html>