From 4e33ff1fa4e17be8a1595da6edccb1ad6964326a Mon Sep 17 00:00:00 2001 From: James Harrison Date: Mon, 8 Jun 2020 21:32:54 +0100 Subject: [PATCH] Implemented Elytra functionality --- examples/index.html | 22 +++++++++-- src/model.ts | 93 ++++++++++++++++++++++++++++++++++++++++++++- src/viewer.ts | 6 +-- 3 files changed, 114 insertions(+), 7 deletions(-) diff --git a/examples/index.html b/examples/index.html index 7b14016..cad4186 100644 --- a/examples/index.html +++ b/examples/index.html @@ -12,18 +12,29 @@ padding: 0; background-color: #1e1e1e; } + + #skin-container { + text-align: center; + cursor: move; + } + + #skin-container > canvas { + background: white; + filter: drop-shadow(-5px 5px 7px rgba(0, 0, 0, 0.4)); + outline: none; + } -
+
diff --git a/src/model.ts b/src/model.ts index 1425c53..0daaff9 100644 --- a/src/model.ts +++ b/src/model.ts @@ -1,4 +1,4 @@ -import { BoxGeometry, DoubleSide, FrontSide, Group, Mesh, MeshBasicMaterial, Object3D, Texture, Vector2 } from "three"; +import { BoxGeometry, DoubleSide, FrontSide, Group, Mesh, MeshBasicMaterial, Object3D, Texture, Vector2, Vector3 } from "three"; function toFaceVertices(x1: number, y1: number, x2: number, y2: number, w: number, h: number): Array { return [ @@ -17,6 +17,10 @@ function toCapeVertices(x1: number, y1: number, x2: number, y2: number): Array { return toFaceVertices(x1, y1, x2, y2, 14.0, 7.0); } @@ -420,6 +424,79 @@ 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, transparent: true, opacity: 1, side: DoubleSide, alphaTest: 0.5, + polygonOffset: true, + polygonOffsetFactor: -1.0, + polygonOffsetUnits: -4.0 + }); + + const leftWingBox = new BoxGeometry(10, 20, 2); + setVertices(leftWingBox, + toElytraVertices(2, 0, 12, 2), + toElytraVertices(12, 0, 22, 2), + toElytraVertices(0, 2, 2, 22), + toElytraVertices(2, 2, 12, 22), + toElytraVertices(12, 2, 14, 22), + toElytraVertices(14, 2, 24, 22) + ); + const leftWingMesh = new Mesh(leftWingBox, elytraMaterial); + leftWingMesh.position.x = -5; + leftWingMesh.position.y = -10; + leftWingMesh.position.z = -1; + + leftWingMesh.scale.x = -1.15 + leftWingMesh.scale.y = 1.15; + leftWingMesh.scale.z = 1.15; + + this.leftWing = new Group(); + this.leftWing.add(leftWingMesh); + this.leftWing.position.x = 3; // Left - right + this.leftWing.position.y = -1.5; //Up - down + + this.leftWing.rotation.x = 0.2617994; + this.leftWing.rotation.y = 0; + this.leftWing.rotation.z = -0.19; + this.add(this.leftWing); + + const rightWingBox = new BoxGeometry(10, 20, 2); + setVertices(rightWingBox, + toElytraVertices(2, 0, 12, 2), + toElytraVertices(12, 0, 22, 2), + toElytraVertices(0, 2, 2, 22), + toElytraVertices(2, 2, 12, 22), + toElytraVertices(12, 2, 14, 22), + toElytraVertices(14, 2, 24, 22) + ); + const rightWingMesh = new Mesh(rightWingBox, elytraMaterial); + + rightWingMesh.position.x = 5; + rightWingMesh.position.y = -10; + rightWingMesh.position.z = -1; + + rightWingMesh.scale.x = 1.15 + rightWingMesh.scale.y = 1.15; + rightWingMesh.scale.z = 1.15; + + this.rightWing = new Group(); + this.rightWing.add(rightWingMesh); + this.rightWing.position.x = -3; // Left - right + this.rightWing.position.y = -1.5; //Up - down + + this.rightWing.rotation.x = 0.2617994; //0.2617994 + this.rightWing.rotation.y = 0; + this.rightWing.rotation.z = 0.19; + this.add(this.rightWing); + } +} + export class EarsObject extends Group { readonly leftEar: Mesh; @@ -446,10 +523,16 @@ export class EarsObject extends Group { this.leftEar = new Mesh(earBox, earMaterial); this.leftEar.position.x = -5.5; + this.leftEar.scale.x = 1.3; + this.leftEar.scale.y = 1.3; + this.leftEar.scale.z = 1.3; this.add(this.leftEar); this.rightEar = new Mesh(earBox, earMaterial); this.rightEar.position.x = 5.5; + this.rightEar.scale.x = 1.3; + this.rightEar.scale.y = 1.3; + this.rightEar.scale.z = 1.3; this.add(this.rightEar); } } @@ -458,6 +541,7 @@ export class PlayerObject extends Group { readonly skin: SkinObject; readonly cape: CapeObject; + readonly elytra: ElytraObject; readonly ears: EarsObject constructor(skinTexture: Texture, capeTexture: Texture, earTexture: Texture) { @@ -473,8 +557,15 @@ export class PlayerObject extends Group { this.cape.position.z = -2; this.cape.position.y = -6; this.cape.rotation.x = 10 * Math.PI / 180; + //this.cape.visible = false; this.add(this.cape); + this.elytra = new ElytraObject(capeTexture); + this.elytra.position.y = -7; + this.elytra.position.z = -2; + this.elytra.visible = false; + this.add(this.elytra); + this.ears = new EarsObject(earTexture); this.ears.name = "ears"; this.ears.position.y = 3.5; diff --git a/src/viewer.ts b/src/viewer.ts index 12710fd..07ec9be 100644 --- a/src/viewer.ts +++ b/src/viewer.ts @@ -72,11 +72,11 @@ export class SkinViewer { this.scene = new Scene(); // Use smaller fov to avoid distortion - this.camera = new PerspectiveCamera(40); + this.camera = new PerspectiveCamera(20); this.camera.position.y = 0; - this.camera.position.z = 60; + this.camera.position.z = 140; - this.renderer = new WebGLRenderer({ alpha: true }); + this.renderer = new WebGLRenderer({ alpha: true, logarithmicDepthBuffer: true }); this.domElement.appendChild(this.renderer.domElement); this.playerObject = new PlayerObject(this.skinTexture, this.capeTexture, this.earTexture);