skinview3d

Three.js powered Minecraft skin viewer.

Features

• 1.8 Skins
• HD Skins
• Capes
• Elytras
• Slim Arms
  • Automatic model detection (Slim / Default)

Usage

Example of using skinview3d

<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>

Anti-aliasing

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);

Build

npm run build