https://github.com/bs-community/skinview3d
Three.js powered Minecraft skin viewer.
https://github.com/bs-community/skinview3d
minecraft minecraft-cape minecraft-skin skin-viewer skinview3d
Last synced: 5 months ago
JSON representation
Three.js powered Minecraft skin viewer.
- Host: GitHub
- URL: https://github.com/bs-community/skinview3d
- Owner: bs-community
- License: mit
- Created: 2017-10-01T07:16:35.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2025-05-06T13:10:36.000Z (about 1 year ago)
- Last Synced: 2026-01-23T06:58:47.569Z (5 months ago)
- Topics: minecraft, minecraft-cape, minecraft-skin, skin-viewer, skinview3d
- Language: TypeScript
- Homepage: https://skinview3d-demo.vercel.app
- Size: 12.9 MB
- Stars: 668
- Watchers: 14
- Forks: 112
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome-minecraft-bedrock - Skinview3d - Three.js powered Minecraft skin viewer. (Skinning, modeling and texturing)
README
skinview3d
========
[](https://github.com/bs-community/skinview3d/actions?query=workflow:CI)
[](https://www.npmjs.com/package/skinview3d)
[](https://github.com/bs-community/skinview3d/blob/master/LICENSE)
[](https://gitter.im/skinview3d/Lobby)
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](https://skinview3d-demo.vercel.app)
[](https://codesandbox.io/s/skinview3d-template-vdmuh4)
```html
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;
```
## 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:
```js
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](https://github.com/bs-community/skinview3d/blob/master/examples/public/img/ears.png))
* `skin`: Skin texture that contains the ear (e.g. [deadmau5's skin](https://minecraft.wiki/w/Easter_eggs#deadmau5's_ears))
Usage:
```js
// 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:
```js
// 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](https://github.com/South-Paw/typeface-minecraft).
This font is available at [`assets/minecraft.woff2`](assets/minecraft.woff2).
To load this font, please add the `@font-face` rule to your CSS:
```css
@font-face {
font-family: 'Minecraft';
src: url('/path/to/minecraft.woff2') format('woff2');
}
```
# Build
`npm run build`