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);