Three.js powered Minecraft skin viewer.
Three.js powered Minecraft skin viewer.
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.6;
skinViewer.globalLight.intensity = 3;Setting globalLight.intensity to 3.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
No open issues yet, or sync has not completed.