diff --git a/example_jquery.html b/example_jquery.html
index 50829e5..c178db7 100644
--- a/example_jquery.html
+++ b/example_jquery.html
@@ -19,7 +19,8 @@
slim: true,
// disableControl: true, // This disables the mouse control feature
width: 600,
- height: 600
+ height: 600,
+ animation: skinpreview3d.WalkAnimation
});
});
diff --git a/example_purejs.html b/example_purejs.html
index ad82099..b892298 100644
--- a/example_purejs.html
+++ b/example_purejs.html
@@ -17,7 +17,8 @@
width: 600,
height: 600,
skinUrl: 'img/hatsune_miku.png',
- capeUrl: 'img/mojang_cape.png'
+ capeUrl: 'img/mojang_cape.png',
+ animation: skinpreview3d.WalkAnimation
});
// change the skin and cape
diff --git a/js/skinpreview3d.js b/js/skinpreview3d.js
index 48e322b..8a14306 100644
--- a/js/skinpreview3d.js
+++ b/js/skinpreview3d.js
@@ -84,13 +84,314 @@ var skinpreview3d = new function(){
box.faceVertexUvs[0][11] = [back[0], back[1], back[2]];
};
+ this.SkinObject = class extends THREE.Group {
+ constructor(isSlim, layer1Material, layer2Material) {
+ super();
+
+ // Head
+ this.head = new THREE.Group();
+
+ var headBox = new THREE.BoxGeometry(8, 8, 8, 0, 0, 0);
+ addVertices(headBox,
+ toSkinVertices(8, 0, 16, 8),
+ toSkinVertices(16, 0, 24, 8),
+ toSkinVertices(0, 8, 8, 16),
+ toSkinVertices(8, 8, 16, 16),
+ toSkinVertices(16, 8, 24, 16),
+ toSkinVertices(24, 8, 32, 16)
+ );
+ var headMesh = new THREE.Mesh(headBox, layer1Material);
+ this.head.add(headMesh);
+
+ var head2Box = new THREE.BoxGeometry(9, 9, 9, 0, 0, 0);
+ addVertices(head2Box,
+ toSkinVertices(40, 0, 48, 8),
+ toSkinVertices(48, 0, 56, 8),
+ toSkinVertices(32, 8, 40, 16),
+ toSkinVertices(40, 8, 48, 16),
+ toSkinVertices(48, 8, 56, 16),
+ toSkinVertices(56, 8, 64, 16)
+ );
+ var head2Mesh = new THREE.Mesh(head2Box, layer2Material);
+ head2Mesh.renderOrder = -1;
+ this.head.add(head2Mesh);
+
+ this.add(this.head);
+
+
+ // Body
+ this.body = new THREE.Group();
+
+ var bodyBox = new THREE.BoxGeometry(8, 12, 4, 0, 0, 0);
+ addVertices(bodyBox,
+ toSkinVertices(20, 16, 28, 20),
+ toSkinVertices(28, 16, 36, 20),
+ toSkinVertices(16, 20, 20, 32),
+ toSkinVertices(20, 20, 28, 32),
+ toSkinVertices(28, 20, 32, 32),
+ toSkinVertices(32, 20, 40, 32)
+ );
+ var bodyMesh = new THREE.Mesh(bodyBox, layer1Material);
+ this.body.add(bodyMesh);
+
+ var body2Box = new THREE.BoxGeometry(9, 13.5, 4.5, 0, 0, 0);
+ addVertices(body2Box,
+ toSkinVertices(20, 32, 28, 36),
+ toSkinVertices(28, 32, 36, 36),
+ toSkinVertices(16, 36, 20, 48),
+ toSkinVertices(20, 36, 28, 48),
+ toSkinVertices(28, 36, 32, 48),
+ toSkinVertices(32, 36, 40, 48)
+ );
+ var body2Mesh = new THREE.Mesh(body2Box, layer2Material);
+ this.body.add(body2Mesh);
+
+ this.body.position.y = -10;
+ this.add(this.body);
+
+
+ // Right Arm
+ this.rightArm = new THREE.Group();
+
+ var rightArmBox = new THREE.BoxGeometry(isSlim?3:4, 12, 4, 0, 0, 0);
+ if (isSlim) {
+ addVertices(rightArmBox,
+ toSkinVertices(44, 16, 47, 20),
+ toSkinVertices(47, 16, 50, 20),
+ toSkinVertices(40, 20, 44, 32),
+ toSkinVertices(44, 20, 47, 32),
+ toSkinVertices(47, 20, 51, 32),
+ toSkinVertices(51, 20, 54, 32)
+ );
+ } else {
+ addVertices(rightArmBox,
+ toSkinVertices(44, 16, 48, 20),
+ toSkinVertices(48, 16, 52, 20),
+ toSkinVertices(40, 20, 44, 32),
+ toSkinVertices(44, 20, 48, 32),
+ toSkinVertices(48, 20, 52, 32),
+ toSkinVertices(52, 20, 56, 32)
+ );
+ }
+ var rightArmMesh = new THREE.Mesh(rightArmBox, layer1Material);
+ this.rightArm.add(rightArmMesh);
+
+ var rightArm2Box = new THREE.BoxGeometry(isSlim?3.375:4.5, 13.5, 4.5, 0, 0, 0);
+ if (isSlim) {
+ addVertices(rightArm2Box,
+ toSkinVertices(44, 32, 47, 36),
+ toSkinVertices(47, 32, 50, 36),
+ toSkinVertices(40, 36, 44, 48),
+ toSkinVertices(44, 36, 47, 48),
+ toSkinVertices(47, 36, 51, 48),
+ toSkinVertices(51, 36, 54, 48)
+ );
+ } else {
+ addVertices(rightArm2Box,
+ toSkinVertices(44, 32, 48, 36),
+ toSkinVertices(48, 32, 52, 36),
+ toSkinVertices(40, 36, 44, 48),
+ toSkinVertices(44, 36, 48, 48),
+ toSkinVertices(48, 36, 52, 48),
+ toSkinVertices(52, 36, 56, 48)
+ );
+ }
+ var rightArm2Mesh = new THREE.Mesh(rightArm2Box, layer2Material);
+ rightArm2Mesh.renderOrder = 1;
+ this.rightArm.add(rightArm2Mesh);
+
+ this.rightArm.position.y = -10;
+ this.rightArm.position.x = isSlim?-5.5:-6;
+ this.add(this.rightArm);
+
+
+ // Left Arm
+ this.leftArm = new THREE.Group();
+
+ var leftArmBox = new THREE.BoxGeometry(isSlim?3:4, 12, 4, 0, 0, 0);
+ if (isSlim) {
+ addVertices(leftArmBox,
+ toSkinVertices(36, 48, 39, 52),
+ toSkinVertices(39, 48, 42, 52),
+ toSkinVertices(32, 52, 36, 64),
+ toSkinVertices(36, 52, 39, 64),
+ toSkinVertices(39, 52, 43, 64),
+ toSkinVertices(43, 52, 46, 64)
+ );
+ } else {
+ addVertices(leftArmBox,
+ toSkinVertices(36, 48, 40, 52),
+ toSkinVertices(40, 48, 44, 52),
+ toSkinVertices(32, 52, 36, 64),
+ toSkinVertices(36, 52, 40, 64),
+ toSkinVertices(40, 52, 44, 64),
+ toSkinVertices(44, 52, 48, 64)
+ );
+ }
+ var leftArmMesh = new THREE.Mesh(leftArmBox, layer1Material);
+ this.leftArm.add(leftArmMesh);
+
+ var leftArm2Box = new THREE.BoxGeometry(isSlim?3.375:4.5, 13.5, 4.5, 0, 0, 0);
+ if (isSlim) {
+ addVertices(leftArm2Box,
+ toSkinVertices(52, 48, 55, 52),
+ toSkinVertices(55, 48, 58, 52),
+ toSkinVertices(48, 52, 52, 64),
+ toSkinVertices(52, 52, 55, 64),
+ toSkinVertices(55, 52, 59, 64),
+ toSkinVertices(59, 52, 62, 64)
+ );
+ } else {
+ addVertices(leftArm2Box,
+ toSkinVertices(52, 48, 56, 52),
+ toSkinVertices(56, 48, 60, 52),
+ toSkinVertices(48, 52, 52, 64),
+ toSkinVertices(52, 52, 56, 64),
+ toSkinVertices(56, 52, 60, 64),
+ toSkinVertices(60, 52, 64, 64)
+ );
+ }
+ var leftArm2Mesh = new THREE.Mesh(leftArm2Box, layer2Material);
+ leftArm2Mesh.renderOrder = 1;
+ this.leftArm.add(leftArm2Mesh);
+
+ this.leftArm.position.y = -10;
+ this.leftArm.position.x = isSlim?5.5:6;
+ this.add(this.leftArm);
+
+
+ // Right Leg
+ this.rightLeg = new THREE.Group();
+
+ var rightLegBox = new THREE.BoxGeometry(4, 12, 4, 0, 0, 0);
+ addVertices(rightLegBox,
+ toSkinVertices(4, 16, 8, 20),
+ toSkinVertices(8, 16, 12, 20),
+ toSkinVertices(0, 20, 4, 32),
+ toSkinVertices(4, 20, 8, 32),
+ toSkinVertices(8, 20, 12, 32),
+ toSkinVertices(12, 20, 16, 32)
+ );
+ var rightLegMesh = new THREE.Mesh(rightLegBox, layer1Material);
+ this.rightLeg.add(rightLegMesh);
+
+ var rightLeg2Box = new THREE.BoxGeometry(4.5, 13.5, 4.5, 0, 0, 0);
+ addVertices(rightLeg2Box,
+ toSkinVertices(4, 32, 8, 36),
+ toSkinVertices(8, 32, 12, 36),
+ toSkinVertices(0, 36, 4, 48),
+ toSkinVertices(4, 36, 8, 48),
+ toSkinVertices(8, 36, 12, 48),
+ toSkinVertices(12, 36, 16, 48)
+ );
+ var rightLeg2Mesh = new THREE.Mesh(rightLeg2Box, layer2Material);
+ rightLeg2Mesh.renderOrder = 1;
+ this.rightLeg.add(rightLeg2Mesh);
+
+ this.rightLeg.position.y = -22;
+ this.rightLeg.position.x = -2;
+ this.add(this.rightLeg);
+
+ // Left Leg
+ this.leftLeg = new THREE.Group();
+
+ var leftLegBox = new THREE.BoxGeometry(4, 12, 4, 0, 0, 0);
+ addVertices(leftLegBox,
+ toSkinVertices(20, 48, 24, 52),
+ toSkinVertices(24, 48, 28, 52),
+ toSkinVertices(16, 52, 20, 64),
+ toSkinVertices(20, 52, 24, 64),
+ toSkinVertices(24, 52, 28, 64),
+ toSkinVertices(28, 52, 32, 64)
+ );
+ var leftLegMesh = new THREE.Mesh(leftLegBox, layer1Material);
+ this.leftLeg.add(leftLegMesh);
+
+ var leftLeg2Box = new THREE.BoxGeometry(4.5, 13.5, 4.5, 0, 0, 0);
+ addVertices(leftLeg2Box,
+ toSkinVertices(4, 48, 8, 52),
+ toSkinVertices(8, 48, 12, 52),
+ toSkinVertices(0, 52, 4, 64),
+ toSkinVertices(4, 52, 8, 64),
+ toSkinVertices(8, 52, 12, 64),
+ toSkinVertices(12, 52, 16, 64)
+ );
+ var leftLeg2Mesh = new THREE.Mesh(leftLeg2Box, layer2Material);
+ leftLeg2Mesh.renderOrder = 1;
+ this.leftLeg.add(leftLeg2Mesh);
+
+ this.leftLeg.position.y = -22;
+ this.leftLeg.position.x = 2;
+ this.add(this.leftLeg);
+ }
+ }
+
+ this.CapeObject = class extends THREE.Group {
+ constructor(capeMaterial) {
+ super();
+
+ // back = outside
+ // front = inside
+ var capeBox = new THREE.BoxGeometry(10, 16, 1, 0, 0, 0);
+ addVertices(capeBox,
+ toCapeVertices(1, 0, 11, 1),
+ toCapeVertices(11, 0, 21, 1),
+ toCapeVertices(11, 1, 12, 17),
+ toCapeVertices(12, 1, 22, 17),
+ toCapeVertices(0, 1, 1, 17),
+ toCapeVertices(1, 1, 11, 17)
+ );
+ this.cape = new THREE.Mesh(capeBox, capeMaterial);
+ this.cape.position.y = -8;
+ this.cape.position.z = -0.5;
+ this.add(this.cape);
+ }
+ }
+
+ this.PlayerObject = class extends THREE.Group {
+ constructor(isSlim, layer1Material, layer2Material, capeMaterial){
+ super();
+
+ this.skin = new skinpreview3d.SkinObject(isSlim, layer1Material, layer2Material);
+ this.skin.visible = false;
+ this.add(this.skin);
+
+ this.cape = new skinpreview3d.CapeObject(capeMaterial);
+ this.cape.position.z = -2;
+ this.cape.position.y = -4;
+ this.cape.rotation.x = 25*Math.PI/180;
+ this.cape.visible = false;
+ this.add(this.cape);
+ }
+ }
+
+ this.WalkAnimation = (player,time) => {
+ var skin = player.skin;
+ var angleRot = time + Math.PI/2;
+
+ // Leg Swing
+ skin.leftLeg.rotation.x = Math.cos(angleRot);
+ skin.leftLeg.position.z = 0 - 6*Math.sin(skin.leftLeg.rotation.x);
+ skin.leftLeg.position.y = -16 - 6*Math.abs(Math.cos(skin.leftLeg.rotation.x));
+ skin.rightLeg.rotation.x = Math.cos(angleRot + (Math.PI));
+ skin.rightLeg.position.z = 0 - 6*Math.sin(skin.rightLeg.rotation.x);
+ skin.rightLeg.position.y = -16 - 6*Math.abs(Math.cos(skin.rightLeg.rotation.x));
+
+ // Arm Swing
+ skin.leftArm.rotation.x = Math.cos(angleRot + (Math.PI));
+ skin.leftArm.position.z = 0 - 6*Math.sin(skin.leftArm.rotation.x);
+ skin.leftArm.position.y = -4 - 6*Math.abs(Math.cos(skin.leftArm.rotation.x));
+ skin.rightArm.rotation.x = Math.cos(angleRot);
+ skin.rightArm.position.z = 0 - 6*Math.sin(skin.rightArm.rotation.x);
+ skin.rightArm.position.y = -4 - 6*Math.abs(Math.cos(skin.rightArm.rotation.x));
+ }
+
this.SkinViewer = function(options){
this.domElement = options.domElement;
this.slim = options.slim || false;
+ this.animation = options.animation || null;
var angleRot = 0;
- var skinInitialized = false;
- var capeInitialized = false;
var skinImg = new Image();
var skinCanvas = document.createElement('canvas');
@@ -110,24 +411,9 @@ var skinpreview3d = new function(){
var layer2Material = new THREE.MeshBasicMaterial({map: skinTexture, transparent: true, opacity: 1, side: THREE.DoubleSide});
var capeMaterial = new THREE.MeshBasicMaterial({map: capeTexture});
- var capePivot;
-
- var headBox, headMesh,
- bodyBox, bodyMesh,
- rightArmBox, rightArmMesh,
- leftArmBox, leftArmMesh,
- rightLegBox, rightLegMesh,
- leftLegBox, leftLegMesh,
- head2Box, head2Mesh,
- body2Box, body2Mesh,
- rightArm2Box, rightArm2Mesh,
- leftArm2Box, leftArm2Mesh,
- rightLeg2Box, rightLeg2Mesh,
- leftLeg2Box, leftLeg2Mesh,
- capeBox, capeMesh;
-
this.animationPaused = false;
this.animationSpeed = 3;
+ this.animationTime = 0;
this.scene = new THREE.Scene();
@@ -140,6 +426,9 @@ var skinpreview3d = new function(){
this.renderer.context.getShaderInfoLog = () => ''; // shut firefox up
this.domElement.appendChild(this.renderer.domElement);
+ this.playerObject = new skinpreview3d.PlayerObject(this.slim, layer1Material, layer2Material, capeMaterial);
+ this.scene.add(this.playerObject);
+
var setSize = (width,height) => {
this.camera.aspect = width / height;
this.camera.updateProjectionMatrix();
@@ -165,243 +454,6 @@ var skinpreview3d = new function(){
}
});
- var initializeSkin = () => {
- var isSlim = this.slim;
-
- // Head Parts
- headBox = new THREE.BoxGeometry(8, 8, 8, 0, 0, 0);
- addVertices(headBox,
- toSkinVertices(8, 0, 16, 8),
- toSkinVertices(16, 0, 24, 8),
- toSkinVertices(0, 8, 8, 16),
- toSkinVertices(8, 8, 16, 16),
- toSkinVertices(16, 8, 24, 16),
- toSkinVertices(24, 8, 32, 16)
- );
- headMesh = new THREE.Mesh(headBox, layer1Material);
- headMesh.name = 'head';
- this.scene.add(headMesh);
-
- // Body Parts
- bodyBox = new THREE.BoxGeometry(8, 12, 4, 0, 0, 0);
- addVertices(bodyBox,
- toSkinVertices(20, 16, 28, 20),
- toSkinVertices(28, 16, 36, 20),
- toSkinVertices(16, 20, 20, 32),
- toSkinVertices(20, 20, 28, 32),
- toSkinVertices(28, 20, 32, 32),
- toSkinVertices(32, 20, 40, 32)
- );
- bodyMesh = new THREE.Mesh(bodyBox, layer1Material);
- bodyMesh.name = 'body';
- bodyMesh.position.y = -10;
- this.scene.add(bodyMesh);
-
- // Right Arm Parts
- rightArmBox = new THREE.BoxGeometry(isSlim?3:4, 12, 4, 0, 0, 0);
- if (isSlim) {
- addVertices(rightArmBox,
- toSkinVertices(44, 16, 47, 20),
- toSkinVertices(47, 16, 50, 20),
- toSkinVertices(40, 20, 44, 32),
- toSkinVertices(44, 20, 47, 32),
- toSkinVertices(47, 20, 51, 32),
- toSkinVertices(51, 20, 54, 32)
- );
- } else {
- addVertices(rightArmBox,
- toSkinVertices(44, 16, 48, 20),
- toSkinVertices(48, 16, 52, 20),
- toSkinVertices(40, 20, 44, 32),
- toSkinVertices(44, 20, 48, 32),
- toSkinVertices(48, 20, 52, 32),
- toSkinVertices(52, 20, 56, 32)
- );
- }
- rightArmMesh = new THREE.Mesh(rightArmBox, layer1Material);
- rightArmMesh.name = 'rightArm';
- rightArmMesh.position.y = -10;
- rightArmMesh.position.x = isSlim?-5.5:-6;
- this.scene.add(rightArmMesh);
-
- // Left Arm Parts
- leftArmBox = new THREE.BoxGeometry(isSlim?3:4, 12, 4, 0, 0, 0);
- if (isSlim) {
- addVertices(leftArmBox,
- toSkinVertices(36, 48, 39, 52),
- toSkinVertices(39, 48, 42, 52),
- toSkinVertices(32, 52, 36, 64),
- toSkinVertices(36, 52, 39, 64),
- toSkinVertices(39, 52, 43, 64),
- toSkinVertices(43, 52, 46, 64)
- );
- } else {
- addVertices(leftArmBox,
- toSkinVertices(36, 48, 40, 52),
- toSkinVertices(40, 48, 44, 52),
- toSkinVertices(32, 52, 36, 64),
- toSkinVertices(36, 52, 40, 64),
- toSkinVertices(40, 52, 44, 64),
- toSkinVertices(44, 52, 48, 64)
- );
- }
- leftArmMesh = new THREE.Mesh(leftArmBox, layer1Material);
- leftArmMesh.name = 'leftArm';
- leftArmMesh.position.y = -10;
- leftArmMesh.position.x = isSlim?5.5:6;
- this.scene.add(leftArmMesh);
-
- // Right Leg Parts
- rightLegBox = new THREE.BoxGeometry(4, 12, 4, 0, 0, 0);
- addVertices(rightLegBox,
- toSkinVertices(4, 16, 8, 20),
- toSkinVertices(8, 16, 12, 20),
- toSkinVertices(0, 20, 4, 32),
- toSkinVertices(4, 20, 8, 32),
- toSkinVertices(8, 20, 12, 32),
- toSkinVertices(12, 20, 16, 32)
- );
- rightLegMesh = new THREE.Mesh(rightLegBox, layer1Material);
- rightLegMesh.name = 'rightLeg'
- rightLegMesh.position.y = -22;
- rightLegMesh.position.x = -2;
- this.scene.add(rightLegMesh);
-
- // Left Leg Parts
- leftLegBox = new THREE.BoxGeometry(4, 12, 4, 0, 0, 0);
- addVertices(leftLegBox,
- toSkinVertices(20, 48, 24, 52),
- toSkinVertices(24, 48, 28, 52),
- toSkinVertices(16, 52, 20, 64),
- toSkinVertices(20, 52, 24, 64),
- toSkinVertices(24, 52, 28, 64),
- toSkinVertices(28, 52, 32, 64)
- );
- leftLegMesh = new THREE.Mesh(leftLegBox, layer1Material);
- leftLegMesh.name = 'leftLeg';
- leftLegMesh.position.y = -22;
- leftLegMesh.position.x = 2;
- this.scene.add(leftLegMesh);
-
- // Head Overlay Parts
- head2Box = new THREE.BoxGeometry(9, 9, 9, 0, 0, 0);
- addVertices(head2Box,
- toSkinVertices(40, 0, 48, 8),
- toSkinVertices(48, 0, 56, 8),
- toSkinVertices(32, 8, 40, 16),
- toSkinVertices(40, 8, 48, 16),
- toSkinVertices(48, 8, 56, 16),
- toSkinVertices(56, 8, 64, 16)
- );
- head2Mesh = new THREE.Mesh(head2Box, layer2Material);
- head2Mesh.name = 'head2'
- this.scene.add(head2Mesh);
-
- // Body Overlay Parts
- body2Box = new THREE.BoxGeometry(9, 13.5, 4.5, 0, 0, 0);
- addVertices(body2Box,
- toSkinVertices(20, 32, 28, 36),
- toSkinVertices(28, 32, 36, 36),
- toSkinVertices(16, 36, 20, 48),
- toSkinVertices(20, 36, 28, 48),
- toSkinVertices(28, 36, 32, 48),
- toSkinVertices(32, 36, 40, 48)
- );
- body2Mesh = new THREE.Mesh(body2Box, layer2Material);
- body2Mesh.name = 'body2';
- body2Mesh.position.y = -10;
- this.scene.add(body2Mesh);
-
- // Right Arm Overlay Parts
- rightArm2Box = new THREE.BoxGeometry(isSlim?3.375:4.5, 13.5, 4.5, 0, 0, 0);
- if (isSlim) {
- addVertices(rightArm2Box,
- toSkinVertices(44, 32, 47, 36),
- toSkinVertices(47, 32, 50, 36),
- toSkinVertices(40, 36, 44, 48),
- toSkinVertices(44, 36, 47, 48),
- toSkinVertices(47, 36, 51, 48),
- toSkinVertices(51, 36, 54, 48)
- );
- } else {
- addVertices(rightArm2Box,
- toSkinVertices(44, 32, 48, 36),
- toSkinVertices(48, 32, 52, 36),
- toSkinVertices(40, 36, 44, 48),
- toSkinVertices(44, 36, 48, 48),
- toSkinVertices(48, 36, 52, 48),
- toSkinVertices(52, 36, 56, 48)
- );
- }
- rightArm2Mesh = new THREE.Mesh(rightArm2Box, layer2Material);
- rightArm2Mesh.name = 'rightArm2';
- rightArm2Mesh.position.y = -10;
- rightArm2Mesh.position.x = -6;
- this.scene.add(rightArm2Mesh);
-
- // Left Arm Overlay Parts
- leftArm2Box = new THREE.BoxGeometry(isSlim?3.375:4.5, 13.5, 4.5, 0, 0, 0);
- if (isSlim) {
- addVertices(leftArm2Box,
- toSkinVertices(52, 48, 55, 52),
- toSkinVertices(55, 48, 58, 52),
- toSkinVertices(48, 52, 52, 64),
- toSkinVertices(52, 52, 55, 64),
- toSkinVertices(55, 52, 59, 64),
- toSkinVertices(59, 52, 62, 64)
- );
- } else {
- addVertices(leftArm2Box,
- toSkinVertices(52, 48, 56, 52),
- toSkinVertices(56, 48, 60, 52),
- toSkinVertices(48, 52, 52, 64),
- toSkinVertices(52, 52, 56, 64),
- toSkinVertices(56, 52, 60, 64),
- toSkinVertices(60, 52, 64, 64)
- );
- }
- leftArm2Mesh = new THREE.Mesh(leftArm2Box, layer2Material);
- leftArm2Mesh.name = 'leftArm2';
- leftArm2Mesh.position.y = -10;
- leftArm2Mesh.position.x = 6;
- // leftArm2Mesh.visible = true;
- this.scene.add(leftArm2Mesh);
-
- // Right Leg Overlay Parts
- rightLeg2Box = new THREE.BoxGeometry(4.5, 13.5, 4.5, 0, 0, 0);
- addVertices(rightLeg2Box,
- toSkinVertices(4, 32, 8, 36),
- toSkinVertices(8, 32, 12, 36),
- toSkinVertices(0, 36, 4, 48),
- toSkinVertices(4, 36, 8, 48),
- toSkinVertices(8, 36, 12, 48),
- toSkinVertices(12, 36, 16, 48)
- );
- rightLeg2Mesh = new THREE.Mesh(rightLeg2Box, layer2Material);
- rightLeg2Mesh.name = 'rightLeg2'
- rightLeg2Mesh.position.y = -22;
- rightLeg2Mesh.position.x = -2;
- this.scene.add(rightLeg2Mesh);
-
- // Left Leg Overlay Parts
- leftLeg2Box = new THREE.BoxGeometry(4.5, 13.5, 4.5, 0, 0, 0);
- addVertices(leftLeg2Box,
- toSkinVertices(4, 48, 8, 52),
- toSkinVertices(8, 48, 12, 52),
- toSkinVertices(0, 52, 4, 64),
- toSkinVertices(4, 52, 8, 64),
- toSkinVertices(8, 52, 12, 64),
- toSkinVertices(12, 52, 16, 64)
- );
- leftLeg2Mesh = new THREE.Mesh(leftLeg2Box, layer2Material);
- leftLeg2Mesh.name = 'leftLeg2';
- leftLeg2Mesh.position.y = -22;
- leftLeg2Mesh.position.x = 2;
- this.scene.add(leftLeg2Mesh);
-
- skinInitialized = true;
- }
-
skinImg.crossOrigin = '';
skinImg.onload = () => {
var isOldFormat = false;
@@ -432,37 +484,10 @@ var skinpreview3d = new function(){
layer1Material.needsUpdate = true;
layer2Material.needsUpdate = true;
- if(!skinInitialized) {
- initializeSkin();
- }
+ this.playerObject.skin.visible = true;
};
skinImg.onerror = () => console.log('Failed loading ' + skinImg.src);
- var initializeCape = () => {
- // Cape Parts
- // back = outside
- // front = inside
- capeBox = new THREE.BoxGeometry(10, 16, 1, 0, 0, 0);
- addVertices(capeBox,
- toCapeVertices(1, 0, 11, 1),
- toCapeVertices(11, 0, 21, 1),
- toCapeVertices(11, 1, 12, 17),
- toCapeVertices(12, 1, 22, 17),
- toCapeVertices(0, 1, 1, 17),
- toCapeVertices(1, 1, 11, 17)
- );
- capeMesh = new THREE.Mesh(capeBox, capeMaterial);
- capeMesh.name = 'cape';
- capeMesh.position.y = -12.75;
- capeMesh.position.z = -0.55;
- capePivot = new THREE.Group();
- capePivot.rotation.x = 25 * (Math.PI/180);
- capePivot.add(capeMesh);
- this.scene.add(capePivot);
-
- capeInitialized = true;
- };
-
capeImg.crossOrigin = '';
capeImg.onload = () => {
if (capeImg.width !== 2*capeImg.height) {
@@ -478,41 +503,18 @@ var skinpreview3d = new function(){
capeTexture.needsUpdate = true;
capeMaterial.needsUpdate = true;
- if(!capeInitialized) {
- initializeCape();
- }
+ this.playerObject.cape.visible = true;
};
capeImg.onerror = () => console.log('Failed loading ' + capeImg.src);
- var startTime = Date.now();
var draw = () => {
requestAnimationFrame(draw);
- var time = (Date.now() - startTime)/1000;
-
- if(skinInitialized) {
- if(angleRot > 360)
- angleRot = 0;
-
- if(!this.animationPaused)
- angleRot += 0.01;
-
- //Leg Swing
- leftLeg2Mesh.rotation.x = leftLegMesh.rotation.x = Math.cos(angleRot*this.animationSpeed);
- leftLeg2Mesh.position.z = leftLegMesh.position.z = 0 - 6*Math.sin(leftLegMesh.rotation.x);
- leftLeg2Mesh.position.y = leftLegMesh.position.y = -16 - 6*Math.abs(Math.cos(leftLegMesh.rotation.x));
- rightLeg2Mesh.rotation.x = rightLegMesh.rotation.x = Math.cos(angleRot*this.animationSpeed + (Math.PI));
- rightLeg2Mesh.position.z = rightLegMesh.position.z = 0 - 6*Math.sin(rightLegMesh.rotation.x);
- rightLeg2Mesh.position.y = rightLegMesh.position.y = -16 - 6*Math.abs(Math.cos(rightLegMesh.rotation.x));
-
- //Arm Swing
- leftArm2Mesh.rotation.x = leftArmMesh.rotation.x = Math.cos(angleRot*this.animationSpeed + (Math.PI));
- leftArm2Mesh.position.z = leftArmMesh.position.z = 0 - 6*Math.sin(leftArmMesh.rotation.x);
- leftArm2Mesh.position.y = leftArmMesh.position.y = -4 - 6*Math.abs(Math.cos(leftArmMesh.rotation.x));
- rightArm2Mesh.rotation.x = rightArmMesh.rotation.x = Math.cos(angleRot*this.animationSpeed);
- rightArm2Mesh.position.z = rightArmMesh.position.z = 0 - 6*Math.sin(rightArmMesh.rotation.x);
- rightArm2Mesh.position.y = rightArmMesh.position.y = -4 - 6*Math.abs(Math.cos(rightArmMesh.rotation.x));
+ if(!this.animationPaused){
+ this.animationTime++;
+ if(this.animation){
+ this.animation(this.playerObject,this.animationTime/100*this.animationSpeed);
+ }
}
-
this.renderer.render(this.scene, this.camera);
}
draw();