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: 3 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 (about 7 years ago)
• Default Branch: master
• Last Pushed: 2024-01-14T07:58:44.000Z (10 months ago)
• Last Synced: 2024-07-28T13:25:03.885Z (3 months ago)
• Topics: minecraft, minecraft-cape, minecraft-skin, skin-viewer, skinview3d
• Language: TypeScript
• Homepage: https://bs-community.github.io/skinview3d
• Size: 12.8 MB
• Stars: 522
• Watchers: 16
• Forks: 86
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-minecraft-bedrock - Skinview3d - Three.js powered Minecraft skin viewer. (Skinning, modeling and texturing)

README

        
skinview3d

========

[![CI Status](https://img.shields.io/github/actions/workflow/status/bs-community/skinview3d/ci.yaml?branch=master&label=CI&logo=github&style=flat-square)](https://github.com/bs-community/skinview3d/actions?query=workflow:CI)

[![NPM Package](https://img.shields.io/npm/v/skinview3d.svg?style=flat-square)](https://www.npmjs.com/package/skinview3d)

[![MIT License](https://img.shields.io/badge/license-MIT-yellowgreen.svg?style=flat-square)](https://github.com/bs-community/skinview3d/blob/master/LICENSE)

[![Gitter Chat](https://img.shields.io/gitter/room/TechnologyAdvice/Stardust.svg?style=flat-square)](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://bs-community.github.io/skinview3d/)

[![CodeSandbox](https://img.shields.io/badge/Codesandbox-040404?style=for-the-badge&logo=codesandbox&logoColor=DBDBDB)](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/img/ears.png))

* `skin`: Skin texture that contains the ear (e.g. [deadmau5's skin](https://minecraft.fandom.com/wiki/Easter_eggs#Deadmau5.27s_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`