2018-02-11 20:20:04 +01:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
2018-07-17 20:49:00 +02:00
|
|
|
|
2018-02-11 20:20:04 +01:00
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<title>skinview3d</title>
|
|
|
|
|
<link href="https://fonts.googleapis.com/css?family=Archivo+Black" rel="stylesheet">
|
2018-07-29 16:03:55 +02:00
|
|
|
<style>
|
|
|
|
|
html,
|
|
|
|
|
body {
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
background-color: #1e1e1e;
|
|
|
|
|
}
|
2020-06-08 22:32:54 +02:00
|
|
|
|
2020-07-12 21:46:50 +02:00
|
|
|
#skin_container {
|
2020-06-08 22:32:54 +02:00
|
|
|
text-align: center;
|
|
|
|
|
cursor: move;
|
|
|
|
|
}
|
|
|
|
|
|
2020-07-12 21:46:50 +02:00
|
|
|
#skin_container > canvas {
|
2020-06-08 22:32:54 +02:00
|
|
|
background: white;
|
|
|
|
|
filter: drop-shadow(-5px 5px 7px rgba(0, 0, 0, 0.4));
|
|
|
|
|
outline: none;
|
|
|
|
|
}
|
2020-07-12 21:46:50 +02:00
|
|
|
|
|
|
|
|
#elytra, #animated {
|
|
|
|
|
display: block;
|
|
|
|
|
margin: 1vh auto;
|
|
|
|
|
font-size: 2rem;
|
|
|
|
|
}
|
2018-07-29 16:03:55 +02:00
|
|
|
</style>
|
2018-02-11 20:20:04 +01:00
|
|
|
</head>
|
2018-07-17 20:49:00 +02:00
|
|
|
|
2018-02-11 20:20:04 +01:00
|
|
|
<body>
|
2020-07-12 21:46:50 +02:00
|
|
|
<button id="elytra">Enable/Disable Elytra</button>
|
|
|
|
|
<button id="animated">Enable/Disable Animated</button>
|
2018-02-11 20:20:04 +01:00
|
|
|
<div id="skin_container"></div>
|
2020-01-31 01:50:30 +01:00
|
|
|
<script type="text/javascript" src="../bundles/skinview3d.bundle.js"></script>
|
2018-02-11 20:20:04 +01:00
|
|
|
<script>
|
2020-07-12 21:46:50 +02:00
|
|
|
var animated = false;
|
2018-02-11 20:20:04 +01:00
|
|
|
|
2020-07-12 21:46:50 +02:00
|
|
|
document.getElementById("elytra").addEventListener('click', function() {
|
|
|
|
|
skinViewer.playerObject.cape.visible = !skinViewer.playerObject.cape.visible;
|
|
|
|
|
skinViewer.playerObject.elytra.visible = !skinViewer.playerObject.elytra.visible
|
|
|
|
|
});
|
2018-02-11 20:20:04 +01:00
|
|
|
|
2020-07-12 21:46:50 +02:00
|
|
|
document.getElementById("animated").addEventListener('click', function() {
|
|
|
|
|
if(animated) {
|
|
|
|
|
skinViewer.loadCustomCape("./cape.png");
|
|
|
|
|
animated = false;
|
|
|
|
|
} else {
|
|
|
|
|
skinViewer.loadCustomCape("./animated.png");
|
|
|
|
|
animated = true;
|
|
|
|
|
}
|
|
|
|
|
});
|
2018-02-11 20:20:04 +01:00
|
|
|
|
2020-06-17 05:15:52 +02:00
|
|
|
let skinViewer = new skinview3d.SkinViewer(document.getElementById("skin_container"), {
|
2020-07-12 21:46:50 +02:00
|
|
|
width: 1400,
|
|
|
|
|
height: 800,
|
2020-07-13 18:46:15 +02:00
|
|
|
skin: "https://crafatar.com/skins/ba4161c03a42496c8ae07d13372f3371",
|
2020-07-12 21:46:50 +02:00
|
|
|
cape: "./cape.png",
|
|
|
|
|
ears: "./ears.png"
|
2018-02-11 20:20:04 +01:00
|
|
|
});
|
|
|
|
|
|
2018-03-03 15:03:01 +01:00
|
|
|
let control = new skinview3d.createOrbitControls(skinViewer);
|
2020-06-08 22:32:54 +02:00
|
|
|
control.enableZoom = false;
|
|
|
|
|
control.enablePan = false;
|
|
|
|
|
skinViewer.playerObject.rotation.y = 180 * Math.PI / 180;
|
2018-02-11 20:20:04 +01:00
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</body>
|
2018-07-17 20:49:00 +02:00
|
|
|
|
2018-07-21 05:07:52 +02:00
|
|
|
</html>
|
