skinview3d Documentation

The PlayerAnimation class is an abstract base class used to control player movements and idle states. It manages animation properties like speed, paused, and progress.

To create a custom animation, you can either:

1. Extend PlayerAnimation: Implement the animate(player: PlayerObject, delta: number) method to define custom movement logic.
2. Use FunctionAnimation: A convenience class that allows you to create an animation by passing a simple function that receives the player and progress.

Animations are updated via the update(player: PlayerObject, deltaTime: number) method, which scales the deltaTime by the animation's speed and increments the progress.

// Using FunctionAnimation for a simple rotation
const rotationAnim = new FunctionAnimation((player, progress) => {
  player.rotation.y = progress;
});

A BodyPart is a THREE.Group that encapsulates two layers of a Minecraft model: the innerLayer and the outerLayer. This allows for the rendering of the standard Minecraft skin layers (the base skin and the decorative outer layer).

Note: The innerLayer and outerLayer may not be direct children of the BodyPart group itself, but they are accessible via these properties.

To use skinview3d, instantiate the SkinViewer class. You can provide an existing HTMLCanvasElement or let the library create a new one. You can also configure initial dimensions, skins, capes, and camera settings via the SkinViewerOptions object.

import { SkinViewer } from 'skinview3d';

const skinViewer = new SkinViewer({
  canvas: document.getElementById('my-canvas') as HTMLCanvasElement,
  width: 600,
  height: 400,
  skin: 'https://example.com/skin.png',
  model: 'slim'
});

You can display a name tag above the player. You can set it as a simple string or use a skinview3d.NameTagObject for custom styling.

Requirement: To display name tags correctly, you must include the Minecraft font in your CSS using @font-face.

/* Required for Name Tags */
@font-face {
	font-family: 'Minecraft';
	src: url('/path/to/minecraft.woff2') format('woff2');
}

// Name tag with text "hello"
skinViewer.nameTag = "hello";

// Specify the text color using NameTagObject
skinViewer.nameTag = new skinview3d.NameTagObject("hello", { textStyle: "yellow" });

// Unset the name tag
skinViewer.nameTag = null;

skinview3d supports two ear texture types: standalone (a separate 14x7 image) and skin (ears drawn directly on the skin texture). You can configure ears during initialization, when loading a skin, or by using specific load methods.

// Specify ears in the constructor
new skinview3d.SkinViewer({
	skin: "img/deadmau5.png",
	// Use ears drawn on the current skin
	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" });

You can apply animations to the SkinViewer by assigning an animation instance to the animation property. Supported animations include skinview3d.WalkingAnimation. You can control the playback speed and pause the animation via the animation object.

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

By default, the scene uses an ambient light (globalLight) and a point light from the camera (cameraLight). You can adjust their intensities to change the scene's appearance. To completely disable shadows, set globalLight.intensity to 3.0 and cameraLight.intensity to 0.0.

skinViewer.cameraLight.intensity = 0.6;
skinViewer.globalLight.intensity = 3;

// Disable shadows
skinViewer.globalLight.intensity = 3.0;
skinViewer.cameraLight.intensity = 0.0;

The CrouchAnimation class provides several configuration options to control how the crouching motion is rendered:

• showProgress: boolean = false: If true, the animation will show discrete progress steps. If false, it uses a continuous motion.
• runOnce: boolean = false: If true, the animation will clamp progress and run only once instead of looping.
• addHitAnimation(speed?: number): Enables a 'hit' animation effect to be layered on top of the crouch. The speed parameter controls the hit animation's speed (defaults to the CrouchAnimation.speed).

The WalkingAnimation class includes a headBobbing property that determines if the player's head shakes while walking.

• headBobbing: boolean = true (Default is true)

Set this to false to keep the head stationary during the walking animation.

const walk = new skinview3d.WalkingAnimation();
walk.headBobbing = false;

Use loadSkin() to apply a skin texture to the player. You can pass a URL, a RemoteImage, or a TextureSource.

Options:

• model: `