https://github.com/haplifeman/skinview3d
https://github.com/haplifeman/skinview3d
Last synced: 7 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/haplifeman/skinview3d
- Owner: HapLifeMan
- License: mit
- Created: 2024-01-04T22:06:04.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2024-01-04T22:47:10.000Z (over 2 years ago)
- Last Synced: 2024-12-31T04:04:08.623Z (over 1 year ago)
- Language: TypeScript
- Size: 13.3 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
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://bs-community.github.io/skinview3d/)
```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`