/
index.html
123 lines (113 loc) · 6.07 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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html>
<head>
<title>MineRender - quick, easy, interactive Minecraft renders - Skins, Blocks, Items & more</title>
<link id="favicon" rel="icon" href="https://minerender.org/favicon.ico"/>
<style>
body, html {
overflow-x: hidden;
overflow-y: hidden;
}
body {
margin: 0;
}
canvas {
width: 100%;
height: 100%;
/* Drop Shadow */
-webkit-filter: drop-shadow(5px 5px 5px #222);
filter: drop-shadow(5px 5px 5px #222);
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
</head>
<body>
<a href="https://github.com/InventivetalentDev/MineRender/blob/master/demo/skin/index.html" target="_blank" style="position: absolute;"><img width="149" height="149" src="https://github.blog/wp-content/uploads/2008/12/forkme_left_gray_6d6d6d.png?resize=149%2C149" class="attachment-full size-full" alt="Fork me on GitHub" data-recalc-dims="1"></a>
<div style="position: fixed; right:10px; top:10px; background-color:lightgray; opacity: 50;z-index:10;font-family: 'Courier New',monospace;">
<div style="margin: 10px;">
<div>
<label for="nameInput">Username or URL</label>
<input type="text" id="nameInput" placeholder="URL or Username" value="inventivetalent">
</div>
<div>
<label for="capeInput">Cape</label>
<input type="url" id="capeInput" placeholder="URL" value="https://minerender.org/img/optifine_hires_cape.png">
</div>
</div>
<div style="margin: 10px;">
<span><input type="checkbox" class="partToggle" id="hat" checked><label for="hat">Hat</label></span>
<span><input type="checkbox" class="partToggle" id="jacket" checked><label for="jacket">Jacket</label></span>
<br/>
<span><input type="checkbox" class="partToggle" id="leftSleeve" checked><label for="leftSleeve">Left Sleeve</label></span>
<span><input type="checkbox" class="partToggle" id="rightSleeve" checked><label for="rightSleeve">Right Sleeve</label></span>
<br/>
<span><input type="checkbox" class="partToggle" id="leftTrousers" checked><label for="leftTrousers">Left Trousers</label></span>
<span><input type="checkbox" class="partToggle" id="rightTrousers" checked><label for="rightTrousers">Right Trousers</label></span>
<br/>
<span><input type="checkbox" class="partToggle" id="cape" checked><label for="cape">Cape</label></span>
</div>
<div style="margin:10px">
<span><input type="checkbox" id="animate" checked><label for="animate">Animate</label></span>
<span><input type="checkbox" id="slim"><label for="slim">Slim</label></span>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/94/three.min.js" integrity="sha256-NGC9JEuTWN4GhTj091wctgjzftr+8WNDmw0H8J5YPYE=" crossorigin="anonymous"></script>
<script src="../../dist/skin.js"></script>
<script>
var skinRender = new SkinRender({
autoResize: true,
render: {
taa: true
},
makeNonTransparentOpaque: false
}, document.body);
skinRender.render({
username: location.hash ? location.hash.substring(1) : "inventivetalent",
capeUrl: "https://minerender.org/img/optifine_hires_cape.png",
optifine: true
});
if (location.hash) $("#nameInput").val(location.hash.substring(1));
$("#nameInput,#capeInput,#slim").on("change", function () {
skinRender.clearScene();
var skin = $("#nameInput").val();
var cape = $("#capeInput").val();
var slim = $("#slim").is(":checked");
var options = {};
if (skin.indexOf("http") === 0) {
options.url = skin;
} else {
options.username = skin;
location.hash = skin;
}
if (cape && cape.length > 0) {
if (cape.includes("capes.dev") || !cape.startsWith("http")) { // capes.dev link or type
options.cape = cape;
} else {
options.capeUrl = cape;
options.optifine = cape.toLowerCase().indexOf("optifine") > 0;
}
}
options.slim = slim;
skinRender.render(options);
})
$(".partToggle").on("change", function () {
skinRender.getModelByName($(this).attr("id")).visible = $(this).is(":checked");
});
var animate = true;
$("#animate").on("change", function () {
animate = $(this).is(":checked");
});
var startTime = Date.now();
document.body.addEventListener("skinRender", function (e) {
if (animate) {
var t = (Date.now() - startTime) / 1000;
e.detail.playerModel.children[2].rotation.x = Math.sin(t * 5) / 2;
e.detail.playerModel.children[3].rotation.x = -Math.sin(t * 5) / 2;
e.detail.playerModel.children[4].rotation.x = Math.sin(t * 5) / 2;
e.detail.playerModel.children[5].rotation.x = -Math.sin(t * 5) / 2;
}
})
</script>
</body>
</html>