From c8ddc277eb2f4d6d926396e1f18efb621d45df0f Mon Sep 17 00:00:00 2001 From: Haowei Wen Date: Mon, 14 Sep 2020 16:48:51 +0800 Subject: [PATCH 01/21] examples: dispose OrbitControls --- examples/index.html | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/examples/index.html b/examples/index.html index 2244ad6..dcd8b41 100644 --- a/examples/index.html +++ b/examples/index.html @@ -257,7 +257,7 @@ }; let skinViewer; - let oribitControl; + let orbitControl; let rotateAnimation; let primaryAnimation; @@ -329,9 +329,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}"]`) @@ -365,6 +365,7 @@ document.getElementById("cape_url").addEventListener("change", () => reloadCape()); document.getElementById("reset_all").addEventListener("click", () => { skinViewer.dispose(); + orbitControl.dispose(); initializeViewer(); }); } @@ -375,7 +376,7 @@ alpha: false }); skinViewer.renderer.setClearColor(0x5a76f3); - oribitControl = skinview3d.createOrbitControls(skinViewer); + orbitControl = skinview3d.createOrbitControls(skinViewer); rotateAnimation = null; primaryAnimation = null; @@ -391,9 +392,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 = From 798a111adee0ae35e29f4508437c4e9aa12150e8 Mon Sep 17 00:00:00 2001 From: Haowei Wen Date: Wed, 16 Sep 2020 22:34:22 +0800 Subject: [PATCH 02/21] fix memory leak see also https://github.com/mrdoob/three.js/issues/20346 --- src/fxaa.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/fxaa.ts b/src/fxaa.ts index 30fc2c0..24d461f 100644 --- a/src/fxaa.ts +++ b/src/fxaa.ts @@ -1,4 +1,5 @@ import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js"; +import { Pass } from "three/examples/jsm/postprocessing/Pass.js"; import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass.js"; import { ShaderPass } from "three/examples/jsm/postprocessing/ShaderPass.js"; import { FXAAShader } from "three/examples/jsm/shaders/FXAAShader.js"; @@ -42,4 +43,9 @@ export class FXAASkinViewer extends SkinViewer { render(): void { this.composer.render(); } + + dispose(): void { + super.dispose(); + (this.fxaaPass.fsQuad as Pass.FullScreenQuad).dispose(); + } } From a5a70d13c714e859df1e5393ba83b6fff0e744e8 Mon Sep 17 00:00:00 2001 From: Haowei Wen Date: Wed, 16 Sep 2020 22:39:42 +0800 Subject: [PATCH 03/21] change LoadOptions & SkinViewerOptions to interface --- src/fxaa.ts | 2 +- src/viewer.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/fxaa.ts b/src/fxaa.ts index 24d461f..8c693cb 100644 --- a/src/fxaa.ts +++ b/src/fxaa.ts @@ -15,7 +15,7 @@ export class FXAASkinViewer extends SkinViewer { * Note: FXAA doesn't work well with transparent backgrounds. * It's recommended to use an opaque background and set `options.alpha` to false. */ - constructor(options: SkinViewerOptions = {}) { + constructor(options?: SkinViewerOptions) { super(options); this.composer = new EffectComposer(this.renderer); this.renderPass = new RenderPass(this.scene, this.camera); diff --git a/src/viewer.ts b/src/viewer.ts index 2595050..7fb353d 100644 --- a/src/viewer.ts +++ b/src/viewer.ts @@ -3,14 +3,14 @@ import { NearestFilter, PerspectiveCamera, Scene, Texture, Vector2, WebGLRendere import { RootAnimation } from "./animation.js"; import { PlayerObject } from "./model.js"; -export type LoadOptions = { +export interface LoadOptions { /** * Whether to make the object visible after the texture is loaded. Default is true. */ makeVisible?: boolean; } -export type SkinViewerOptions = { +export interface SkinViewerOptions { width?: number; height?: number; skin?: RemoteImage | TextureSource; From eff80c1f02d3c4265a50266a721e3aeb62ba64a8 Mon Sep 17 00:00:00 2001 From: Haowei Wen Date: Sat, 3 Oct 2020 20:42:22 +0800 Subject: [PATCH 04/21] fix skin layer2 has wrong size --- src/model.ts | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/model.ts b/src/model.ts index 7a0992b..19afe52 100644 --- a/src/model.ts +++ b/src/model.ts @@ -126,7 +126,7 @@ export class SkinObject extends Group { ); const bodyMesh = new Mesh(bodyBox, layer1Material); - const body2Box = new BoxGeometry(9, 13.5, 4.5); + const body2Box = new BoxGeometry(8.5, 12.5, 4.5); setVertices(body2Box, toSkinVertices(20, 32, 28, 36), toSkinVertices(28, 32, 36, 36), @@ -177,8 +177,8 @@ export class SkinObject extends Group { const rightArm2Mesh = new Mesh(rightArm2Box, layer2MaterialBiased); rightArm2Mesh.renderOrder = 1; this.modelListeners.push(() => { - rightArm2Mesh.scale.x = this.slim ? 3.375 : 4.5; - rightArm2Mesh.scale.y = 13.5; + rightArm2Mesh.scale.x = this.slim ? 3.5 : 4.5; + rightArm2Mesh.scale.y = 12.5; rightArm2Mesh.scale.z = 4.5; if (this.slim) { setVertices(rightArm2Box, @@ -250,8 +250,8 @@ export class SkinObject extends Group { const leftArm2Mesh = new Mesh(leftArm2Box, layer2MaterialBiased); leftArm2Mesh.renderOrder = 1; this.modelListeners.push(() => { - leftArm2Mesh.scale.x = this.slim ? 3.375 : 4.5; - leftArm2Mesh.scale.y = 13.5; + leftArm2Mesh.scale.x = this.slim ? 3.5 : 4.5; + leftArm2Mesh.scale.y = 12.5; leftArm2Mesh.scale.z = 4.5; if (this.slim) { setVertices(leftArm2Box, @@ -301,7 +301,7 @@ export class SkinObject extends Group { ); const rightLegMesh = new Mesh(rightLegBox, layer1MaterialBiased); - const rightLeg2Box = new BoxGeometry(4.5, 13.5, 4.5); + const rightLeg2Box = new BoxGeometry(4.5, 12.5, 4.5); setVertices(rightLeg2Box, toSkinVertices(4, 32, 8, 36), toSkinVertices(8, 32, 12, 36), @@ -336,7 +336,7 @@ export class SkinObject extends Group { ); const leftLegMesh = new Mesh(leftLegBox, layer1MaterialBiased); - const leftLeg2Box = new BoxGeometry(4.5, 13.5, 4.5); + const leftLeg2Box = new BoxGeometry(4.5, 12.5, 4.5); setVertices(leftLeg2Box, toSkinVertices(4, 48, 8, 52), toSkinVertices(8, 48, 12, 52), From a579f7bf26822f9fcb3fda6b4f84839210ff864d Mon Sep 17 00:00:00 2001 From: Haowei Wen Date: Sat, 3 Oct 2020 22:59:59 +0800 Subject: [PATCH 05/21] move player up by 4m so we have the same pivot as it's in real Minecraft --- src/model.ts | 12 ++++++------ src/orbit_controls.ts | 2 +- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/model.ts b/src/model.ts index 19afe52..91d1f80 100644 --- a/src/model.ts +++ b/src/model.ts @@ -112,6 +112,7 @@ export class SkinObject extends Group { this.head = new BodyPart(headMesh, head2Mesh); this.head.name = "head"; this.head.add(headMesh, head2Mesh); + this.head.position.y = 4; this.add(this.head); // Body @@ -140,7 +141,7 @@ export class SkinObject extends Group { this.body = new BodyPart(bodyMesh, body2Mesh); this.body.name = "body"; this.body.add(bodyMesh, body2Mesh); - this.body.position.y = -10; + this.body.position.y = -6; this.add(this.body); // Right Arm @@ -210,7 +211,7 @@ export class SkinObject extends Group { this.rightArm = new BodyPart(rightArmMesh, rightArm2Mesh); this.rightArm.name = "rightArm"; this.rightArm.add(rightArmPivot); - this.rightArm.position.y = -6; + this.rightArm.position.y = -2; this.modelListeners.push(() => { this.rightArm.position.x = this.slim ? -5.5 : -6; }); @@ -283,7 +284,7 @@ export class SkinObject extends Group { this.leftArm = new BodyPart(leftArmMesh, leftArm2Mesh); this.leftArm.name = "leftArm"; this.leftArm.add(leftArmPivot); - this.leftArm.position.y = -6; + this.leftArm.position.y = -2; this.modelListeners.push(() => { this.leftArm.position.x = this.slim ? 5.5 : 6; }); @@ -320,7 +321,7 @@ export class SkinObject extends Group { this.rightLeg = new BodyPart(rightLegMesh, rightLeg2Mesh); this.rightLeg.name = "rightLeg"; this.rightLeg.add(rightLegPivot); - this.rightLeg.position.y = -16; + this.rightLeg.position.y = -12; this.rightLeg.position.x = -2; this.add(this.rightLeg); @@ -355,7 +356,7 @@ export class SkinObject extends Group { this.leftLeg = new BodyPart(leftLegMesh, leftLeg2Mesh); this.leftLeg.name = "leftLeg"; this.leftLeg.add(leftLegPivot); - this.leftLeg.position.y = -16; + this.leftLeg.position.y = -12; this.leftLeg.position.x = 2; this.add(this.leftLeg); @@ -431,7 +432,6 @@ export class PlayerObject extends Group { this.cape = new CapeObject(capeTexture); this.cape.name = "cape"; this.cape.position.z = -2; - this.cape.position.y = -4; this.cape.rotation.x = 10.8 * Math.PI / 180; this.add(this.cape); } diff --git a/src/orbit_controls.ts b/src/orbit_controls.ts index a835824..8020c60 100644 --- a/src/orbit_controls.ts +++ b/src/orbit_controls.ts @@ -7,7 +7,7 @@ export function createOrbitControls(skinViewer: SkinViewer): OrbitControls { // default configuration control.enablePan = false; - control.target = new Vector3(0, -12, 0); + control.target = new Vector3(0, -8, 0); control.minDistance = 10; control.maxDistance = 256; control.update(); From a79d5b4ba984a88b3c9cb9f9d67a3d0460ed24c6 Mon Sep 17 00:00:00 2001 From: Haowei Wen Date: Sat, 3 Oct 2020 23:09:55 +0800 Subject: [PATCH 06/21] move camera up by 4m --- examples/offscreen-render.html | 2 +- src/viewer.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/offscreen-render.html b/examples/offscreen-render.html index 249aaad..5ebbfb2 100644 --- a/examples/offscreen-render.html +++ b/examples/offscreen-render.html @@ -51,7 +51,7 @@ skinViewer.camera.rotation.y = 0.534; skinViewer.camera.rotation.z = 0.348; skinViewer.camera.position.x = 30.5; - skinViewer.camera.position.y = 18.0; + skinViewer.camera.position.y = 22.0; skinViewer.camera.position.z = 42.0; for (const { skin, cape } of textures) { diff --git a/src/viewer.ts b/src/viewer.ts index 7fb353d..996f785 100644 --- a/src/viewer.ts +++ b/src/viewer.ts @@ -81,7 +81,7 @@ class SkinViewer { // Use smaller fov to avoid distortion this.camera = new PerspectiveCamera(40); - this.camera.position.y = -12; + this.camera.position.y = -8; this.camera.position.z = 60; this.renderer = new WebGLRenderer({ From bd9bc29684a189e7be75175c342bfa924592a0f6 Mon Sep 17 00:00:00 2001 From: Haowei Wen Date: Sun, 4 Oct 2020 00:43:21 +0800 Subject: [PATCH 07/21] fix pivot of arms & legs --- src/model.ts | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/src/model.ts b/src/model.ts index 91d1f80..a44a753 100644 --- a/src/model.ts +++ b/src/model.ts @@ -206,15 +206,16 @@ export class SkinObject extends Group { const rightArmPivot = new Group(); rightArmPivot.add(rightArmMesh, rightArm2Mesh); + this.modelListeners.push(() => { + rightArmPivot.position.x = this.slim ? -.5 : -1; + }); rightArmPivot.position.y = -4; this.rightArm = new BodyPart(rightArmMesh, rightArm2Mesh); this.rightArm.name = "rightArm"; this.rightArm.add(rightArmPivot); + this.rightArm.position.x = -5; this.rightArm.position.y = -2; - this.modelListeners.push(() => { - this.rightArm.position.x = this.slim ? -5.5 : -6; - }); this.add(this.rightArm); // Left Arm @@ -279,15 +280,16 @@ export class SkinObject extends Group { const leftArmPivot = new Group(); leftArmPivot.add(leftArmMesh, leftArm2Mesh); + this.modelListeners.push(() => { + leftArmPivot.position.x = this.slim ? 0.5 : 1; + }); leftArmPivot.position.y = -4; this.leftArm = new BodyPart(leftArmMesh, leftArm2Mesh); this.leftArm.name = "leftArm"; this.leftArm.add(leftArmPivot); + this.leftArm.position.x = 5; this.leftArm.position.y = -2; - this.modelListeners.push(() => { - this.leftArm.position.x = this.slim ? 5.5 : 6; - }); this.add(this.leftArm); // Right Leg @@ -321,8 +323,9 @@ export class SkinObject extends Group { this.rightLeg = new BodyPart(rightLegMesh, rightLeg2Mesh); this.rightLeg.name = "rightLeg"; this.rightLeg.add(rightLegPivot); + this.rightLeg.position.x = -1.9; this.rightLeg.position.y = -12; - this.rightLeg.position.x = -2; + this.rightLeg.position.z = -.1; this.add(this.rightLeg); // Left Leg @@ -356,8 +359,9 @@ export class SkinObject extends Group { this.leftLeg = new BodyPart(leftLegMesh, leftLeg2Mesh); this.leftLeg.name = "leftLeg"; this.leftLeg.add(leftLegPivot); + this.leftLeg.position.x = 1.9; this.leftLeg.position.y = -12; - this.leftLeg.position.x = 2; + this.leftLeg.position.z = -.1; this.add(this.leftLeg); this.modelType = "default"; From d6a41acc0bccadd09c4a9100d23db89b90ca9c52 Mon Sep 17 00:00:00 2001 From: Haowei Wen Date: Sun, 4 Oct 2020 23:30:01 +0800 Subject: [PATCH 08/21] update skinview-utils to 0.5.9 --- package-lock.json | 6 +++--- package.json | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index bc6e4f2..c77800e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2755,9 +2755,9 @@ "dev": true }, "skinview-utils": { - "version": "0.5.8", - "resolved": "https://registry.npmjs.org/skinview-utils/-/skinview-utils-0.5.8.tgz", - "integrity": "sha512-AEQXx/xerBQv/jNnG5I8mBe65bQPW1BjDt8bW5a0yd/nJ4hP22G2OrfQFxYyBno6ohWwJ6D8pxN34jWrMSyD4g==" + "version": "0.5.9", + "resolved": "https://registry.npmjs.org/skinview-utils/-/skinview-utils-0.5.9.tgz", + "integrity": "sha512-XVEanmZ22BDAydrPeLxHt0oSzcU282EhLPYzhJSDXtn7qcvehWJUQDZwAdYPW8DN+xQMRNHx6ZaKATMVq81KyQ==" }, "slash": { "version": "3.0.0", diff --git a/package.json b/package.json index cd498f1..381fa3e 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,7 @@ "bundles" ], "dependencies": { - "skinview-utils": "^0.5.8", + "skinview-utils": "^0.5.9", "three": "^0.120.1" }, "devDependencies": { From 4df5bc8c7214cfa69c8a9e9838825c72be816ed7 Mon Sep 17 00:00:00 2001 From: Haowei Wen Date: Mon, 5 Oct 2020 17:58:29 +0800 Subject: [PATCH 09/21] update dependencies (three=>0.121.1) --- package-lock.json | 127 ++++++++++++++++++++++------------------------ package.json | 12 ++--- 2 files changed, 66 insertions(+), 73 deletions(-) diff --git a/package-lock.json b/package-lock.json index c77800e..adb745c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -154,12 +154,6 @@ "integrity": "sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==", "dev": true }, - "@types/color-name": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz", - "integrity": "sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==", - "dev": true - }, "@types/estree": { "version": "0.0.39", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz", @@ -188,13 +182,13 @@ } }, "@typescript-eslint/eslint-plugin": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.1.0.tgz", - "integrity": "sha512-U+nRJx8XDUqJxYF0FCXbpmD9nWt/xHDDG0zsw1vrVYAmEAuD/r49iowfurjSL2uTA2JsgtpsyG7mjO7PHf2dYw==", + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.3.0.tgz", + "integrity": "sha512-RqEcaHuEKnn3oPFislZ6TNzsBLqpZjN93G69SS+laav/I8w/iGMuMq97P0D2/2/kW4SCebHggqhbcCfbDaaX+g==", "dev": true, "requires": { - "@typescript-eslint/experimental-utils": "4.1.0", - "@typescript-eslint/scope-manager": "4.1.0", + "@typescript-eslint/experimental-utils": "4.3.0", + "@typescript-eslint/scope-manager": "4.3.0", "debug": "^4.1.1", "functional-red-black-tree": "^1.0.1", "regexpp": "^3.0.0", @@ -203,55 +197,55 @@ } }, "@typescript-eslint/experimental-utils": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-4.1.0.tgz", - "integrity": "sha512-paEYLA37iqRIDPeQwAmoYSiZ3PiHsaAc3igFeBTeqRHgPnHjHLJ9OGdmP6nwAkF65p2QzEsEBtpjNUBWByNWzA==", + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-4.3.0.tgz", + "integrity": "sha512-cmmIK8shn3mxmhpKfzMMywqiEheyfXLV/+yPDnOTvQX/ztngx7Lg/OD26J8gTZfkLKUmaEBxO2jYP3keV7h2OQ==", "dev": true, "requires": { "@types/json-schema": "^7.0.3", - "@typescript-eslint/scope-manager": "4.1.0", - "@typescript-eslint/types": "4.1.0", - "@typescript-eslint/typescript-estree": "4.1.0", + "@typescript-eslint/scope-manager": "4.3.0", + "@typescript-eslint/types": "4.3.0", + "@typescript-eslint/typescript-estree": "4.3.0", "eslint-scope": "^5.0.0", "eslint-utils": "^2.0.0" } }, "@typescript-eslint/parser": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-4.1.0.tgz", - "integrity": "sha512-hM/WNCQTzDHgS0Ke3cR9zPndL3OTKr9OoN9CL3UqulsAjYDrglSwIIgswSmHBcSbOzLmgaMARwrQEbIumIglvQ==", + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-4.3.0.tgz", + "integrity": "sha512-JyfRnd72qRuUwItDZ00JNowsSlpQGeKfl9jxwO0FHK1qQ7FbYdoy5S7P+5wh1ISkT2QyAvr2pc9dAemDxzt75g==", "dev": true, "requires": { - "@typescript-eslint/scope-manager": "4.1.0", - "@typescript-eslint/types": "4.1.0", - "@typescript-eslint/typescript-estree": "4.1.0", + "@typescript-eslint/scope-manager": "4.3.0", + "@typescript-eslint/types": "4.3.0", + "@typescript-eslint/typescript-estree": "4.3.0", "debug": "^4.1.1" } }, "@typescript-eslint/scope-manager": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.1.0.tgz", - "integrity": "sha512-HD1/u8vFNnxwiHqlWKC/Pigdn0Mvxi84Y6GzbZ5f5sbLrFKu0al02573Er+D63Sw67IffVUXR0uR8rpdfdk+vA==", + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.3.0.tgz", + "integrity": "sha512-cTeyP5SCNE8QBRfc+Lgh4Xpzje46kNUhXYfc3pQWmJif92sjrFuHT9hH4rtOkDTo/si9Klw53yIr+djqGZS1ig==", "dev": true, "requires": { - "@typescript-eslint/types": "4.1.0", - "@typescript-eslint/visitor-keys": "4.1.0" + "@typescript-eslint/types": "4.3.0", + "@typescript-eslint/visitor-keys": "4.3.0" } }, "@typescript-eslint/types": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.1.0.tgz", - "integrity": "sha512-rkBqWsO7m01XckP9R2YHVN8mySOKKY2cophGM8K5uDK89ArCgahItQYdbg/3n8xMxzu2elss+an1TphlUpDuJw==", + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.3.0.tgz", + "integrity": "sha512-Cx9TpRvlRjOppGsU6Y6KcJnUDOelja2NNCX6AZwtVHRzaJkdytJWMuYiqi8mS35MRNA3cJSwDzXePfmhU6TANw==", "dev": true }, "@typescript-eslint/typescript-estree": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-4.1.0.tgz", - "integrity": "sha512-r6et57qqKAWU173nWyw31x7OfgmKfMEcjJl9vlJEzS+kf9uKNRr4AVTRXfTCwebr7bdiVEkfRY5xGnpPaNPe4Q==", + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-4.3.0.tgz", + "integrity": "sha512-ZAI7xjkl+oFdLV/COEz2tAbQbR3XfgqHEGy0rlUXzfGQic6EBCR4s2+WS3cmTPG69aaZckEucBoTxW9PhzHxxw==", "dev": true, "requires": { - "@typescript-eslint/types": "4.1.0", - "@typescript-eslint/visitor-keys": "4.1.0", + "@typescript-eslint/types": "4.3.0", + "@typescript-eslint/visitor-keys": "4.3.0", "debug": "^4.1.1", "globby": "^11.0.1", "is-glob": "^4.0.1", @@ -261,12 +255,12 @@ } }, "@typescript-eslint/visitor-keys": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.1.0.tgz", - "integrity": "sha512-+taO0IZGCtCEsuNTTF2Q/5o8+fHrlml8i9YsZt2AiDCdYEJzYlsmRY991l/6f3jNXFyAWepdQj7n8Na6URiDRQ==", + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.3.0.tgz", + "integrity": "sha512-xZxkuR7XLM6RhvLkgv9yYlTcBHnTULzfnw4i6+z2TGBLy9yljAypQaZl9c3zFvy7PNI7fYWyvKYtohyF8au3cw==", "dev": true, "requires": { - "@typescript-eslint/types": "4.1.0", + "@typescript-eslint/types": "4.3.0", "eslint-visitor-keys": "^2.0.0" } }, @@ -321,9 +315,9 @@ } }, "acorn": { - "version": "7.4.0", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.0.tgz", - "integrity": "sha512-+G7P8jJmCHr+S+cLfQxygbWhXy+8YTVGzAkpEbcLo2mLoL7tij/VG41QSHACSf5QgYRhMZYHuNc6drJaO0Da+w==", + "version": "7.4.1", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz", + "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==", "dev": true }, "acorn-jsx": { @@ -348,9 +342,9 @@ } }, "ajv": { - "version": "6.12.4", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.4.tgz", - "integrity": "sha512-eienB2c9qVQs2KWexhkrdMLVDoIQCz5KSeLxwg9Lzk4DOfBtIK9PQwwufcsn1jjGuf9WZmqPMbGxOzfcuphJCQ==", + "version": "6.12.5", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.5.tgz", + "integrity": "sha512-lRF8RORchjpKG50/WFf8xmg7sgCLFiYNNnqdKflk63whMQcWR5ngGjiSXkL9bjxy6B2npOK2HSMN49jEBMSkag==", "dev": true, "requires": { "fast-deep-equal": "^3.1.1", @@ -896,9 +890,9 @@ "dev": true }, "eslint": { - "version": "7.8.1", - "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.8.1.tgz", - "integrity": "sha512-/2rX2pfhyUG0y+A123d0ccXtMm7DV7sH1m3lk9nk2DZ2LReq39FXHueR9xZwshE5MdfSf0xunSaMWRqyIA6M1w==", + "version": "7.10.0", + "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.10.0.tgz", + "integrity": "sha512-BDVffmqWl7JJXqCjAK6lWtcQThZB/aP1HXSH1JKwGwv0LQEdvpR7qzNrUT487RM39B5goWuboFad5ovMBmD8yA==", "dev": true, "requires": { "@babel/code-frame": "^7.0.0", @@ -909,7 +903,7 @@ "debug": "^4.0.1", "doctrine": "^3.0.0", "enquirer": "^2.3.5", - "eslint-scope": "^5.1.0", + "eslint-scope": "^5.1.1", "eslint-utils": "^2.1.0", "eslint-visitor-keys": "^1.3.0", "espree": "^7.3.0", @@ -941,12 +935,11 @@ }, "dependencies": { "ansi-styles": { - "version": "4.2.1", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz", - "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==", + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", "dev": true, "requires": { - "@types/color-name": "^1.1.1", "color-convert": "^2.0.1" } }, @@ -1031,12 +1024,12 @@ } }, "eslint-scope": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.0.tgz", - "integrity": "sha512-iiGRvtxWqgtx5m8EyQUJihBloE4EnYeGE/bz1wSPwJE6tZuJUtHlhqDM4Xj2ukE8Dyy1+HCZ4hE0fzIVMzb58w==", + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz", + "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==", "dev": true, "requires": { - "esrecurse": "^4.1.0", + "esrecurse": "^4.3.0", "estraverse": "^4.1.1" } }, @@ -2618,9 +2611,9 @@ } }, "rollup": { - "version": "2.26.11", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.26.11.tgz", - "integrity": "sha512-xyfxxhsE6hW57xhfL1I+ixH8l2bdoIMaAecdQiWF3N7IgJEMu99JG+daBiSZQjnBpzFxa0/xZm+3pbCdAQehHw==", + "version": "2.28.2", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.28.2.tgz", + "integrity": "sha512-8txbsFBFLmm9Xdt4ByTOGa9Muonmc8MfNjnGAR8U8scJlF1ZW7AgNZa7aqBXaKtlvnYP/ab++fQIq9dB9NWUbg==", "dev": true, "requires": { "fsevents": "~2.1.2" @@ -3052,9 +3045,9 @@ } }, "three": { - "version": "0.120.1", - "resolved": "https://registry.npmjs.org/three/-/three-0.120.1.tgz", - "integrity": "sha512-ktaCRFUR7JUZcKec+cBRz+oBex5pOVaJhrtxvFF2T7on53o9UkEux+/Nh1g/4zeb4t/pbxIFcADbn/ACu3LC1g==" + "version": "0.121.1", + "resolved": "https://registry.npmjs.org/three/-/three-0.121.1.tgz", + "integrity": "sha512-+rYhNpW5W1aBdLkPQDld/GA4Sj/uOKJJKVpCAZUbpk/HZEiYRUlPt8+s+9nmxRglWmRHdBa3ERvUwqg4nmoA5w==" }, "through": { "version": "2.3.8", @@ -3160,9 +3153,9 @@ } }, "typescript": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.0.2.tgz", - "integrity": "sha512-e4ERvRV2wb+rRZ/IQeb3jm2VxBsirQLpQhdxplZ2MEzGvDkkMmPglecnNDfSUBivMjP93vRbngYYDQqQ/78bcQ==", + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.0.3.tgz", + "integrity": "sha512-tEu6DGxGgRJPb/mVPIZ48e69xCn2yRmCgYmDugAVwmJ6o+0u1RI18eO7E7WBTLYLaEVVOhwQmcdhQHweux/WPg==", "dev": true }, "typical": { diff --git a/package.json b/package.json index 381fa3e..c413cc0 100644 --- a/package.json +++ b/package.json @@ -39,20 +39,20 @@ ], "dependencies": { "skinview-utils": "^0.5.9", - "three": "^0.120.1" + "three": "^0.121.1" }, "devDependencies": { "@rollup/plugin-node-resolve": "^9.0.0", "@rollup/plugin-typescript": "^6.0.0", - "@typescript-eslint/eslint-plugin": "^4.1.0", - "@typescript-eslint/parser": "^4.1.0", + "@typescript-eslint/eslint-plugin": "^4.3.0", + "@typescript-eslint/parser": "^4.3.0", "@yushijinhun/three-minifier-rollup": "^0.2.0-alpha.2", - "eslint": "^7.8.1", + "eslint": "^7.10.0", "local-web-server": "^4.2.1", "npm-run-all": "^4.1.5", "rimraf": "^3.0.2", - "rollup": "^2.26.11", + "rollup": "^2.28.2", "rollup-plugin-terser": "^7.0.2", - "typescript": "^4.0.2" + "typescript": "^4.0.3" } } From 7df054c7ec42a1ef83fcd7d578b7139d8960455f Mon Sep 17 00:00:00 2001 From: Haowei Wen Date: Mon, 5 Oct 2020 17:59:16 +0800 Subject: [PATCH 10/21] 2.0.0-alpha.11 --- package-lock.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index adb745c..f708a72 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "skinview3d", - "version": "2.0.0-alpha.10", + "version": "2.0.0-alpha.11", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index c413cc0..369def2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "skinview3d", - "version": "2.0.0-alpha.10", + "version": "2.0.0-alpha.11", "description": "Three.js powered Minecraft skin viewer", "main": "libs/skinview3d.js", "type": "module", From d3f3cb422c587bd7dbfc67773ae860a7c94a4e4e Mon Sep 17 00:00:00 2001 From: Haowei Wen Date: Fri, 9 Oct 2020 16:12:13 +0800 Subject: [PATCH 11/21] use inside of cape as its front face --- src/model.ts | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/src/model.ts b/src/model.ts index a44a753..3cd8fdf 100644 --- a/src/model.ts +++ b/src/model.ts @@ -403,20 +403,20 @@ export class CapeObject extends Group { alphaTest: 1e-5 }); - // back = outside - // front = inside + // +z (front) - inside of cape + // -z (back) - outside of cape const capeBox = new BoxGeometry(10, 16, 1); setVertices(capeBox, - toCapeVertices(11, 1, 1, 0), - toCapeVertices(21, 1, 11, 0), - toCapeVertices(11, 1, 12, 17), - toCapeVertices(12, 1, 22, 17), + toCapeVertices(1, 0, 11, 1), + toCapeVertices(11, 0, 21, 1), toCapeVertices(0, 1, 1, 17), - toCapeVertices(1, 1, 11, 17) + toCapeVertices(1, 1, 11, 17), + toCapeVertices(11, 1, 12, 17), + toCapeVertices(12, 1, 22, 17) ); this.cape = new Mesh(capeBox, capeMaterial); this.cape.position.y = -8; - this.cape.position.z = -0.5; + this.cape.position.z = .5; this.add(this.cape); } } @@ -437,6 +437,7 @@ export class PlayerObject extends Group { this.cape.name = "cape"; this.cape.position.z = -2; this.cape.rotation.x = 10.8 * Math.PI / 180; + this.cape.rotation.y = Math.PI; this.add(this.cape); } } From 400eecb9e90d162005399c55cb7e62f50546db4a Mon Sep 17 00:00:00 2001 From: Haowei Wen Date: Fri, 9 Oct 2020 16:45:08 +0800 Subject: [PATCH 12/21] refactor uvs --- src/model.ts | 196 +++++++++------------------------------------------ 1 file changed, 33 insertions(+), 163 deletions(-) diff --git a/src/model.ts b/src/model.ts index 3cd8fdf..1afab31 100644 --- a/src/model.ts +++ b/src/model.ts @@ -1,24 +1,21 @@ import { ModelType } from "skinview-utils"; import { BoxGeometry, DoubleSide, FrontSide, Group, Mesh, MeshBasicMaterial, Object3D, Texture, Vector2 } from "three"; -function toFaceVertices(x1: number, y1: number, x2: number, y2: number, w: number, h: number): Array { - return [ - new Vector2(x1 / w, 1.0 - y2 / h), - new Vector2(x2 / w, 1.0 - y2 / h), - new Vector2(x2 / w, 1.0 - y1 / h), - new Vector2(x1 / w, 1.0 - y1 / h) +function setUVs(box: BoxGeometry, u: number, v: number, width: number, height: number, depth: number, textureWidth: number, textureHeight: number): void { + const toFaceVertices = (x1: number, y1: number, x2: number, y2: number) => [ + new Vector2(x1 / textureWidth, 1.0 - y2 / textureHeight), + new Vector2(x2 / textureWidth, 1.0 - y2 / textureHeight), + new Vector2(x2 / textureWidth, 1.0 - y1 / textureHeight), + new Vector2(x1 / textureWidth, 1.0 - y1 / textureHeight) ]; -} -function toSkinVertices(x1: number, y1: number, x2: number, y2: number): Array { - return toFaceVertices(x1, y1, x2, y2, 64.0, 64.0); -} + const top = toFaceVertices(u + depth, v, u + width + depth, v + depth); + const bottom = toFaceVertices(u + width + depth, v, u + width * 2 + depth, v + depth); + const left = toFaceVertices(u, v + depth, u + depth, v + depth + height); + const front = toFaceVertices(u + depth, v + depth, u + width + depth, v + depth + height); + const right = toFaceVertices(u + width + depth, v + depth, u + width + depth * 2, v + height + depth); + const back = toFaceVertices(u + width + depth * 2, v + depth, u + width * 2 + depth * 2, v + height + depth); -function toCapeVertices(x1: number, y1: number, x2: number, y2: number): Array { - return toFaceVertices(x1, y1, x2, y2, 64.0, 32.0); -} - -function setVertices(box: BoxGeometry, top: Array, bottom: Array, left: Array, front: Array, right: Array, back: Array): void { box.faceVertexUvs[0] = []; box.faceVertexUvs[0][0] = [right[3], right[0], right[2]]; box.faceVertexUvs[0][1] = [right[0], right[1], right[2]]; @@ -34,6 +31,14 @@ function setVertices(box: BoxGeometry, top: Array, bottom: Array Date: Fri, 9 Oct 2020 22:23:28 +0800 Subject: [PATCH 13/21] refactor setUVs --- src/model.ts | 27 ++++++++++++++------------- 1 file changed, 14 insertions(+), 13 deletions(-) diff --git a/src/model.ts b/src/model.ts index 1afab31..45220d1 100644 --- a/src/model.ts +++ b/src/model.ts @@ -16,19 +16,20 @@ function setUVs(box: BoxGeometry, u: number, v: number, width: number, height: n const right = toFaceVertices(u + width + depth, v + depth, u + width + depth * 2, v + height + depth); const back = toFaceVertices(u + width + depth * 2, v + depth, u + width * 2 + depth * 2, v + height + depth); - box.faceVertexUvs[0] = []; - box.faceVertexUvs[0][0] = [right[3], right[0], right[2]]; - box.faceVertexUvs[0][1] = [right[0], right[1], right[2]]; - box.faceVertexUvs[0][2] = [left[3], left[0], left[2]]; - box.faceVertexUvs[0][3] = [left[0], left[1], left[2]]; - box.faceVertexUvs[0][4] = [top[3], top[0], top[2]]; - box.faceVertexUvs[0][5] = [top[0], top[1], top[2]]; - box.faceVertexUvs[0][6] = [bottom[0], bottom[3], bottom[1]]; - box.faceVertexUvs[0][7] = [bottom[3], bottom[2], bottom[1]]; - box.faceVertexUvs[0][8] = [front[3], front[0], front[2]]; - box.faceVertexUvs[0][9] = [front[0], front[1], front[2]]; - box.faceVertexUvs[0][10] = [back[3], back[0], back[2]]; - box.faceVertexUvs[0][11] = [back[0], back[1], back[2]]; + box.faceVertexUvs[0] = [ + [right[3], right[0], right[2]], + [right[0], right[1], right[2]], + [left[3], left[0], left[2]], + [left[0], left[1], left[2]], + [top[3], top[0], top[2]], + [top[0], top[1], top[2]], + [bottom[0], bottom[3], bottom[1]], + [bottom[3], bottom[2], bottom[1]], + [front[3], front[0], front[2]], + [front[0], front[1], front[2]], + [back[3], back[0], back[2]], + [back[0], back[1], back[2]] + ]; } function setSkinUVs(box: BoxGeometry, u: number, v: number, width: number, height: number, depth: number): void { From 52e809138de068297986c8324dfe7575819d2dc2 Mon Sep 17 00:00:00 2001 From: Haowei Wen Date: Sat, 10 Oct 2020 09:05:21 +0800 Subject: [PATCH 14/21] remove renderOrder --- src/model.ts | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/model.ts b/src/model.ts index 45220d1..003de44 100644 --- a/src/model.ts +++ b/src/model.ts @@ -99,7 +99,6 @@ export class SkinObject extends Group { const head2Box = new BoxGeometry(9, 9, 9); setSkinUVs(head2Box, 32, 0, 8, 8, 8); const head2Mesh = new Mesh(head2Box, layer2Material); - head2Mesh.renderOrder = -1; this.head = new BodyPart(headMesh, head2Mesh); this.head.name = "head"; @@ -136,7 +135,6 @@ export class SkinObject extends Group { const rightArm2Box = new BoxGeometry(); const rightArm2Mesh = new Mesh(rightArm2Box, layer2MaterialBiased); - rightArm2Mesh.renderOrder = 1; this.modelListeners.push(() => { rightArm2Mesh.scale.x = this.slim ? 3.5 : 4.5; rightArm2Mesh.scale.y = 12.5; @@ -174,7 +172,6 @@ export class SkinObject extends Group { const leftArm2Box = new BoxGeometry(); const leftArm2Mesh = new Mesh(leftArm2Box, layer2MaterialBiased); - leftArm2Mesh.renderOrder = 1; this.modelListeners.push(() => { leftArm2Mesh.scale.x = this.slim ? 3.5 : 4.5; leftArm2Mesh.scale.y = 12.5; @@ -206,7 +203,6 @@ export class SkinObject extends Group { const rightLeg2Box = new BoxGeometry(4.5, 12.5, 4.5); setSkinUVs(rightLeg2Box, 0, 32, 4, 12, 4); const rightLeg2Mesh = new Mesh(rightLeg2Box, layer2MaterialBiased); - rightLeg2Mesh.renderOrder = 1; const rightLegPivot = new Group(); rightLegPivot.add(rightLegMesh, rightLeg2Mesh); @@ -228,7 +224,6 @@ export class SkinObject extends Group { const leftLeg2Box = new BoxGeometry(4.5, 12.5, 4.5); setSkinUVs(leftLeg2Box, 0, 48, 4, 12, 4); const leftLeg2Mesh = new Mesh(leftLeg2Box, layer2MaterialBiased); - leftLeg2Mesh.renderOrder = 1; const leftLegPivot = new Group(); leftLegPivot.add(leftLegMesh, leftLeg2Mesh); From 61572b6824f9d42f3411cb3f12b955e8fe38fe22 Mon Sep 17 00:00:00 2001 From: yushijinhun Date: Sat, 22 Sep 2018 23:37:23 +0800 Subject: [PATCH 15/21] 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 16/21] 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 @@