Merge pull request #24 from yushijinhun/dynamic-model

Allow model to be changed at runtime

src/model.js

@@ -17,7 +17,7 @@ function toCapeVertices(x1, y1, x2, y2) {
 	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][0] = [right[3], right[0], 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;
 
 class SkinObject extends THREE.Group {
-	constructor(slim, layer1Material, layer2Material) {
+	constructor(layer1Material, layer2Material) {
 		super();
 
-		this.slim = slim;
+		this.modelListeners = []; // called when model(slim property) is changed
 
 		// Head
 		this.head = new THREE.Group();
 
 		let headBox = new THREE.BoxGeometry(8, 8, 8, 0, 0, 0);
-		addVertices(headBox,
+		setVertices(headBox,
 			toSkinVertices(8, 0, 16, 8),
 			toSkinVertices(16, 0, 24, 8),
 			toSkinVertices(0, 8, 8, 16),
@@ -57,7 +57,7 @@ class SkinObject extends THREE.Group {
 		this.head.add(headMesh);
 
 		let head2Box = new THREE.BoxGeometry(9, 9, 9, 0, 0, 0);
-		addVertices(head2Box,
+		setVertices(head2Box,
 			toSkinVertices(40, 0, 48, 8),
 			toSkinVertices(48, 0, 56, 8),
 			toSkinVertices(32, 8, 40, 16),
@@ -76,7 +76,7 @@ class SkinObject extends THREE.Group {
 		this.body = new THREE.Group();
 
 		let bodyBox = new THREE.BoxGeometry(8, 12, 4, 0, 0, 0);
-		addVertices(bodyBox,
+		setVertices(bodyBox,
 			toSkinVertices(20, 16, 28, 20),
 			toSkinVertices(28, 16, 36, 20),
 			toSkinVertices(16, 20, 20, 32),
@@ -88,7 +88,7 @@ class SkinObject extends THREE.Group {
 		this.body.add(bodyMesh);
 
 		let body2Box = new THREE.BoxGeometry(9, 13.5, 4.5, 0, 0, 0);
-		addVertices(body2Box,
+		setVertices(body2Box,
 			toSkinVertices(20, 32, 28, 36),
 			toSkinVertices(28, 32, 36, 36),
 			toSkinVertices(16, 36, 20, 48),
@@ -107,9 +107,15 @@ class SkinObject extends THREE.Group {
 		this.rightArm = 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) {
+		let rightArmMesh = new THREE.Mesh(rightArmBox, layer1Material);
-			addVertices(rightArmBox,
+		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),
@@ -118,7 +124,7 @@ class SkinObject extends THREE.Group {
 					toSkinVertices(51, 20, 54, 32)
 				);
 			} else {
-			addVertices(rightArmBox,
+				setVertices(rightArmBox,
 					toSkinVertices(44, 16, 48, 20),
 					toSkinVertices(48, 16, 52, 20),
 					toSkinVertices(40, 20, 44, 32),
@@ -127,12 +133,20 @@ class SkinObject extends THREE.Group {
 					toSkinVertices(52, 20, 56, 32)
 				);
 			}
-		let rightArmMesh = new THREE.Mesh(rightArmBox, layer1Material);
+			rightArmBox.uvsNeedUpdate = true;
-		rightArmPivot.add(rightArmMesh);
+			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) {
+		let rightArm2Mesh = new THREE.Mesh(rightArm2Box, layer2Material);
-			addVertices(rightArm2Box,
+		rightArm2Mesh.renderOrder = 1;
+		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),
@@ -141,7 +155,7 @@ class SkinObject extends THREE.Group {
 					toSkinVertices(51, 36, 54, 48)
 				);
 			} else {
-			addVertices(rightArm2Box,
+				setVertices(rightArm2Box,
 					toSkinVertices(44, 32, 48, 36),
 					toSkinVertices(48, 32, 52, 36),
 					toSkinVertices(40, 36, 44, 48),
@@ -150,14 +164,16 @@ class SkinObject extends THREE.Group {
 					toSkinVertices(52, 36, 56, 48)
 				);
 			}
-		let rightArm2Mesh = new THREE.Mesh(rightArm2Box, layer2Material);
+			rightArm2Box.uvsNeedUpdate = true;
-		rightArm2Mesh.renderOrder = 1;
+			rightArm2Box.elementsNeedUpdate = true;
-		rightArmPivot.add(rightArm2Mesh);
+		});
 
 		rightArmPivot.position.y = -6;
 		this.rightArm.add(rightArmPivot);
 		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);
 
 
@@ -165,9 +181,15 @@ class SkinObject extends THREE.Group {
 		this.leftArm = 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) {
+		let leftArmMesh = new THREE.Mesh(leftArmBox, layer1Material);
-			addVertices(leftArmBox,
+		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),
@@ -176,7 +198,7 @@ class SkinObject extends THREE.Group {
 					toSkinVertices(43, 52, 46, 64)
 				);
 			} else {
-			addVertices(leftArmBox,
+				setVertices(leftArmBox,
 					toSkinVertices(36, 48, 40, 52),
 					toSkinVertices(40, 48, 44, 52),
 					toSkinVertices(32, 52, 36, 64),
@@ -185,12 +207,20 @@ class SkinObject extends THREE.Group {
 					toSkinVertices(44, 52, 48, 64)
 				);
 			}
-		let leftArmMesh = new THREE.Mesh(leftArmBox, layer1Material);
+			leftArmBox.uvsNeedUpdate = true;
-		leftArmPivot.add(leftArmMesh);
+			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) {
+		let leftArm2Mesh = new THREE.Mesh(leftArm2Box, layer2Material);
-			addVertices(leftArm2Box,
+		leftArm2Mesh.renderOrder = 1;
+		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),
@@ -199,7 +229,7 @@ class SkinObject extends THREE.Group {
 					toSkinVertices(59, 52, 62, 64)
 				);
 			} else {
-			addVertices(leftArm2Box,
+				setVertices(leftArm2Box,
 					toSkinVertices(52, 48, 56, 52),
 					toSkinVertices(56, 48, 60, 52),
 					toSkinVertices(48, 52, 52, 64),
@@ -208,14 +238,16 @@ class SkinObject extends THREE.Group {
 					toSkinVertices(60, 52, 64, 64)
 				);
 			}
-		let leftArm2Mesh = new THREE.Mesh(leftArm2Box, layer2Material);
+			leftArm2Box.uvsNeedUpdate = true;
-		leftArm2Mesh.renderOrder = 1;
+			leftArm2Box.elementsNeedUpdate = true;
-		leftArmPivot.add(leftArm2Mesh);
+		});
 
 		leftArmPivot.position.y = -6;
 		this.leftArm.add(leftArmPivot);
 		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);
 
 
@@ -224,7 +256,7 @@ class SkinObject extends THREE.Group {
 		let rightLegPivot = new THREE.Group();
 
 		let rightLegBox = new THREE.BoxGeometry(4 - esp, 12 - esp, 4 - esp, 0, 0, 0);
-		addVertices(rightLegBox,
+		setVertices(rightLegBox,
 			toSkinVertices(4, 16, 8, 20),
 			toSkinVertices(8, 16, 12, 20),
 			toSkinVertices(0, 20, 4, 32),
@@ -236,7 +268,7 @@ class SkinObject extends THREE.Group {
 		rightLegPivot.add(rightLegMesh);
 
 		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(8, 32, 12, 36),
 			toSkinVertices(0, 36, 4, 48),
@@ -259,7 +291,7 @@ class SkinObject extends THREE.Group {
 		let leftLegPivot = new THREE.Group();
 
 		let leftLegBox = new THREE.BoxGeometry(4 - esp, 12 - esp, 4 - esp, 0, 0, 0);
-		addVertices(leftLegBox,
+		setVertices(leftLegBox,
 			toSkinVertices(20, 48, 24, 52),
 			toSkinVertices(24, 48, 28, 52),
 			toSkinVertices(16, 52, 20, 64),
@@ -271,7 +303,7 @@ class SkinObject extends THREE.Group {
 		leftLegPivot.add(leftLegMesh);
 
 		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(8, 48, 12, 52),
 			toSkinVertices(0, 52, 4, 64),
@@ -288,6 +320,19 @@ class SkinObject extends THREE.Group {
 		this.leftLeg.position.y = -16;
 		this.leftLeg.position.x = 2;
 		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
 		// front = inside
 		let capeBox = new THREE.BoxGeometry(10, 16, 1, 0, 0, 0);
-		addVertices(capeBox,
+		setVertices(capeBox,
 			toCapeVertices(1, 0, 11, 1),
 			toCapeVertices(11, 0, 21, 1),
 			toCapeVertices(11, 1, 12, 17),
@@ -314,10 +359,10 @@ class CapeObject extends THREE.Group {
 }
 
 class PlayerObject extends THREE.Group {
-	constructor(slim, layer1Material, layer2Material, capeMaterial) {
+	constructor(layer1Material, layer2Material, capeMaterial) {
 		super();
 
-		this.skin = new SkinObject(slim, layer1Material, layer2Material);
+		this.skin = new SkinObject(layer1Material, layer2Material);
 		this.skin.visible = false;
 		this.add(this.skin);
 

src/viewer.js

@@ -90,7 +90,8 @@ class SkinViewer {
 		this.renderer.context.getShaderInfoLog = () => ""; // shut firefox up
 		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);
 
 		// texture loading

types/model.d.ts

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