Skin3d is a JavaScript library for displaying and animating Minecraft player models in the browser. It supports rendering skins, capes, elytras, and ears, and provides a simple API for customizing animations, camera controls, and backgrounds.
✨ Recently refactored with improved modularity, better documentation, and dependency cleanup. See Migration Guide for details.
Skin3d is a JavaScript library for embedding interactive Minecraft player models in web applications. It supports HD skins, capes, elytras, ears, and name tags, along with built-in animations. You can customize camera controls, lighting, backgrounds, and extend functionality with your own features.
Built with: Three.js + TypeScript
- Interactive 3D Minecraft player models in the browser
- Supports all modern skin and cape formats
- Easy to use, easy to extend
- Customizable animations and controls
- Works with any web framework or vanilla JS
Install via npm:
npm i skin3d<div id="skin_view_container"></div>import { Render, WalkingAnimation } from 'skin3d';
const viewer = new Render({
canvas: document.getElementById("skin_view_container"),
width: 400,
height: 600,
skin: "img/skin.png"
});
viewer.autoRotate = true;
viewer.animation = new WalkingAnimation();Note: The main class is now Render (previously View in v0.0.10). See Migration Guide for upgrading.
- Skin, Cape, Elytra, and Ears Rendering
- Name Tag Support (with Minecraft font)
- Orbit Controls (rotate, zoom, pan)
- Customizable Lighting
- Panorama and Image Backgrounds
- Built-in Animations (walk, run, rotate, etc.)
- Pause/Resume Rendering
- View: The main class for rendering and controlling the player model.
- PlayerObject: Access and control the skin, cape, elytra, and ears meshes.
- NameTagObject: Display a floating name tag above the player.
- Animations: Use built-in or custom animations for the player model.
- Controls: Enable or disable camera rotation, zoom, and pan.
- Lighting: Adjust ambient and camera-attached lights.
- Backgrounds: Set solid colors, images, or panoramic backgrounds.
You can load new skins, capes, or ears at any time:
viewer.loadSkin("img/another_skin.png");
viewer.loadCape("img/cape.png");
viewer.loadEars("img/ears.png", { textureType: "standalone" });
viewer.background = "#222244";
viewer.loadPanorama("img/panorama.png");Change camera and controls:
viewer.fov = 70;
viewer.zoom = 1.2;
viewer.controls.enableRotate = true;
viewer.controls.enableZoom = false;Add or remove animations:
import { IdleAnimation, WalkingAnimation, RunningAnimation } from 'skin3d';
viewer.animation = new WalkingAnimation();
viewer.animation.speed = 2;
viewer.animation.paused = false;
viewer.animation = null; // Remove animationSee Examples for more usage patterns.
- Lighting:
viewer.globalLight.intensity = 1.5;
viewer.cameraLight.intensity = 0.3;- Name Tags:
import { NameTagObject } from 'skin3d';
viewer.nameTag = "Steve";
viewer.nameTag = new NameTagObject("Alex", {
scale: 1.5,
textStyle: { fillStyle: "#FFD700" }
});- Responsive Sizing:
viewer.width = window.innerWidth;
viewer.height = window.innerHeight;
window.addEventListener('resize', () => {
viewer.width = window.innerWidth;
viewer.height = window.innerHeight;
});See Advanced Usage for more features and optimization tips.
To display name tags in Minecraft style, add this to your CSS:
@font-face {
font-family: 'Minecraft';
src: url('/path/to/minecraft.woff2') format('woff2');
}Comprehensive documentation is available in the DOCS directory:
- Getting Started - Installation, setup, and framework integration
- Examples - 10+ practical examples covering common use cases
- API Reference - Complete API documentation with all classes and methods
- Advanced Usage - Performance optimization, custom animations, and advanced features
- Architecture - Understanding the library structure and design patterns
- Migration Guide - Upgrading from previous versions
- Troubleshooting - Common issues and solutions
- Modular Architecture: Refactored for better code organization and maintainability
- New Export System: Improved module exports with better tree-shaking support
- Enhanced Documentation: Comprehensive guides, examples, and API reference
- Dependency Cleanup: Removed unused polyfills, optimized for production
- Main Class Rename:
View→Renderfor clarity
src/Render.ts- Core rendering engine (replaces legacyskin3d.ts)src/Model.ts- Player model and mesh managementsrc/Animation.ts- Animation systemsrc/Nametag.ts- Name tag renderingsrc/index.ts- Main entry point
The main class View has been renamed to Render:
// Old
import { View } from 'skin3d';
const viewer = new View({ ... });
// New
import { Render } from 'skin3d';
const viewer = new Render({ ... });See Migration Guide for complete upgrade instructions.
src/Render.ts– Main rendering enginesrc/Model.ts– Player model and mesh componentssrc/Animation.ts– Animation systemsrc/Nametag.ts– Name tag renderingsrc/index.ts– Public API exportsDOCS/– Comprehensive documentation
skin3d is released under the MIT License.
