From 61572b6824f9d42f3411cb3f12b955e8fe38fe22 Mon Sep 17 00:00:00 2001 From: yushijinhun Date: Sat, 22 Sep 2018 23:37:23 +0800 Subject: [PATCH 1/4] Add elytra model --- src/model.ts | 63 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 63 insertions(+) diff --git a/src/model.ts b/src/model.ts index 003de44..9f52a09 100644 --- a/src/model.ts +++ b/src/model.ts @@ -287,10 +287,67 @@ export class CapeObject extends Group { } } +export class ElytraObject extends Group { + + readonly leftWing: Group; + readonly rightWing: Group; + + constructor(texture: Texture) { + super(); + + const elytraMaterial = new MeshBasicMaterial({ + map: texture, + side: DoubleSide, + transparent: true, + alphaTest: 1e-5 + }); + + const leftWingBox = new BoxGeometry(12, 22, 4); + setCapeUVs(leftWingBox, 22, 0, 10, 20, 2); + const leftWingMesh = new Mesh(leftWingBox, elytraMaterial); + leftWingMesh.position.x = -5; + leftWingMesh.position.y = -10; + leftWingMesh.position.z = -1; + this.leftWing = new Group(); + this.leftWing.add(leftWingMesh); + this.add(this.leftWing); + + const rightWingBox = new BoxGeometry(12, 22, 4); + setCapeUVs(rightWingBox, 22, 0, 10, 20, 2); + const rightWingMesh = new Mesh(rightWingBox, elytraMaterial); + rightWingMesh.scale.x = -1; + rightWingMesh.position.x = 5; + rightWingMesh.position.y = -10; + rightWingMesh.position.z = -1; + this.rightWing = new Group(); + this.rightWing.add(rightWingMesh); + this.add(this.rightWing); + + this.leftWing.position.x = 5; + this.leftWing.rotation.x = .2617994; + this.leftWing.rotation.y = .01; // to avoid z-fighting + this.leftWing.rotation.z = .2617994; + this.updateRightWing(); + } + + /** + * Mirrors the position & rotation of left wing, + * and apply them to the right wing. + */ + updateRightWing(): void { + this.rightWing.position.x = -this.leftWing.position.x; + this.rightWing.position.y = this.leftWing.position.y; + this.rightWing.rotation.x = this.leftWing.rotation.x; + this.rightWing.rotation.y = -this.leftWing.rotation.y; + this.rightWing.rotation.z = -this.leftWing.rotation.z; + } +} + export class PlayerObject extends Group { readonly skin: SkinObject; readonly cape: CapeObject; + readonly elytra: ElytraObject; constructor(skinTexture: Texture, capeTexture: Texture) { super(); @@ -305,5 +362,11 @@ export class PlayerObject extends Group { this.cape.rotation.x = 10.8 * Math.PI / 180; this.cape.rotation.y = Math.PI; this.add(this.cape); + + this.elytra = new ElytraObject(capeTexture); + this.elytra.name = "elytra"; + this.elytra.position.z = -2; + this.elytra.visible = false; + this.add(this.elytra); } } From 61aa9753af614ae65ad9b58528a28e6b180e3b69 Mon Sep 17 00:00:00 2001 From: Haowei Wen Date: Sat, 10 Oct 2020 10:22:17 +0800 Subject: [PATCH 2/4] Add PlayerObject.backEquipment property --- README.md | 6 +++++- examples/index.html | 22 +++++++++++++++++++++- examples/offscreen-render.html | 14 +++++++++----- src/model.ts | 17 +++++++++++++++++ src/viewer.ts | 31 ++++++++++++++++--------------- 5 files changed, 68 insertions(+), 22 deletions(-) diff --git a/README.md b/README.md index 09176db..a467084 100644 --- a/README.md +++ b/README.md @@ -12,6 +12,7 @@ Three.js powered Minecraft skin viewer. * 1.8 Skins * HD Skins * Capes +* Elytras * Slim Arms * Automatic model detection (Slim / Default) @@ -37,7 +38,10 @@ Three.js powered Minecraft skin viewer. // Load a cape skinViewer.loadCape("img/cape.png"); - // Unload(hide) the cape + // Load a elytra (from a cape texture) + skinViewer.loadCape("img/cape.png", { backEquipment: "elytra" }); + + // Unload(hide) the cape / elytra skinViewer.loadCape(null); // Control objects with your mouse! diff --git a/examples/index.html b/examples/index.html index dcd8b41..0e0e12e 100644 --- a/examples/index.html +++ b/examples/index.html @@ -182,6 +182,13 @@ +
+

Back Equipment

+
+ + +
+
@@ -284,7 +291,8 @@ skinViewer.loadCape(null); input.setCustomValidity(""); } else { - skinViewer.loadCape(url) + const selectedBackEquipment = document.querySelector('input[type="radio"][name="back_equipment"]:checked'); + skinViewer.loadCape(url, { backEquipment: selectedBackEquipment.value }) .then(() => input.setCustomValidity("")) .catch(e => { input.setCustomValidity("Image can't be loaded."); @@ -363,6 +371,18 @@ document.getElementById("skin_url").addEventListener("change", () => reloadSkin()); document.getElementById("skin_model").addEventListener("change", () => reloadSkin()); document.getElementById("cape_url").addEventListener("change", () => reloadCape()); + + for (const el of document.querySelectorAll('input[type="radio"][name="back_equipment"]')) { + el.addEventListener("change", e => { + if (skinViewer.playerObject.backEquipment === null) { + // cape texture hasn't been loaded yet + // this option will be processed on texture loading + } else { + skinViewer.playerObject.backEquipment = e.target.value; + } + }); + } + document.getElementById("reset_all").addEventListener("click", () => { skinViewer.dispose(); orbitControl.dispose(); diff --git a/examples/offscreen-render.html b/examples/offscreen-render.html index 5ebbfb2..662c209 100644 --- a/examples/offscreen-render.html +++ b/examples/offscreen-render.html @@ -12,7 +12,7 @@