Ubujira
/
skinview3d
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Implemented Elytra functionality

This commit is contained in:
James Harrison 2020-06-08 21:32:54 +01:00
parent 86473ef2ea
commit 4e33ff1fa4
3 changed files with 114 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
examples/index.html
View File

@ -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;
}
</style>
</head>
<body>
<div id="skin_container"></div>
<div id="skin-container"></div>
<script type="text/javascript" src="../bundles/skinview3d.bundle.js"></script>
<script>
let skinViewer = new skinview3d.SkinViewer({
domElement: document.getElementById("skin_container"),
domElement: document.getElementById("skin-container"),
width: 200,
height: 400,
skinUrl: "./skin.png",
@ -31,7 +42,12 @@
earUrl: "./ears.png"
});
let control = new skinview3d.createOrbitControls(skinViewer);
let control = skinview3d.createOrbitControls(skinViewer);
control.enableRotate = true;
control.enableZoom = false;
control.enablePan = false;
skinViewer.playerObject.rotation.y = 180 * Math.PI / 180;
</script>

93
src/model.ts
View File

@ -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<Vector2> {
return [
@ -17,6 +17,10 @@ function toCapeVertices(x1: number, y1: number, x2: number, y2: number): Array<V
return toFaceVertices(x1, y1, x2, y2, 64.0, 32.0);
}
function toElytraVertices(x1: number, y1: number, x2: number, y2: number) {
return toFaceVertices(x1 + 22, y1, x2 + 22, y2, 64.0, 32.0);
}
function toEarVertices(x1: number, y1: number, x2: number, y2: number): Array<Vector2> {
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;

6
src/viewer.ts
View File

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