To help you get started, we've collected the most common ways that skinview3d is being used within popular public projects.

bs-community / blessing-skin-server / resources / assets / src / components / Viewer.tsx View on Github

capeUrl: props.cape || '',
      detectModel: false,
    })
    viewer.camera.position.z = initPositionZ
    viewer.playerObject.skin.slim = props.isAlex

    const animation = new skinview3d.CompositeAnimation()
    stuffRef.current.handles = {
      walk: animation.add(skinview3d.WalkingAnimation),
      run: animation.add(skinview3d.RunningAnimation),
      rotate: animation.add(skinview3d.RotatingAnimation),
    }
    stuffRef.current.handles.run.paused = true
    // @ts-ignore
    viewer.animation = animation as skinview3d.Animation
    stuffRef.current.control = skinview3d.createOrbitControls(viewer)

    if (!stuffRef.current.firstRun) {
      const { handles } = stuffRef.current
      handles.walk.paused = true
      handles.run.paused = true
      handles.rotate.paused = true
      viewer.camera.position.z = 70
    }

    viewRef.current = viewer

    return () => {
      viewer.dispose()
      stuffRef.current.firstRun = false
    }
  }, [reset])

View more ways to use skinview3d

skinview3d

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

<canvas id="skin_container"></canvas>

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:

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)
• skin: Skin texture that contains the ear (e.g. deadmau5's skin)

Usage:

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

// 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. This font is available at assets/minecraft.woff2.

To load this font, please add the @font-face rule to your CSS:

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

Build

npm run build