Nihilist Postmodern Mistake

    skinview3d
    TypeScript icon, indicating that this package has built-in type declarations

    2.2.0 • Public • Published

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

    Note that FXAA is incompatible with transparent backgrounds. So when FXAA is enabled, the default background color will be white instead of transparent.

    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.

    Build

    npm run build

    Keywords

    none

    Install

    npm i skinview3d

    DownloadsWeekly Downloads

    430

    Version

    2.2.0

    License

    MIT

    Unpacked Size

    1.37 MB

    Total Files

    23

    Last publish

    Collaborators

    • yushijinhun
    • gplane
    • printempw