customizable motions(wip)
This commit is contained in:
yushijinhun
parent
1635b808e9
commit
d10f3adf3a
|
|
@ -19,7 +19,8 @@
|
||||||
slim: true,
|
slim: true,
|
||||||
// disableControl: true, // This disables the mouse control feature
|
// disableControl: true, // This disables the mouse control feature
|
||||||
width: 600,
|
width: 600,
|
||||||
height: 600
|
height: 600,
|
||||||
|
animation: skinpreview3d.WalkAnimation
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -17,7 +17,8 @@
|
||||||
width: 600,
|
width: 600,
|
||||||
height: 600,
|
height: 600,
|
||||||
skinUrl: 'img/hatsune_miku.png',
|
skinUrl: 'img/hatsune_miku.png',
|
||||||
capeUrl: 'img/mojang_cape.png'
|
capeUrl: 'img/mojang_cape.png',
|
||||||
|
animation: skinpreview3d.WalkAnimation
|
||||||
});
|
});
|
||||||
|
|
||||||
// change the skin and cape
|
// change the skin and cape
|
||||||
|
|
|
||||||
|
|
@ -84,13 +84,314 @@ var skinpreview3d = new function(){
|
||||||
box.faceVertexUvs[0][11] = [back[0], back[1], back[2]];
|
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.SkinViewer = function(options){
|
||||||
this.domElement = options.domElement;
|
this.domElement = options.domElement;
|
||||||
this.slim = options.slim || false;
|
this.slim = options.slim || false;
|
||||||
|
this.animation = options.animation || null;
|
||||||
|
|
||||||
var angleRot = 0;
|
var angleRot = 0;
|
||||||
var skinInitialized = false;
|
|
||||||
var capeInitialized = false;
|
|
||||||
|
|
||||||
var skinImg = new Image();
|
var skinImg = new Image();
|
||||||
var skinCanvas = document.createElement('canvas');
|
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 layer2Material = new THREE.MeshBasicMaterial({map: skinTexture, transparent: true, opacity: 1, side: THREE.DoubleSide});
|
||||||
var capeMaterial = new THREE.MeshBasicMaterial({map: capeTexture});
|
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.animationPaused = false;
|
||||||
this.animationSpeed = 3;
|
this.animationSpeed = 3;
|
||||||
|
this.animationTime = 0;
|
||||||
|
|
||||||
this.scene = new THREE.Scene();
|
this.scene = new THREE.Scene();
|
||||||
|
|
||||||
|
|
@ -140,6 +426,9 @@ var skinpreview3d = new function(){
|
||||||
this.renderer.context.getShaderInfoLog = () => ''; // shut firefox up
|
this.renderer.context.getShaderInfoLog = () => ''; // shut firefox up
|
||||||
this.domElement.appendChild(this.renderer.domElement);
|
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) => {
|
var setSize = (width,height) => {
|
||||||
this.camera.aspect = width / height;
|
this.camera.aspect = width / height;
|
||||||
this.camera.updateProjectionMatrix();
|
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.crossOrigin = '';
|
||||||
skinImg.onload = () => {
|
skinImg.onload = () => {
|
||||||
var isOldFormat = false;
|
var isOldFormat = false;
|
||||||
|
|
@ -432,37 +484,10 @@ var skinpreview3d = new function(){
|
||||||
layer1Material.needsUpdate = true;
|
layer1Material.needsUpdate = true;
|
||||||
layer2Material.needsUpdate = true;
|
layer2Material.needsUpdate = true;
|
||||||
|
|
||||||
if(!skinInitialized) {
|
this.playerObject.skin.visible = true;
|
||||||
initializeSkin();
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
skinImg.onerror = () => console.log('Failed loading ' + skinImg.src);
|
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.crossOrigin = '';
|
||||||
capeImg.onload = () => {
|
capeImg.onload = () => {
|
||||||
if (capeImg.width !== 2*capeImg.height) {
|
if (capeImg.width !== 2*capeImg.height) {
|
||||||
|
|
@ -478,41 +503,18 @@ var skinpreview3d = new function(){
|
||||||
capeTexture.needsUpdate = true;
|
capeTexture.needsUpdate = true;
|
||||||
capeMaterial.needsUpdate = true;
|
capeMaterial.needsUpdate = true;
|
||||||
|
|
||||||
if(!capeInitialized) {
|
this.playerObject.cape.visible = true;
|
||||||
initializeCape();
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
capeImg.onerror = () => console.log('Failed loading ' + capeImg.src);
|
capeImg.onerror = () => console.log('Failed loading ' + capeImg.src);
|
||||||
|
|
||||||
var startTime = Date.now();
|
|
||||||
var draw = () => {
|
var draw = () => {
|
||||||
requestAnimationFrame(draw);
|
requestAnimationFrame(draw);
|
||||||
var time = (Date.now() - startTime)/1000;
|
if(!this.animationPaused){
|
||||||
|
this.animationTime++;
|
||||||
if(skinInitialized) {
|
if(this.animation){
|
||||||
if(angleRot > 360)
|
this.animation(this.playerObject,this.animationTime/100*this.animationSpeed);
|
||||||
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));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
this.renderer.render(this.scene, this.camera);
|
this.renderer.render(this.scene, this.camera);
|
||||||
}
|
}
|
||||||
draw();
|
draw();
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue