• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

bs-community/skinview3d: Three.js powered Minecraft skin viewer.

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

bs-community/skinview3d

开源软件地址(OpenSource Url):

https://github.com/bs-community/skinview3d

开源编程语言(OpenSource Language):

TypeScript 98.7%

开源软件介绍(OpenSource Introduction):

skinview3d

CI Status NPM Package MIT License Gitter Chat

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

	// Rotate the player
	skinViewer.autoRotate = true;

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

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




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap