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

customizable motions(wip)

This commit is contained in:
yushijinhun 2017-09-09 22:47:39 +08:00
parent 1635b808e9
commit d10f3adf3a
No known key found for this signature in database
GPG Key ID: 5BC167F73EA558E4
3 changed files with 318 additions and 314 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
example_jquery.html
View File

@ -19,7 +19,8 @@
slim: true,
// disableControl: true, // This disables the mouse control feature
width: 600,
height: 600
height: 600,
animation: skinpreview3d.WalkAnimation
});
});
</script>

3
example_purejs.html
View File

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

626
js/skinpreview3d.js
View File

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