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
<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>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.
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" });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;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');
}Build
npm run build