139 lines
4.1 KiB
Markdown
139 lines
4.1 KiB
Markdown
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)
|
|
|
|
# Usage
|
|
[Example of using skinview3d](https://bs-community.github.io/skinview3d/)
|
|
```html
|
|
<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;
|
|
|
|
// Control objects with your mouse!
|
|
let control = skinview3d.createOrbitControls(skinViewer);
|
|
control.enableRotate = true;
|
|
control.enableZoom = false;
|
|
control.enablePan = false;
|
|
|
|
// Add an animation
|
|
let walk = skinViewer.animations.add(skinview3d.WalkingAnimation);
|
|
// Add another animation
|
|
let rotate = skinViewer.animations.add(skinview3d.RotatingAnimation);
|
|
// Remove an animation, stop walking dude
|
|
walk.remove();
|
|
// Remove the rotating animation, and make the player face forward
|
|
rotate.resetAndRemove();
|
|
// And run for now!
|
|
let run = skinViewer.animations.add(skinview3d.RunningAnimation);
|
|
|
|
// Set the speed of an animation
|
|
run.speed = 3;
|
|
// Pause single animation
|
|
run.paused = true;
|
|
// Pause all animations!
|
|
skinViewer.animations.paused = true;
|
|
</script>
|
|
```
|
|
|
|
## Anti-aliasing
|
|
skinview3d supports FXAA (fast approximate anti-aliasing).
|
|
To enable it, you need to replace `SkinViewer` with `FXAASkinViewer`.
|
|
|
|
Note that FXAA is incompatible with transparent backgrounds.
|
|
So when FXAA is enabled, the default background color will be white instead of transparent.
|
|
|
|
## 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" });
|
|
```
|
|
|
|
# Build
|
|
`npm run build`
|