skinview3d

Three.js powered Minecraft skin viewer.

Features

• 1.8 Skins
• HD Skins
• Capes
• Ears
• Elytras
• Slim Arms
  • Automatic model detection (Slim / Default)
• FXAA (fast approximate anti-aliasing)

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

    // Rotate the player
    skinViewer.autoRotate = true;

    // Apply an animation
    skinViewer.animation = new skinview3d.WalkingAnimation();

    // Set the speed of the animation
    skinViewer.animation.speed = 3;

    // Pause the animation
    skinViewer.animation.paused = true;

    // Remove the animation
    skinViewer.animation = null;
</script>
Copy

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

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

Ears

skinview3d supports two types of ear texture:

• standalone: 14x7 image that contains the ear (example)
• skin: Skin texture that contains the ear (e.g. deadmau5's skin)

Usage:

// You can specify ears in the constructor:
new skinview3d.SkinViewer({
    skin: "img/deadmau5.png",

    // Use ears drawn on the current skin (img/deadmau5.png)
    ears: "current-skin",

    // Or use ears from other textures
    ears: {
        textureType: "standalone", // "standalone" or "skin"
        source: "img/ears.png"
    }
});

// Show ears when loading skins:
skinViewer.loadSkin("img/deadmau5.png", { ears: true });

// Use ears from other textures:
skinViewer.loadEars("img/ears.png", { textureType: "standalone" });
skinViewer.loadEars("img/deadmau5.png", { textureType: "skin" });
Copy

Name Tag

Usage:

// Name tag with text "hello"
skinViewer.nameTag = "hello";

// Specify the text color
skinViewer.nameTag = new skinview3d.NameTagObject("hello", { textStyle: "yellow" });

// Unset the name tag
skinViewer.nameTag = null;
Copy

In order to display name tags correctly, you need the Minecraft font from South-Paw/typeface-minecraft. This font is available at assets/minecraft.woff2.

To load this font, please add the @font-face rule to your CSS:

@font-face {
    font-family: 'Minecraft';
    src: url('/path/to/minecraft.woff2') format('woff2');
}
Copy

Build

npm run build