https://github.com/bs-community/skinview3d/ Modified version of SkinView3D to remove unnecessary things and make it work on PS3D skins.
Go to file
Haowei Wen 5dca37f0b4
2.0.1
2021-05-18 22:47:15 +08:00
.github/workflows gh-pages: fix build 2020-09-10 01:43:49 +08:00
examples Add FlyingAnimation 2020-10-10 17:32:54 +08:00
src add 'model' param to SkinViewerOptions (#84) 2021-05-18 22:17:10 +08:00
.editorconfig Working transpiling via "npm run buildtest" command 2018-07-20 22:07:52 -05:00
.eslintrc.yaml Refactor SkinViewer 2020-05-29 15:45:09 +08:00
.gitignore deploy to gh-pages 2020-08-17 22:17:21 +08:00
LICENSE change license year to 2021 2021-02-18 04:09:35 +08:00
README.md Add PlayerObject.backEquipment property 2020-10-10 10:26:58 +08:00
package-lock.json 2.0.1 2021-05-18 22:47:15 +08:00
package.json 2.0.1 2021-05-18 22:47:15 +08:00
rollup.config.js use three-minifier 2020-01-31 08:43:46 +08:00
tsconfig.json change target to es2017 2020-06-14 16:19:42 +08:00

README.md

skinview3d

CI Status NPM Package MIT License Gitter Chat

Three.js powered Minecraft skin viewer.

Features

  • 1.8 Skins
  • HD Skins
  • Capes
  • Elytras
  • Slim Arms
    • Automatic model detection (Slim / Default)

Usage

Example of using skinview3d

<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 a elytra (from a cape texture)
	skinViewer.loadCape("img/cape.png", { backEquipment: "elytra" });

	// Unload(hide) the cape / elytra
	skinViewer.loadCape(null);

	// 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.

It's recommended to use an opaque background when FXAA is enabled, as transparent background may look buggy.

let skinViewer = new skinview3d.FXAASkinViewer({
	// we do not use transparent background, so disable alpha to improve performance
	alpha: false,
	...
});
// set the background color
skinViewer.renderer.setClearColor(0x5a76f3);

Build

npm run build