README

skinview3d

Three.js powered Minecraft skin viewer.

Features

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

Usage

<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 an elytra (from a cape texture)
    skinViewer.loadCape("img/cape.png", { backEquipment: "elytra" });

    // Unload(hide) the cape / elytra
    skinViewer.loadCape(null);

    // Set the background color
    skinViewer.background = 0x5a76f3;

    // Set the background to a normal image
    skinViewer.loadBackground("img/background.png");

    // Set the background to a panoramic image
    skinViewer.loadPanorama("img/panorama1.png");

    // Change camera FOV
    skinViewer.fov = 70;

    // Zoom out
    skinViewer.zoom = 0.5;

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

Note that FXAA is incompatible with transparent backgrounds. So when FXAA is enabled, the default background color will be white instead of transparent.

Lighting

By default, there are two lights on the scene. One is an ambient light, and the other is a point light from the camera.

To change the light intensity:

skinViewer.cameraLight.intensity = 0.9;
skinViewer.globalLight.intensity = 0.1;

Setting globalLight.intensity to 1.0 and cameraLight.intensity to 0.0 will completely disable shadows.

Build

npm run build

Usage no npm install needed!