ba/mifoskin.html
2025-03-09 03:19:17 +01:00

71 lines
2.0 KiB
HTML

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DrMifo Iframe</title>
<style>
body, html {
margin: 0;
overflow: hidden;
}
canvas {
width: 100%;
height: 100%;
filter: drop-shadow(5px 5px 5px #222);
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/94/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/InventivetalentDev/MineRender@1.4.6/dist/skin.min.js"></script>
</head>
<body>
<h1><pre>Mifos Skin</pre></h1>
<script>
let skinRender;
let animate = true;
let startTime = Date.now();
function renderSkin() {
if (skinRender) skinRender.clearScene();
skinRender = new SkinRender({
autoResize: true,
render: { taa: true }
}, document.body);
skinRender.render({
username: "DrMifoYT",
capeUrl: "https://minerender.org/img/optifine_cape.png",
optifine: true
});
document.body.addEventListener("skinRender", startAnimation);
}
function startAnimation() {
requestAnimationFrame(animateModel);
}
function animateModel() {
if (!animate || !skinRender || !skinRender.playerModel) return;
let t = (Date.now() - startTime) / 1000;
let model = skinRender.playerModel.children;
model[2].rotation.x = Math.sin(t * 5) / 2;
model[3].rotation.x = -Math.sin(t * 5) / 2;
model[4].rotation.x = Math.sin(t * 5) / 2;
model[5].rotation.x = -Math.sin(t * 5) / 2;
requestAnimationFrame(animateModel);
}
renderSkin();
</script>
</body>
</html>