How to Get Started

Skin3D is a standalone 3D Minecraft skin viewer and editor. Follow these steps to set up and use the API in your own project.

1. Install skin3d

npm install skin3d

Or use a CDN:

<script type="module" src="https://unpkg.com/skin3d@latest/dist/skin3d.min.js"></script>

2. Basic Usage Example

// ES Modules / Browser (with <script type="module"> or bundler)
import { SkinViewer } from "skin3d";

const viewer = new SkinViewer({
   canvas: document.getElementById("skin_container"),
   width: 300,
   height: 400,
   skin: "path-to-your-skin/your-skin.png"
});

// Optional: Add controls
viewer.controls.enableRotate = true;
viewer.controls.enableZoom = true;
viewer.controls.enablePan = false;
						

2b. Using in Node.js or with <script> tag

If you are not using ES modules (for example, in a Node.js app or with a plain <script> tag), you can access SkinViewer from the global window object after including the script:

<script src="https://unpkg.com/skin3d@latest/dist/skin3d.min.js"></script>
<script>
   const viewer = new window.SkinViewer({
      canvas: document.getElementById("skin_container"),
      width: 300,
      height: 400,
      skin: "path-to-your-skin/your-skin.png"
   });
</script>
						

For Node.js, you can require the package after installing:

const { SkinViewer } = require("skin3d");
const viewer = new SkinViewer({
   // options here
});
						

3. Loading Capes and Elytras

// Set a cape
viewer.loadCape("img/mojang_cape.png");

// Set an elytra
viewer.loadElytra("img/elytra.png");
						

4. Animations

import { WalkingAnimation } from "skinview3d";
const walk = viewer.animations.add(WalkingAnimation);

// Change speed
walk.speed = 1.2;

// Pause or resume
walk.paused = false;
						

5. More Features

• Change background: viewer.setBackground("#c2b4ff");
• Change FOV: viewer.fov = 70;
• Show/hide layers: viewer.playerObject.skin.visible = false;

See the documentation for more advanced usage and API details.