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