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

wrap legs/arms with group to make animation easier

This commit is contained in:
yushijinhun 2017-09-10 12:41:41 +08:00
parent f5aa4572a2
commit 171fa67a6e
No known key found for this signature in database
GPG Key ID: 5BC167F73EA558E4
1 changed files with 24 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
js/skinpreview3d.js
View File

@ -154,6 +154,7 @@ var skinpreview3d = new function(){
// Right Arm // Right Arm
this.rightArm = new THREE.Group(); this.rightArm = new THREE.Group();
var rightArmPivot = new THREE.Group();
var rightArmBox = new THREE.BoxGeometry((isSlim?3:4)-esp, 12-esp, 4-esp, 0, 0, 0); var rightArmBox = new THREE.BoxGeometry((isSlim?3:4)-esp, 12-esp, 4-esp, 0, 0, 0);
if (isSlim) { if (isSlim) {
@ -176,7 +177,7 @@ var skinpreview3d = new function(){
); );
} }
var rightArmMesh = new THREE.Mesh(rightArmBox, layer1Material); var rightArmMesh = new THREE.Mesh(rightArmBox, layer1Material);
this.rightArm.add(rightArmMesh); rightArmPivot.add(rightArmMesh);
var rightArm2Box = new THREE.BoxGeometry((isSlim?3.375:4.5)-esp, 13.5-esp, 4.5-esp, 0, 0, 0); var rightArm2Box = new THREE.BoxGeometry((isSlim?3.375:4.5)-esp, 13.5-esp, 4.5-esp, 0, 0, 0);
if (isSlim) { if (isSlim) {
@ -200,15 +201,18 @@ var skinpreview3d = new function(){
} }
var rightArm2Mesh = new THREE.Mesh(rightArm2Box, layer2Material); var rightArm2Mesh = new THREE.Mesh(rightArm2Box, layer2Material);
rightArm2Mesh.renderOrder = 1; rightArm2Mesh.renderOrder = 1;
this.rightArm.add(rightArm2Mesh); rightArmPivot.add(rightArm2Mesh);
this.rightArm.position.y = -10; rightArmPivot.position.y = -6;
this.rightArm.add(rightArmPivot);
this.rightArm.position.y = -4;
this.rightArm.position.x = isSlim?-5.5:-6; this.rightArm.position.x = isSlim?-5.5:-6;
this.add(this.rightArm); this.add(this.rightArm);
// Left Arm // Left Arm
this.leftArm = new THREE.Group(); this.leftArm = new THREE.Group();
var leftArmPivot = new THREE.Group();
var leftArmBox = new THREE.BoxGeometry((isSlim?3:4)-esp, 12-esp, 4-esp, 0, 0, 0); var leftArmBox = new THREE.BoxGeometry((isSlim?3:4)-esp, 12-esp, 4-esp, 0, 0, 0);
if (isSlim) { if (isSlim) {
@ -231,7 +235,7 @@ var skinpreview3d = new function(){
); );
} }
var leftArmMesh = new THREE.Mesh(leftArmBox, layer1Material); var leftArmMesh = new THREE.Mesh(leftArmBox, layer1Material);
this.leftArm.add(leftArmMesh); leftArmPivot.add(leftArmMesh);
var leftArm2Box = new THREE.BoxGeometry((isSlim?3.375:4.5)-esp, 13.5-esp, 4.5-esp, 0, 0, 0); var leftArm2Box = new THREE.BoxGeometry((isSlim?3.375:4.5)-esp, 13.5-esp, 4.5-esp, 0, 0, 0);
if (isSlim) { if (isSlim) {
@ -255,15 +259,18 @@ var skinpreview3d = new function(){
} }
var leftArm2Mesh = new THREE.Mesh(leftArm2Box, layer2Material); var leftArm2Mesh = new THREE.Mesh(leftArm2Box, layer2Material);
leftArm2Mesh.renderOrder = 1; leftArm2Mesh.renderOrder = 1;
this.leftArm.add(leftArm2Mesh); leftArmPivot.add(leftArm2Mesh);
this.leftArm.position.y = -10; leftArmPivot.position.y = -6;
this.leftArm.add(leftArmPivot);
this.leftArm.position.y = -4;
this.leftArm.position.x = isSlim?5.5:6; this.leftArm.position.x = isSlim?5.5:6;
this.add(this.leftArm); this.add(this.leftArm);
// Right Leg // Right Leg
this.rightLeg = new THREE.Group(); this.rightLeg = new THREE.Group();
var rightLegPivot = new THREE.Group();
var rightLegBox = new THREE.BoxGeometry(4-esp, 12-esp, 4-esp, 0, 0, 0); var rightLegBox = new THREE.BoxGeometry(4-esp, 12-esp, 4-esp, 0, 0, 0);
addVertices(rightLegBox, addVertices(rightLegBox,
@ -275,7 +282,7 @@ var skinpreview3d = new function(){
toSkinVertices(12, 20, 16, 32) toSkinVertices(12, 20, 16, 32)
); );
var rightLegMesh = new THREE.Mesh(rightLegBox, layer1Material); var rightLegMesh = new THREE.Mesh(rightLegBox, layer1Material);
this.rightLeg.add(rightLegMesh); rightLegPivot.add(rightLegMesh);
var rightLeg2Box = new THREE.BoxGeometry(4.5-esp, 13.5-esp, 4.5-esp, 0, 0, 0); var rightLeg2Box = new THREE.BoxGeometry(4.5-esp, 13.5-esp, 4.5-esp, 0, 0, 0);
addVertices(rightLeg2Box, addVertices(rightLeg2Box,
@ -288,14 +295,17 @@ var skinpreview3d = new function(){
); );
var rightLeg2Mesh = new THREE.Mesh(rightLeg2Box, layer2Material); var rightLeg2Mesh = new THREE.Mesh(rightLeg2Box, layer2Material);
rightLeg2Mesh.renderOrder = 1; rightLeg2Mesh.renderOrder = 1;
this.rightLeg.add(rightLeg2Mesh); rightLegPivot.add(rightLeg2Mesh);
this.rightLeg.position.y = -22; rightLegPivot.position.y = -6;
this.rightLeg.add(rightLegPivot);
this.rightLeg.position.y = -16;
this.rightLeg.position.x = -2; this.rightLeg.position.x = -2;
this.add(this.rightLeg); this.add(this.rightLeg);
// Left Leg // Left Leg
this.leftLeg = new THREE.Group(); this.leftLeg = new THREE.Group();
var leftLegPivot = new THREE.Group();
var leftLegBox = new THREE.BoxGeometry(4-esp, 12-esp, 4-esp, 0, 0, 0); var leftLegBox = new THREE.BoxGeometry(4-esp, 12-esp, 4-esp, 0, 0, 0);
addVertices(leftLegBox, addVertices(leftLegBox,
@ -307,7 +317,7 @@ var skinpreview3d = new function(){
toSkinVertices(28, 52, 32, 64) toSkinVertices(28, 52, 32, 64)
); );
var leftLegMesh = new THREE.Mesh(leftLegBox, layer1Material); var leftLegMesh = new THREE.Mesh(leftLegBox, layer1Material);
this.leftLeg.add(leftLegMesh); leftLegPivot.add(leftLegMesh);
var leftLeg2Box = new THREE.BoxGeometry(4.5-esp, 13.5-esp, 4.5-esp, 0, 0, 0); var leftLeg2Box = new THREE.BoxGeometry(4.5-esp, 13.5-esp, 4.5-esp, 0, 0, 0);
addVertices(leftLeg2Box, addVertices(leftLeg2Box,
@ -320,9 +330,11 @@ var skinpreview3d = new function(){
); );
var leftLeg2Mesh = new THREE.Mesh(leftLeg2Box, layer2Material); var leftLeg2Mesh = new THREE.Mesh(leftLeg2Box, layer2Material);
leftLeg2Mesh.renderOrder = 1; leftLeg2Mesh.renderOrder = 1;
this.leftLeg.add(leftLeg2Mesh); leftLegPivot.add(leftLeg2Mesh);
this.leftLeg.position.y = -22; leftLegPivot.position.y = -6;
this.leftLeg.add(leftLegPivot);
this.leftLeg.position.y = -16;
this.leftLeg.position.x = 2; this.leftLeg.position.x = 2;
this.add(this.leftLeg); this.add(this.leftLeg);
} }
@ -373,19 +385,11 @@ var skinpreview3d = new function(){
// Leg Swing // Leg Swing
skin.leftLeg.rotation.x = Math.cos(angleRot); 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.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 // Arm Swing
skin.leftArm.rotation.x = Math.cos(angleRot + (Math.PI)); 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.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){
@ -393,8 +397,6 @@ var skinpreview3d = new function(){
this.slim = options.slim || false; this.slim = options.slim || false;
this.animation = options.animation || null; this.animation = options.animation || null;
var angleRot = 0;
var skinImg = new Image(); var skinImg = new Image();
var skinCanvas = document.createElement('canvas'); var skinCanvas = document.createElement('canvas');
var skinContext = skinCanvas.getContext('2d'); var skinContext = skinCanvas.getContext('2d');