Three.js powered Minecraft skin viewer.
- 1.8 Skins
- HD Skins
- Capes
- Elytras
- Slim Arms
- Automatic model detection (Slim / Default)
<canvas id="skin_container"></canvas>
<script>
let skinViewer = new skinview3d.SkinViewer({
canvas: document.getElementById("skin_container"),
width: 300,
height: 400,
skin: "img/skin.png"
});
// Change viewer size
skinViewer.width = 600;
skinViewer.height = 800;
// Load another skin
skinViewer.loadSkin("img/skin2.png");
// Load a cape
skinViewer.loadCape("img/cape.png");
// Load a elytra (from a cape texture)
skinViewer.loadCape("img/cape.png", { backEquipment: "elytra" });
// Unload(hide) the cape / elytra
skinViewer.loadCape(null);
// Control objects with your mouse!
let control = skinview3d.createOrbitControls(skinViewer);
control.enableRotate = true;
control.enableZoom = false;
control.enablePan = false;
// Add an animation
let walk = skinViewer.animations.add(skinview3d.WalkingAnimation);
// Add another animation
let rotate = skinViewer.animations.add(skinview3d.RotatingAnimation);
// Remove an animation, stop walking dude
walk.remove();
// Remove the rotating animation, and make the player face forward
rotate.resetAndRemove();
// And run for now!
let run = skinViewer.animations.add(skinview3d.RunningAnimation);
// Set the speed of an animation
run.speed = 3;
// Pause single animation
run.paused = true;
// Pause all animations!
skinViewer.animations.paused = true;
</script>
skinview3d supports FXAA (fast approximate anti-aliasing).
To enable it, you need to replace SkinViewer
with FXAASkinViewer
.
It's recommended to use an opaque background when FXAA is enabled, as transparent background may look buggy.
let skinViewer = new skinview3d.FXAASkinViewer({
// we do not use transparent background, so disable alpha to improve performance
alpha: false,
...
});
// set the background color
skinViewer.renderer.setClearColor(0x5a76f3);
npm run build