From 0a8dafff4e3c674793c3c6f61772dffe0f5c8699 Mon Sep 17 00:00:00 2001 From: yushijinhun Date: Mon, 2 Jul 2018 14:54:49 +0800 Subject: [PATCH 1/2] Rename addVertices -> setVertices --- src/model.js | 36 ++++++++++++++++++------------------ 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/src/model.js b/src/model.js index 6536fe5..a4a3170 100644 --- a/src/model.js +++ b/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]]; @@ -45,7 +45,7 @@ class SkinObject extends THREE.Group { 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), @@ -109,7 +109,7 @@ class SkinObject extends THREE.Group { let rightArmBox = new THREE.BoxGeometry((slim ? 3 : 4) - esp, 12 - esp, 4 - esp, 0, 0, 0); if (slim) { - addVertices(rightArmBox, + setVertices(rightArmBox, toSkinVertices(44, 16, 47, 20), toSkinVertices(47, 16, 50, 20), toSkinVertices(40, 20, 44, 32), @@ -118,7 +118,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), @@ -132,7 +132,7 @@ class SkinObject extends THREE.Group { let rightArm2Box = new THREE.BoxGeometry((slim ? 3.375 : 4.5) - esp, 13.5 - esp, 4.5 - esp, 0, 0, 0); if (slim) { - addVertices(rightArm2Box, + setVertices(rightArm2Box, toSkinVertices(44, 32, 47, 36), toSkinVertices(47, 32, 50, 36), toSkinVertices(40, 36, 44, 48), @@ -141,7 +141,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), @@ -167,7 +167,7 @@ class SkinObject extends THREE.Group { let leftArmBox = new THREE.BoxGeometry((slim ? 3 : 4) - esp, 12 - esp, 4 - esp, 0, 0, 0); if (slim) { - addVertices(leftArmBox, + setVertices(leftArmBox, toSkinVertices(36, 48, 39, 52), toSkinVertices(39, 48, 42, 52), toSkinVertices(32, 52, 36, 64), @@ -176,7 +176,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), @@ -190,7 +190,7 @@ class SkinObject extends THREE.Group { let leftArm2Box = new THREE.BoxGeometry((slim ? 3.375 : 4.5) - esp, 13.5 - esp, 4.5 - esp, 0, 0, 0); if (slim) { - addVertices(leftArm2Box, + setVertices(leftArm2Box, toSkinVertices(52, 48, 55, 52), toSkinVertices(55, 48, 58, 52), toSkinVertices(48, 52, 52, 64), @@ -199,7 +199,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), @@ -224,7 +224,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 +236,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 +259,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 +271,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), @@ -298,7 +298,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), From df3be7ab5108ed424eec9390ecc44837e9dade93 Mon Sep 17 00:00:00 2001 From: yushijinhun Date: Mon, 2 Jul 2018 15:46:48 +0800 Subject: [PATCH 2/2] Allow model to be changed on the fly --- src/model.js | 217 ++++++++++++++++++++++++++++------------------- src/viewer.js | 3 +- types/model.d.ts | 4 +- 3 files changed, 134 insertions(+), 90 deletions(-) diff --git a/src/model.js b/src/model.js index a4a3170..691f732 100644 --- a/src/model.js +++ b/src/model.js @@ -36,10 +36,10 @@ function setVertices(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(); @@ -107,57 +107,73 @@ 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); - if (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) - ); - } + let rightArmBox = new THREE.BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related let rightArmMesh = new THREE.Mesh(rightArmBox, layer1Material); 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); - if (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) - ); - } + let rightArm2Box = new THREE.BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related let rightArm2Mesh = new THREE.Mesh(rightArm2Box, layer2Material); 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), + 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; 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,57 +181,73 @@ 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); - if (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) - ); - } + let leftArmBox = new THREE.BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related let leftArmMesh = new THREE.Mesh(leftArmBox, layer1Material); 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); - if (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) - ); - } + let leftArm2Box = new THREE.BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related let leftArm2Mesh = new THREE.Mesh(leftArm2Box, layer2Material); 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), + 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; 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); @@ -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()); + } } } @@ -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); diff --git a/src/viewer.js b/src/viewer.js index 7bff865..fd30c8c 100644 --- a/src/viewer.js +++ b/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 diff --git a/types/model.d.ts b/types/model.d.ts index 122170e..a8df4fc 100644 --- a/types/model.d.ts +++ b/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,