Ubujira
/
skinview3d
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Pre-merge

This commit is contained in:
James Harrison 2020-09-10 22:20:04 +01:00
parent 150dbbd61c
commit 8eb2caae63
2 changed files with 75 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
examples/animated.png Normal file → Executable file
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 80 KiB

After

Width:  |  Height:  |  Size: 80 KiB

150
examples/index.html Normal file → Executable file
View File

@ -1,75 +1,75 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>skinview3d</title> <title>skinview3d</title>
<link href="https://fonts.googleapis.com/css?family=Archivo+Black" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Archivo+Black" rel="stylesheet">
<style> <style>
html, html,
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
background-color: #1e1e1e; background-color: #1e1e1e;
} }
#skin_container { #skin_container {
text-align: center; text-align: center;
cursor: move; cursor: move;
} }
#skin_container > canvas { #skin_container > canvas {
background: white; background: white;
filter: drop-shadow(-5px 5px 7px rgba(0, 0, 0, 0.4)); filter: drop-shadow(-5px 5px 7px rgba(0, 0, 0, 0.4));
outline: none; outline: none;
} }
#elytra, #animated { #elytra, #animated {
display: block; display: block;
margin: 1vh auto; margin: 1vh auto;
font-size: 2rem; font-size: 2rem;
} }
</style> </style>
</head> </head>
<body> <body>
<button id="elytra">Enable/Disable Elytra</button> <button id="elytra">Enable/Disable Elytra</button>
<button id="animated">Enable/Disable Animated</button> <button id="animated">Enable/Disable Animated</button>
<div id="skin_container"></div> <div id="skin_container"></div>
<script type="text/javascript" src="../bundles/skinview3d.bundle.js"></script> <script type="text/javascript" src="../bundles/skinview3d.bundle.js"></script>
<script> <script>
var animated = false; var animated = false;
document.getElementById("elytra").addEventListener('click', function() { document.getElementById("elytra").addEventListener('click', function() {
skinViewer.playerObject.cape.visible = !skinViewer.playerObject.cape.visible; skinViewer.playerObject.cape.visible = !skinViewer.playerObject.cape.visible;
skinViewer.playerObject.elytra.visible = !skinViewer.playerObject.elytra.visible skinViewer.playerObject.elytra.visible = !skinViewer.playerObject.elytra.visible
}); });
document.getElementById("animated").addEventListener('click', function() { document.getElementById("animated").addEventListener('click', function() {
if(animated) { if(animated) {
skinViewer.loadCustomCape("./cape.png"); skinViewer.loadCustomCape("./cape.png");
animated = false; animated = false;
} else { } else {
skinViewer.loadCustomCape("./animated.png"); skinViewer.loadCustomCape("./animated.png");
animated = true; animated = true;
} }
}); });
let skinViewer = new skinview3d.SkinViewer(document.getElementById("skin_container"), { let skinViewer = new skinview3d.SkinViewer(document.getElementById("skin_container"), {
width: 1400, width: 1400,
height: 800, height: 800,
skin: "https://crafatar.com/skins/ba4161c03a42496c8ae07d13372f3371", skin: "https://crafatar.com/skins/ba4161c03a42496c8ae07d13372f3371",
cape: "./cape.png", cape: "./cape.png",
ears: "./ears.png" ears: "./ears.png"
}); });
let control = new skinview3d.createOrbitControls(skinViewer); let control = new skinview3d.createOrbitControls(skinViewer);
control.enableZoom = false; control.enableZoom = false;
control.enablePan = false; control.enablePan = false;
skinViewer.playerObject.rotation.y = 180 * Math.PI / 180; skinViewer.playerObject.rotation.y = 180 * Math.PI / 180;
</script> </script>
</body> </body>
</html> </html>