Three.js powered Minecraft skin viewer.
- 1.8 Skins
- HD Skins
- Capes
- Ears
- Elytras
- Slim Arms
- Automatic model detection (Slim / Default)
- FXAA (fast approximate anti-aliasing)
<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>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.
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" });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'); }npm run build
