From 3758035bf8441fe0e4558d91935fa07546cd450d Mon Sep 17 00:00:00 2001
From: Haowei Wen <yushijinhun@gmail.com>
Date: Sun, 9 Jan 2022 05:00:15 +0800
Subject: [PATCH] support ears (thanks @james090500), close #85

---
 README.md                 |  30 +++++++++++++
 examples/img/deadmau5.png | Bin 0 -> 3565 bytes
 examples/img/ears.png     | Bin 0 -> 233 bytes
 examples/index.html       |  74 +++++++++++++++++++++++++++++-
 package-lock.json         |  14 +++---
 package.json              |   2 +-
 src/model.ts              |  37 ++++++++++++++-
 src/viewer.ts             |  92 ++++++++++++++++++++++++++++++++++++--
 8 files changed, 236 insertions(+), 13 deletions(-)
 create mode 100644 examples/img/deadmau5.png
 create mode 100644 examples/img/ears.png

diff --git a/README.md b/README.md
index bc37d80..5624cf2 100644
--- a/README.md
+++ b/README.md
@@ -12,6 +12,7 @@ Three.js powered Minecraft skin viewer.
 * 1.8 Skins
 * HD Skins
 * Capes
+* Ears
 * Elytras
 * Slim Arms
   * Automatic model detection (Slim / Default)
@@ -104,5 +105,34 @@ 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](https://github.com/bs-community/skinview3d/blob/master/examples/img/ears.png))
+* `skin`: Skin texture that contains the ear (e.g. [deadmau5's skin](https://minecraft.fandom.com/wiki/Easter_eggs#Deadmau5.27s_ears))
+
+Usage:
+```js
+// 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" });
+```
+
 # Build
 `npm run build`
diff --git a/examples/img/deadmau5.png b/examples/img/deadmau5.png
new file mode 100644
index 0000000000000000000000000000000000000000..005cc1abf177765f63a5b0538e28c0a45e918101
GIT binary patch
literal 3565
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

literal 0
HcmV?d00001

diff --git a/examples/img/ears.png b/examples/img/ears.png
new file mode 100644
index 0000000000000000000000000000000000000000..10c101f660d60bc27d40d203d837462fce6f575a
GIT binary patch
literal 233
zcmeAS@N?(olHy`uVBq!ia0vp^d_c_3!3HEP+-oF(ltQvckS_y6l_~>6Lo)-z&;LOB
zB?CjL0RzLU1O^7H84L{K`IF+0x&hU47I;J!1I;)9!i-thIyr%Yk|nMYCBgY=CFO}l
zsSE{)nRz98d8s7|CVB>XhDOdT*>8Y~ygXeTLo|YufBgS%@BDV=n*R!O_S$jzBtKT(
z>{#_+R)R#Vu~pm2#W&h|3Of%!IUrT&`RH=bWjBFis_a6^4Tc*$A5A{YA@iu<T0O&d
Xhkt5zk*4Q>rZRZC`njxgN@xNA`;toK

literal 0
HcmV?d00001

diff --git a/examples/index.html b/examples/index.html
index cb12ab0..4a87c8f 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -215,6 +215,7 @@
 						<option value="img/hatsune_miku.png">
 						<option value="img/ironman_hd.png">
 						<option value="img/sethbling.png">
+						<option value="img/deadmau5.png">
 					</datalist>
 					<input id="skin_url_upload" type="file" class="hidden" accept="image/*">
 					<button id="skin_url_unset" type="button" class="control hidden">Unset</button>
@@ -250,6 +251,32 @@
 			</div>
 		</div>
 
+		<div class="control-section">
+			<h1>Ears</h1>
+			<div>
+				<label class="control">Source:
+					<select id="ears_source">
+						<option value="none">None</option>
+						<option value="current_skin">Current skin</option>
+						<option value="skin">Skin texture</option>
+						<option value="standalone">Standalone texture</option>
+					</select>
+				</label>
+			</div>
+			<div id="ears_texture_input">
+				<label class="control">URL: <input id="ears_url" type="text" value="" placeholder="none" list="default_ears" size="20"></label>
+				<datalist id="default_ears">
+					<option value="">
+					<option value="img/ears.png" data-texture-type="standalone">
+					<option value="img/deadmau5.png" data-texture-type="skin">
+				</datalist>
+				<input id="ears_url_upload" type="file" class="hidden" accept="image/*">
+				<button id="ears_url_unset" type="button" class="control hidden">Unset</button>
+				<button type="button" class="control"
+					onclick="document.getElementById('ears_url_upload').click();">Browse...</button>
+			</div>
+		</div>
+
 		<div class="control-section">
 			<h1>Panorama</h1>
 			<div class="control">
@@ -329,7 +356,8 @@
 				input.setCustomValidity("");
 			} else {
 				skinViewer.loadSkin(url, {
-					model: document.getElementById("skin_model").value
+					model: document.getElementById("skin_model").value,
+					ears: document.getElementById("ears_source").value === "current_skin"
 				})
 					.then(() => input.setCustomValidity(""))
 					.catch(e => {
@@ -356,6 +384,46 @@
 			}
 		}
 
+		function reloadEars(skipSkinReload = false) {
+			const sourceType = document.getElementById("ears_source").value;
+			let hideInput = true;
+			if (sourceType === "none") {
+				skinViewer.loadEars(null);
+			} else if (sourceType === "current_skin") {
+				if (!skipSkinReload){
+					reloadSkin();
+				}
+			} else {
+				hideInput = false;
+				document.querySelectorAll("#default_ears option[data-texture-type]").forEach(opt => {
+					opt.disabled = opt.dataset.textureType !== sourceType;
+				});
+
+				const input = document.getElementById("ears_url");
+				const url = obtainTextureUrl("ears_url");
+				if (url === "") {
+					skinViewer.loadEars(null);
+					input.setCustomValidity("");
+				} else {
+					skinViewer.loadEars(url, { textureType: sourceType })
+						.then(() => input.setCustomValidity(""))
+						.catch(e => {
+							input.setCustomValidity("Image can't be loaded.");
+							console.error(e);
+						});
+				}
+			}
+
+			const el = document.getElementById("ears_texture_input");
+			if (hideInput) {
+				if (!(el.classList.contains("hidden"))){
+					el.classList.add("hidden");
+				}
+			} else {
+				el.classList.remove("hidden");
+			}
+		}
+
 		function reloadPanorama() {
 			const input = document.getElementById("panorama_url");
 			const url = obtainTextureUrl("panorama_url");
@@ -442,11 +510,14 @@
 			};
 			initializeUploadButton("skin_url", reloadSkin);
 			initializeUploadButton("cape_url", reloadCape);
+			initializeUploadButton("ears_url", reloadEars);
 			initializeUploadButton("panorama_url", reloadPanorama);
 
 			document.getElementById("skin_url").addEventListener("change", () => reloadSkin());
 			document.getElementById("skin_model").addEventListener("change", () => reloadSkin());
 			document.getElementById("cape_url").addEventListener("change", () => reloadCape());
+			document.getElementById("ears_source").addEventListener("change", () => reloadEars());
+			document.getElementById("ears_url").addEventListener("change", () => reloadEars());
 			document.getElementById("panorama_url").addEventListener("change", () => reloadPanorama());
 
 			for (const el of document.querySelectorAll('input[type="radio"][name="back_equipment"]')) {
@@ -502,6 +573,7 @@
 			}
 			reloadSkin();
 			reloadCape();
+			reloadEars(true);
 			reloadPanorama();
 		}
 
diff --git a/package-lock.json b/package-lock.json
index 1f8e5d5..c5751f2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,7 @@
 			"license": "MIT",
 			"dependencies": {
 				"@types/three": "^0.136.1",
-				"skinview-utils": "^0.6.2",
+				"skinview-utils": "^0.7.0",
 				"three": "^0.136.0"
 			},
 			"devDependencies": {
@@ -3647,9 +3647,9 @@
 			"dev": true
 		},
 		"node_modules/skinview-utils": {
-			"version": "0.6.2",
-			"resolved": "https://registry.npmjs.org/skinview-utils/-/skinview-utils-0.6.2.tgz",
-			"integrity": "sha512-UdjWwXCVZobtG+dc7ilvMRbtXYSqPJtWKPFdgWc44Gs4aoOmZML2lErr77h7uussXo9zrcR+fPizGshGpdETvQ==",
+			"version": "0.7.0",
+			"resolved": "https://registry.npmjs.org/skinview-utils/-/skinview-utils-0.7.0.tgz",
+			"integrity": "sha512-ecbbUp0AuvZX5fCIOOwbNPxr/JIbrAGhCcdLcww0Ov9PbvAbeYjNDSIu1ebCJBe4CWc6ZYYn8MFNp68DDta0iQ==",
 			"dependencies": {
 				"@types/offscreencanvas": "^2019.6.4"
 			}
@@ -7038,9 +7038,9 @@
 			"dev": true
 		},
 		"skinview-utils": {
-			"version": "0.6.2",
-			"resolved": "https://registry.npmjs.org/skinview-utils/-/skinview-utils-0.6.2.tgz",
-			"integrity": "sha512-UdjWwXCVZobtG+dc7ilvMRbtXYSqPJtWKPFdgWc44Gs4aoOmZML2lErr77h7uussXo9zrcR+fPizGshGpdETvQ==",
+			"version": "0.7.0",
+			"resolved": "https://registry.npmjs.org/skinview-utils/-/skinview-utils-0.7.0.tgz",
+			"integrity": "sha512-ecbbUp0AuvZX5fCIOOwbNPxr/JIbrAGhCcdLcww0Ov9PbvAbeYjNDSIu1ebCJBe4CWc6ZYYn8MFNp68DDta0iQ==",
 			"requires": {
 				"@types/offscreencanvas": "^2019.6.4"
 			}
diff --git a/package.json b/package.json
index 673da62..a5a023e 100644
--- a/package.json
+++ b/package.json
@@ -39,7 +39,7 @@
 	],
 	"dependencies": {
 		"@types/three": "^0.136.1",
-		"skinview-utils": "^0.6.2",
+		"skinview-utils": "^0.7.0",
 		"three": "^0.136.0"
 	},
 	"devDependencies": {
diff --git a/src/model.ts b/src/model.ts
index 84fa735..f09666a 100644
--- a/src/model.ts
+++ b/src/model.ts
@@ -332,6 +332,33 @@ export class ElytraObject extends Group {
 	}
 }
 
+export class EarsObject extends Group {
+
+	readonly rightEar: Mesh;
+	readonly leftEar: Mesh;
+
+	constructor(texture: Texture) {
+		super();
+
+		const material = new MeshStandardMaterial({
+			map: texture,
+			side: FrontSide
+		});
+		const earBox = new BoxGeometry(8, 8, 4 / 3);
+		setUVs(earBox, 0, 0, 6, 6, 1, 14, 7);
+
+		this.rightEar = new Mesh(earBox, material);
+		this.rightEar.name = "rightEar";
+		this.rightEar.position.x = -6;
+		this.add(this.rightEar);
+
+		this.leftEar = new Mesh(earBox, material);
+		this.leftEar.name = "leftEar";
+		this.leftEar.position.x = 6;
+		this.add(this.leftEar);
+	}
+}
+
 export type BackEquipment = "cape" | "elytra";
 
 export class PlayerObject extends Group {
@@ -339,8 +366,9 @@ export class PlayerObject extends Group {
 	readonly skin: SkinObject;
 	readonly cape: CapeObject;
 	readonly elytra: ElytraObject;
+	readonly ears: EarsObject;
 
-	constructor(skinTexture: Texture, capeTexture: Texture) {
+	constructor(skinTexture: Texture, capeTexture: Texture, earsTexture: Texture) {
 		super();
 
 		this.skin = new SkinObject(skinTexture);
@@ -362,6 +390,13 @@ export class PlayerObject extends Group {
 		this.elytra.position.z = -2;
 		this.elytra.visible = false;
 		this.add(this.elytra);
+
+		this.ears = new EarsObject(earsTexture);
+		this.ears.name = "ears";
+		this.ears.position.y = 10;
+		this.ears.position.z = 2 / 3;
+		this.ears.visible = false;
+		this.skin.head.add(this.ears);
 	}
 
 	get backEquipment(): BackEquipment | null {
diff --git a/src/viewer.ts b/src/viewer.ts
index 46b9578..fe0e2e0 100644
--- a/src/viewer.ts
+++ b/src/viewer.ts
@@ -1,4 +1,4 @@
-import { inferModelType, isTextureSource, loadCapeToCanvas, loadImage, loadSkinToCanvas, ModelType, RemoteImage, TextureSource } from "skinview-utils";
+import { inferModelType, isTextureSource, loadCapeToCanvas, loadEarsToCanvas, loadEarsToCanvasFromSkin, loadImage, loadSkinToCanvas, ModelType, RemoteImage, TextureSource } from "skinview-utils";
 import { Color, ColorRepresentation, PointLight, EquirectangularReflectionMapping, Group, NearestFilter, PerspectiveCamera, Scene, Texture, Vector2, WebGLRenderer, AmbientLight, Mapping } from "three";
 import { RootAnimation } from "./animation.js";
 import { BackEquipment, PlayerObject } from "./model.js";
@@ -15,6 +15,14 @@ export interface SkinLoadOptions extends LoadOptions {
 	 * The model type of skin. Default is "auto-detect".
 	 */
 	model?: ModelType | "auto-detect";
+
+	/**
+	 * true: Loads the ears drawn on the skin texture, and show it.
+	 * "load-only": Loads the ears drawn on the skin texture, but do not make it visible.
+	 * false: Do not load ears from the skin texture.
+	 * Default is false.
+	 */
+	ears?: boolean | "load-only";
 }
 
 export interface CapeLoadOptions extends LoadOptions {
@@ -25,6 +33,15 @@ export interface CapeLoadOptions extends LoadOptions {
 	backEquipment?: BackEquipment;
 }
 
+export interface EarsLoadOptions extends LoadOptions {
+	/**
+	 * "standalone": The texture is a 14x7 image that only contains the ears;
+	 * "skin": The texture is a skin that contains ears, and we only show its ear part.
+	 * Default is "standalone".
+	 */
+	textureType?: "standalone" | "skin";
+}
+
 export interface SkinViewerOptions {
 	width?: number;
 	height?: number;
@@ -32,6 +49,17 @@ export interface SkinViewerOptions {
 	model?: ModelType | "auto-detect";
 	cape?: RemoteImage | TextureSource;
 
+	/**
+	 * If you want to show the ears drawn on the current skin, set this to "current-skin".
+	 * To show ears that come from a separate texture, you have to specify 'textureType' ("standalone" or "skin") and 'source'.
+	 * "standalone" means the provided texture is a 14x7 image that only contains the ears.
+	 * "skin" means the provided texture is a skin that contains ears, and we only show its ear part.
+	 */
+	ears?: "current-skin" | {
+		textureType: "standalone" | "skin",
+		source: RemoteImage | TextureSource
+	}
+
 	/**
 	 * Whether the canvas contains an alpha buffer. Default is true.
 	 * This option can be turned off if you use an opaque background.
@@ -92,8 +120,10 @@ export class SkinViewer {
 
 	readonly skinCanvas: HTMLCanvasElement;
 	readonly capeCanvas: HTMLCanvasElement;
+	readonly earsCanvas: HTMLCanvasElement;
 	private readonly skinTexture: Texture;
 	private readonly capeTexture: Texture;
+	private readonly earsTexture: Texture;
 	private backgroundTexture: Texture | null = null;
 
 	private _disposed: boolean = false;
@@ -118,6 +148,11 @@ export class SkinViewer {
 		this.capeTexture.magFilter = NearestFilter;
 		this.capeTexture.minFilter = NearestFilter;
 
+		this.earsCanvas = document.createElement("canvas");
+		this.earsTexture = new Texture(this.earsCanvas);
+		this.earsTexture.magFilter = NearestFilter;
+		this.earsTexture.minFilter = NearestFilter;
+
 		this.scene = new Scene();
 
 		this.camera = new PerspectiveCamera();
@@ -133,7 +168,7 @@ export class SkinViewer {
 		});
 		this.renderer.setPixelRatio(window.devicePixelRatio);
 
-		this.playerObject = new PlayerObject(this.skinTexture, this.capeTexture);
+		this.playerObject = new PlayerObject(this.skinTexture, this.capeTexture, this.earsTexture);
 		this.playerObject.name = "player";
 		this.playerObject.skin.visible = false;
 		this.playerObject.cape.visible = false;
@@ -143,12 +178,18 @@ export class SkinViewer {
 
 		if (options.skin !== undefined) {
 			this.loadSkin(options.skin, {
-				model: options.model
+				model: options.model,
+				ears: options.ears === "current-skin"
 			});
 		}
 		if (options.cape !== undefined) {
 			this.loadCape(options.cape);
 		}
+		if (options.ears !== undefined && options.ears !== "current-skin") {
+			this.loadEars(options.ears.source, {
+				textureType: options.ears.textureType
+			});
+		}
 		if (options.width !== undefined) {
 			this.width = options.width;
 		}
@@ -217,6 +258,14 @@ export class SkinViewer {
 				this.playerObject.skin.visible = true;
 			}
 
+			if (options.ears === true || options.ears == "load-only") {
+				loadEarsToCanvasFromSkin(this.earsCanvas, source);
+				this.earsTexture.needsUpdate = true;
+				if (options.ears === true) {
+					this.playerObject.ears.visible = true;
+				}
+			}
+
 		} else {
 			return loadImage(source).then(image => this.loadSkin(image, options));
 		}
@@ -238,12 +287,15 @@ export class SkinViewer {
 	): void | Promise<void> {
 		if (source === null) {
 			this.resetCape();
+
 		} else if (isTextureSource(source)) {
 			loadCapeToCanvas(this.capeCanvas, source);
 			this.capeTexture.needsUpdate = true;
+
 			if (options.makeVisible !== false) {
 				this.playerObject.backEquipment = options.backEquipment === undefined ? "cape" : options.backEquipment;
 			}
+
 		} else {
 			return loadImage(source).then(image => this.loadCape(image, options));
 		}
@@ -253,6 +305,40 @@ export class SkinViewer {
 		this.playerObject.backEquipment = null;
 	}
 
+	loadEars(empty: null): void;
+	loadEars<S extends TextureSource | RemoteImage>(
+		source: S,
+		options?: EarsLoadOptions
+	): S extends TextureSource ? void : Promise<void>;
+
+	loadEars(
+		source: TextureSource | RemoteImage | null,
+		options: EarsLoadOptions = {}
+	): void | Promise<void> {
+		if (source === null) {
+			this.resetEars();
+
+		} else if (isTextureSource(source)) {
+			if (options.textureType === "skin") {
+				loadEarsToCanvasFromSkin(this.earsCanvas, source);
+			} else {
+				loadEarsToCanvas(this.earsCanvas, source);
+			}
+			this.earsTexture.needsUpdate = true;
+
+			if (options.makeVisible !== false) {
+				this.playerObject.ears.visible = true;
+			}
+
+		} else {
+			return loadImage(source).then(image => this.loadEars(image, options));
+		}
+	}
+
+	resetEars(): void {
+		this.playerObject.ears.visible = false;
+	}
+
 	loadPanorama<S extends TextureSource | RemoteImage>(
 		source: S
 	): S extends TextureSource ? void : Promise<void> {