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

Merge pull request #24 from yushijinhun/dynamic-model 

Allow model to be changed at runtime
This commit is contained in:
Haowei Wen 2018-07-04 18:55:25 +08:00 committed by GitHub
parent 0cb69fda3e df3be7ab51
commit 1ed8eadd6a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 144 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

237
src/model.js
View File

@ -17,7 +17,7 @@ function toCapeVertices(x1, y1, x2, y2) {
return toFaceVertices(x1, y1, x2, y2, 64.0, 32.0); return toFaceVertices(x1, y1, x2, y2, 64.0, 32.0);
} }
function addVertices(box, top, bottom, left, front, right, back) { function setVertices(box, top, bottom, left, front, right, back) {
box.faceVertexUvs[0] = []; box.faceVertexUvs[0] = [];
box.faceVertexUvs[0][0] = [right[3], right[0], right[2]]; box.faceVertexUvs[0][0] = [right[3], right[0], right[2]];
box.faceVertexUvs[0][1] = [right[0], right[1], right[2]]; box.faceVertexUvs[0][1] = [right[0], right[1], right[2]];
@ -36,16 +36,16 @@ function addVertices(box, top, bottom, left, front, right, back) {
const esp = 0.002; const esp = 0.002;
class SkinObject extends THREE.Group { class SkinObject extends THREE.Group {
constructor(slim, layer1Material, layer2Material) { constructor(layer1Material, layer2Material) {
super(); super();
this.slim = slim; this.modelListeners = []; // called when model(slim property) is changed
// Head // Head
this.head = new THREE.Group(); this.head = new THREE.Group();
let headBox = new THREE.BoxGeometry(8, 8, 8, 0, 0, 0); let headBox = new THREE.BoxGeometry(8, 8, 8, 0, 0, 0);
addVertices(headBox, setVertices(headBox,
toSkinVertices(8, 0, 16, 8), toSkinVertices(8, 0, 16, 8),
toSkinVertices(16, 0, 24, 8), toSkinVertices(16, 0, 24, 8),
toSkinVertices(0, 8, 8, 16), toSkinVertices(0, 8, 8, 16),
@ -57,7 +57,7 @@ class SkinObject extends THREE.Group {
this.head.add(headMesh); this.head.add(headMesh);
let head2Box = new THREE.BoxGeometry(9, 9, 9, 0, 0, 0); let head2Box = new THREE.BoxGeometry(9, 9, 9, 0, 0, 0);
addVertices(head2Box, setVertices(head2Box,
toSkinVertices(40, 0, 48, 8), toSkinVertices(40, 0, 48, 8),
toSkinVertices(48, 0, 56, 8), toSkinVertices(48, 0, 56, 8),
toSkinVertices(32, 8, 40, 16), toSkinVertices(32, 8, 40, 16),
@ -76,7 +76,7 @@ class SkinObject extends THREE.Group {
this.body = new THREE.Group(); this.body = new THREE.Group();
let bodyBox = new THREE.BoxGeometry(8, 12, 4, 0, 0, 0); let bodyBox = new THREE.BoxGeometry(8, 12, 4, 0, 0, 0);
addVertices(bodyBox, setVertices(bodyBox,
toSkinVertices(20, 16, 28, 20), toSkinVertices(20, 16, 28, 20),
toSkinVertices(28, 16, 36, 20), toSkinVertices(28, 16, 36, 20),
toSkinVertices(16, 20, 20, 32), toSkinVertices(16, 20, 20, 32),
@ -88,7 +88,7 @@ class SkinObject extends THREE.Group {
this.body.add(bodyMesh); this.body.add(bodyMesh);
let body2Box = new THREE.BoxGeometry(9, 13.5, 4.5, 0, 0, 0); let body2Box = new THREE.BoxGeometry(9, 13.5, 4.5, 0, 0, 0);
addVertices(body2Box, setVertices(body2Box,
toSkinVertices(20, 32, 28, 36), toSkinVertices(20, 32, 28, 36),
toSkinVertices(28, 32, 36, 36), toSkinVertices(28, 32, 36, 36),
toSkinVertices(16, 36, 20, 48), toSkinVertices(16, 36, 20, 48),
@ -107,57 +107,73 @@ class SkinObject extends THREE.Group {
this.rightArm = new THREE.Group(); this.rightArm = new THREE.Group();
let rightArmPivot = new THREE.Group(); let rightArmPivot = new THREE.Group();
let rightArmBox = new THREE.BoxGeometry((slim ? 3 : 4) - esp, 12 - esp, 4 - esp, 0, 0, 0); let rightArmBox = new THREE.BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related
if (slim) {
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)
);
}
let rightArmMesh = new THREE.Mesh(rightArmBox, layer1Material); let rightArmMesh = new THREE.Mesh(rightArmBox, layer1Material);
rightArmPivot.add(rightArmMesh); rightArmPivot.add(rightArmMesh);
this.modelListeners.push(() => {
rightArmMesh.scale.x = (this.slim ? 3 : 4) - esp;
rightArmMesh.scale.y = 12 - esp;
rightArmMesh.scale.z = 4 - esp;
if (this.slim) {
setVertices(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 {
setVertices(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)
);
}
rightArmBox.uvsNeedUpdate = true;
rightArmBox.elementsNeedUpdate = true;
});
let rightArm2Box = new THREE.BoxGeometry((slim ? 3.375 : 4.5) - esp, 13.5 - esp, 4.5 - esp, 0, 0, 0); let rightArm2Box = new THREE.BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related
if (slim) {
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)
);
}
let rightArm2Mesh = new THREE.Mesh(rightArm2Box, layer2Material); let rightArm2Mesh = new THREE.Mesh(rightArm2Box, layer2Material);
rightArm2Mesh.renderOrder = 1; rightArm2Mesh.renderOrder = 1;
rightArmPivot.add(rightArm2Mesh); rightArmPivot.add(rightArm2Mesh);
this.modelListeners.push(() => {
rightArm2Mesh.scale.x = (this.slim ? 3.375 : 4.5) - esp;
rightArm2Mesh.scale.y = 13.5 - esp;
rightArm2Mesh.scale.z = 4.5 - esp;
if (this.slim) {
setVertices(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 {
setVertices(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)
);
}
rightArm2Box.uvsNeedUpdate = true;
rightArm2Box.elementsNeedUpdate = true;
});
rightArmPivot.position.y = -6; rightArmPivot.position.y = -6;
this.rightArm.add(rightArmPivot); this.rightArm.add(rightArmPivot);
this.rightArm.position.y = -4; this.rightArm.position.y = -4;
this.rightArm.position.x = slim ? -5.5 : -6; this.modelListeners.push(() => {
this.rightArm.position.x = this.slim ? -5.5 : -6;
});
this.add(this.rightArm); this.add(this.rightArm);
@ -165,57 +181,73 @@ class SkinObject extends THREE.Group {
this.leftArm = new THREE.Group(); this.leftArm = new THREE.Group();
let leftArmPivot = new THREE.Group(); let leftArmPivot = new THREE.Group();
let leftArmBox = new THREE.BoxGeometry((slim ? 3 : 4) - esp, 12 - esp, 4 - esp, 0, 0, 0); let leftArmBox = new THREE.BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related
if (slim) {
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)
);
}
let leftArmMesh = new THREE.Mesh(leftArmBox, layer1Material); let leftArmMesh = new THREE.Mesh(leftArmBox, layer1Material);
leftArmPivot.add(leftArmMesh); leftArmPivot.add(leftArmMesh);
this.modelListeners.push(() => {
leftArmMesh.scale.x = (this.slim ? 3 : 4) - esp;
leftArmMesh.scale.y = 12 - esp;
leftArmMesh.scale.z = 4 - esp;
if (this.slim) {
setVertices(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 {
setVertices(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)
);
}
leftArmBox.uvsNeedUpdate = true;
leftArmBox.elementsNeedUpdate=true;
});
let leftArm2Box = new THREE.BoxGeometry((slim ? 3.375 : 4.5) - esp, 13.5 - esp, 4.5 - esp, 0, 0, 0); let leftArm2Box = new THREE.BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related
if (slim) {
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)
);
}
let leftArm2Mesh = new THREE.Mesh(leftArm2Box, layer2Material); let leftArm2Mesh = new THREE.Mesh(leftArm2Box, layer2Material);
leftArm2Mesh.renderOrder = 1; leftArm2Mesh.renderOrder = 1;
leftArmPivot.add(leftArm2Mesh); leftArmPivot.add(leftArm2Mesh);
this.modelListeners.push(() => {
leftArm2Mesh.scale.x = (this.slim ? 3.375 : 4.5) - esp;
leftArm2Mesh.scale.y = 13.5 - esp;
leftArm2Mesh.scale.z = 4.5 - esp;
if (this.slim) {
setVertices(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 {
setVertices(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)
);
}
leftArm2Box.uvsNeedUpdate = true;
leftArm2Box.elementsNeedUpdate = true;
});
leftArmPivot.position.y = -6; leftArmPivot.position.y = -6;
this.leftArm.add(leftArmPivot); this.leftArm.add(leftArmPivot);
this.leftArm.position.y = -4; this.leftArm.position.y = -4;
this.leftArm.position.x = slim ? 5.5 : 6; this.modelListeners.push(() => {
this.leftArm.position.x = this.slim ? 5.5 : 6;
});
this.add(this.leftArm); this.add(this.leftArm);
@ -224,7 +256,7 @@ class SkinObject extends THREE.Group {
let rightLegPivot = new THREE.Group(); let rightLegPivot = new THREE.Group();
let rightLegBox = new THREE.BoxGeometry(4 - esp, 12 - esp, 4 - esp, 0, 0, 0); let rightLegBox = new THREE.BoxGeometry(4 - esp, 12 - esp, 4 - esp, 0, 0, 0);
addVertices(rightLegBox, setVertices(rightLegBox,
toSkinVertices(4, 16, 8, 20), toSkinVertices(4, 16, 8, 20),
toSkinVertices(8, 16, 12, 20), toSkinVertices(8, 16, 12, 20),
toSkinVertices(0, 20, 4, 32), toSkinVertices(0, 20, 4, 32),
@ -236,7 +268,7 @@ class SkinObject extends THREE.Group {
rightLegPivot.add(rightLegMesh); rightLegPivot.add(rightLegMesh);
let rightLeg2Box = new THREE.BoxGeometry(4.5 - esp, 13.5 - esp, 4.5 - esp, 0, 0, 0); let rightLeg2Box = new THREE.BoxGeometry(4.5 - esp, 13.5 - esp, 4.5 - esp, 0, 0, 0);
addVertices(rightLeg2Box, setVertices(rightLeg2Box,
toSkinVertices(4, 32, 8, 36), toSkinVertices(4, 32, 8, 36),
toSkinVertices(8, 32, 12, 36), toSkinVertices(8, 32, 12, 36),
toSkinVertices(0, 36, 4, 48), toSkinVertices(0, 36, 4, 48),
@ -259,7 +291,7 @@ class SkinObject extends THREE.Group {
let leftLegPivot = new THREE.Group(); let leftLegPivot = new THREE.Group();
let leftLegBox = new THREE.BoxGeometry(4 - esp, 12 - esp, 4 - esp, 0, 0, 0); let leftLegBox = new THREE.BoxGeometry(4 - esp, 12 - esp, 4 - esp, 0, 0, 0);
addVertices(leftLegBox, setVertices(leftLegBox,
toSkinVertices(20, 48, 24, 52), toSkinVertices(20, 48, 24, 52),
toSkinVertices(24, 48, 28, 52), toSkinVertices(24, 48, 28, 52),
toSkinVertices(16, 52, 20, 64), toSkinVertices(16, 52, 20, 64),
@ -271,7 +303,7 @@ class SkinObject extends THREE.Group {
leftLegPivot.add(leftLegMesh); leftLegPivot.add(leftLegMesh);
let leftLeg2Box = new THREE.BoxGeometry(4.5 - esp, 13.5 - esp, 4.5 - esp, 0, 0, 0); let leftLeg2Box = new THREE.BoxGeometry(4.5 - esp, 13.5 - esp, 4.5 - esp, 0, 0, 0);
addVertices(leftLeg2Box, setVertices(leftLeg2Box,
toSkinVertices(4, 48, 8, 52), toSkinVertices(4, 48, 8, 52),
toSkinVertices(8, 48, 12, 52), toSkinVertices(8, 48, 12, 52),
toSkinVertices(0, 52, 4, 64), toSkinVertices(0, 52, 4, 64),
@ -288,6 +320,19 @@ class SkinObject extends THREE.Group {
this.leftLeg.position.y = -16; this.leftLeg.position.y = -16;
this.leftLeg.position.x = 2; this.leftLeg.position.x = 2;
this.add(this.leftLeg); this.add(this.leftLeg);
this.slim = false;
}
get slim() {
return this._slim;
}
set slim(value) {
if (this._slim !== value) {
this._slim = value;
this.modelListeners.forEach(listener => listener());
}
} }
} }
@ -298,7 +343,7 @@ class CapeObject extends THREE.Group {
// back = outside // back = outside
// front = inside // front = inside
let capeBox = new THREE.BoxGeometry(10, 16, 1, 0, 0, 0); let capeBox = new THREE.BoxGeometry(10, 16, 1, 0, 0, 0);
addVertices(capeBox, setVertices(capeBox,
toCapeVertices(1, 0, 11, 1), toCapeVertices(1, 0, 11, 1),
toCapeVertices(11, 0, 21, 1), toCapeVertices(11, 0, 21, 1),
toCapeVertices(11, 1, 12, 17), toCapeVertices(11, 1, 12, 17),
@ -314,10 +359,10 @@ class CapeObject extends THREE.Group {
} }
class PlayerObject extends THREE.Group { class PlayerObject extends THREE.Group {
constructor(slim, layer1Material, layer2Material, capeMaterial) { constructor(layer1Material, layer2Material, capeMaterial) {
super(); super();
this.skin = new SkinObject(slim, layer1Material, layer2Material); this.skin = new SkinObject(layer1Material, layer2Material);
this.skin.visible = false; this.skin.visible = false;
this.add(this.skin); this.add(this.skin);

3
src/viewer.js
View File

@ -90,7 +90,8 @@ class SkinViewer {
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 PlayerObject(options.slim === true, this.layer1Material, this.layer2Material, this.capeMaterial); this.playerObject = new PlayerObject(this.layer1Material, this.layer2Material, this.capeMaterial);
this.playerObject.skin.slim = options.slim === true;
this.scene.add(this.playerObject); this.scene.add(this.playerObject);
// texture loading // texture loading

4
types/model.d.ts vendored
View File

@ -1,7 +1,7 @@
import * as THREE from "three"; import * as THREE from "three";
export class SkinObject extends THREE.Group { export class SkinObject extends THREE.Group {
public readonly slim: boolean; public slim: boolean;
public readonly head: THREE.Group; public readonly head: THREE.Group;
public readonly body: THREE.Group; public readonly body: THREE.Group;
public readonly rightArm: THREE.Group; public readonly rightArm: THREE.Group;
@ -10,7 +10,6 @@ export class SkinObject extends THREE.Group {
public readonly leftLeg: THREE.Group; public readonly leftLeg: THREE.Group;
constructor( constructor(
slim: boolean,
layer1Material: THREE.Material, layer1Material: THREE.Material,
layer2Material: THREE.Material, layer2Material: THREE.Material,
); );
@ -27,7 +26,6 @@ export class PlayerObject extends THREE.Group {
public readonly cape: CapeObject; public readonly cape: CapeObject;
constructor( constructor(
slim: boolean,
layer1Material: THREE.Material, layer1Material: THREE.Material,
layer2Material: THREE.Material, layer2Material: THREE.Material,
capeMaterial: THREE.Material, capeMaterial: THREE.Material,