Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
113 lines (105 sloc) 5.67 KB
<!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 URL</label>
<input type="url" id="capeInput" placeholder="URL" value="https://minerender.org/img/optifine_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>
</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="https://cdn.jsdelivr.net/gh/InventivetalentDev/MineRender@1.1.1/dist/skin.js"></script>
<script>
var skinRender = new SkinRender({
autoResize: true,
render: {
taa: true
}
}, document.body);
skinRender.render({
username: location.hash ? location.hash.substring(1) : "inventivetalent",
capeUrl: "https://minerender.org/img/optifine_cape.png",
optifine: true
});
if (location.hash) $("#nameInput").val(location.hash.substring(1));
$("#nameInput,#capeInput").on("change", function () {
skinRender.clearScene();
var skin = $("#nameInput").val();
var cape = $("#capeInput").val();
var options = {};
if (skin.indexOf("http") === 0) {
options.url = skin;
} else {
options.username = skin;
location.hash = skin;
}
if (cape && cape.length > 0) {
options.capeUrl = cape;
options.optifine = cape.toLowerCase().indexOf("optifine") > 0;
}
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>
You can’t perform that action at this time.