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 98b51bf..a93f99f 100644 --- a/examples/index.html +++ b/examples/index.html @@ -128,11 +128,12 @@
-

Walk / Run

+

Walk / Run / Fly

+
@@ -182,6 +183,13 @@ +
+

Back Equipment

+
+ + +
+
@@ -261,11 +269,12 @@ const skinLayers = ["innerLayer", "outerLayer"]; const availableAnimations = { walk: skinview3d.WalkingAnimation, - run: skinview3d.RunningAnimation + run: skinview3d.RunningAnimation, + fly: skinview3d.FlyingAnimation }; let skinViewer; - let oribitControl; + let orbitControl; let rotateAnimation; let primaryAnimation; @@ -303,7 +312,13 @@ skinViewer.loadCustomCape(null); input.setCustomValidity(""); } else { - skinViewer.loadCustomCape(url); + const selectedBackEquipment = document.querySelector('input[type="radio"][name="back_equipment"]:checked'); + skinViewer.loadCustomCape(url, { backEquipment: selectedBackEquipment.value }) + .then(() => input.setCustomValidity("")) + .catch(e => { + input.setCustomValidity("Image can't be loaded."); + console.error(e); + }); } } @@ -343,9 +358,9 @@ primaryAnimation.speed = e.target.value; } }); - document.getElementById("control_rotate").addEventListener("change", e => oribitControl.enableRotate = e.target.checked); - document.getElementById("control_zoom").addEventListener("change", e => oribitControl.enableZoom = e.target.checked); - document.getElementById("control_pan").addEventListener("change", e => oribitControl.enablePan = e.target.checked); + document.getElementById("control_rotate").addEventListener("change", e => orbitControl.enableRotate = e.target.checked); + document.getElementById("control_zoom").addEventListener("change", e => orbitControl.enableZoom = e.target.checked); + document.getElementById("control_pan").addEventListener("change", e => orbitControl.enablePan = e.target.checked); for (const part of skinParts) { for (const layer of skinLayers) { document.querySelector(`#layers_table input[type="checkbox"][data-part="${part}"][data-layer="${layer}"]`) @@ -389,8 +404,21 @@ document.getElementById("skin_model").addEventListener("change", () => reloadSkin()); document.getElementById("ears_url").addEventListener("change", () => reloadEars()); 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(); initializeViewer(); }); } @@ -401,7 +429,7 @@ alpha: false }); skinViewer.renderer.setClearColor(0x5a76f3); - oribitControl = skinview3d.createOrbitControls(skinViewer); + orbitControl = skinview3d.createOrbitControls(skinViewer); rotateAnimation = null; primaryAnimation = null; @@ -417,9 +445,9 @@ primaryAnimation = skinViewer.animations.add(availableAnimations[primaryAnimationName]); primaryAnimation.speed = document.getElementById("primary_animation_speed").value; } - oribitControl.enableRotate = document.getElementById("control_rotate").checked; - oribitControl.enableZoom = document.getElementById("control_zoom").checked; - oribitControl.enablePan = document.getElementById("control_pan").checked; + orbitControl.enableRotate = document.getElementById("control_rotate").checked; + orbitControl.enableZoom = document.getElementById("control_zoom").checked; + orbitControl.enablePan = document.getElementById("control_pan").checked; for (const part of skinParts) { for (const layer of skinLayers) { skinViewer.playerObject.skin[part][layer].visible = diff --git a/examples/offscreen-render.html b/examples/offscreen-render.html index 8ede6be..dcc0636 100644 --- a/examples/offscreen-render.html +++ b/examples/offscreen-render.html @@ -12,7 +12,7 @@