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

Revert "Merge remote-tracking branch 'ShirasawaSama/master'" 

This reverts commit 9f6017d14c, reversing
changes made to db1884e782.

This reverts #41.
This commit is contained in:
yushijinhun 2020-01-01 16:46:54 +08:00
parent acda22d0e4
commit 2f304996ae
No known key found for this signature in database
GPG Key ID: 5BC167F73EA558E4
7 changed files with 171 additions and 214 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
examples/index.html
View File

@ -19,7 +19,9 @@
<div id="skin_container"></div> <div id="skin_container"></div>
<script type="text/javascript" src="../dist/skinview3d.all.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/92/three.min.js"></script>
<script type="text/javascript" src="../dist/skinview3d.js"></script>
<script> <script>
let skinViewer = new skinview3d.SkinViewer({ let skinViewer = new skinview3d.SkinViewer({

97
rollup.config.js
View File

@ -3,73 +3,48 @@ import typescript from "rollup-plugin-typescript2";
import resolve from "@rollup/plugin-node-resolve"; import resolve from "@rollup/plugin-node-resolve";
import license from "rollup-plugin-license"; import license from "rollup-plugin-license";
const umd = { const base = {
format: "umd", input: "src/skinview3d.ts",
name: "skinview3d", output: [
indent: "\t", {
globals: { format: "umd",
"three": "THREE" name: "skinview3d",
} file: "dist/skinview3d.js",
}; indent: "\t",
globals: {
const es = { "three": "THREE"
format: "es", }
indent: "\t" },
}; {
format: "es",
const resolverPlugin = { file: "dist/skinview3d.module.js",
name: "resolver", indent: "\t"
resolveId: id => id.startsWith("three/src/") ? "three" : undefined }
}; ],
external: [
const licensePlugin = license({ "three"
banner: ` ],
plugins: [
resolve(),
typescript(),
license({
banner: `
skinview3d (https://github.com/bs-community/skinview3d) skinview3d (https://github.com/bs-community/skinview3d)
MIT License MIT License
` `
}); })
const base = {
input: "src/skinview3d.ts",
external: [
"three"
] ]
}; };
export default [ export default [
{ base,
...base, Object.assign({}, base, {
output: [ output: Object.assign({}, base.output[0], { file: "dist/skinview3d.min.js" }),
{ ...umd, file: "dist/skinview3d.js" }, plugins: (() => {
{ ...es, file: "dist/skinview3d.module.js" } const plugin = base.plugins.slice();
], plugin.splice(1, 0, terser());
plugins: [ return plugin;
resolverPlugin, })()
resolve(), })
typescript(),
licensePlugin
]
},
{
...base,
output: { ...umd, file: "dist/skinview3d.min.js" },
plugins: [
resolverPlugin,
resolve(),
typescript(),
terser(),
licensePlugin
]
},
{
...base,
output: { ...umd, file: "dist/skinview3d.all.js" },
plugins: [
resolve(),
typescript(),
terser(),
licensePlugin
]
}
]; ];

4
src/animation.ts
View File

@ -1,5 +1,5 @@
import { Clock } from "three/src/core/Clock";
import { PlayerObject } from "./model"; import { PlayerObject } from "./model";
import * as THREE from "three";
export interface IAnimation { export interface IAnimation {
play(player: PlayerObject, time: number): void; play(player: PlayerObject, time: number): void;
@ -102,7 +102,7 @@ export class CompositeAnimation implements IAnimation {
export class RootAnimation extends CompositeAnimation implements AnimationHandle { export class RootAnimation extends CompositeAnimation implements AnimationHandle {
speed: number = 1.0; speed: number = 1.0;
progress: number = 0.0; progress: number = 0.0;
readonly clock: Clock = new Clock(true); readonly clock: THREE.Clock = new THREE.Clock(true);
get animation() { get animation() {
return this; return this;

97
src/model.ts
View File

@ -1,16 +1,11 @@
import { Object3D } from "three/src/core/Object3D"; import * as THREE from "three";
import { BoxGeometry } from "three/src/geometries/BoxGeometry";
import { MeshBasicMaterial } from "three/src/materials/MeshBasicMaterial";
import { Vector2 } from "three/src/math/Vector2";
import { Group } from "three/src/objects/Group";
import { Mesh } from "three/src/objects/Mesh";
function toFaceVertices(x1: number, y1: number, x2: number, y2: number, w: number, h: number) { function toFaceVertices(x1: number, y1: number, x2: number, y2: number, w: number, h: number) {
return [ return [
new Vector2(x1 / w, 1.0 - y2 / h), new THREE.Vector2(x1 / w, 1.0 - y2 / h),
new Vector2(x2 / w, 1.0 - y2 / h), new THREE.Vector2(x2 / w, 1.0 - y2 / h),
new Vector2(x2 / w, 1.0 - y1 / h), new THREE.Vector2(x2 / w, 1.0 - y1 / h),
new Vector2(x1 / w, 1.0 - y1 / h) new THREE.Vector2(x1 / w, 1.0 - y1 / h)
]; ];
} }
@ -22,7 +17,7 @@ function toCapeVertices(x1: number, y1: number, x2: number, y2: number) {
return toFaceVertices(x1, y1, x2, y2, 64.0, 32.0); return toFaceVertices(x1, y1, x2, y2, 64.0, 32.0);
} }
function setVertices(box: BoxGeometry, top: Array<Vector2>, bottom: Array<Vector2>, left: Array<Vector2>, front: Array<Vector2>, right: Array<Vector2>, back: Array<Vector2>) { function setVertices(box: THREE.BoxGeometry, top: Array<THREE.Vector2>, bottom: Array<THREE.Vector2>, left: Array<THREE.Vector2>, front: Array<THREE.Vector2>, right: Array<THREE.Vector2>, back: Array<THREE.Vector2>) {
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]];
@ -44,10 +39,10 @@ const esp = 0.002;
/** /**
* Notice that innerLayer and outerLayer may NOT be the direct children of the Group. * Notice that innerLayer and outerLayer may NOT be the direct children of the Group.
*/ */
export class BodyPart extends Group { export class BodyPart extends THREE.Group {
constructor( constructor(
readonly innerLayer: Object3D, readonly innerLayer: THREE.Object3D,
readonly outerLayer: Object3D readonly outerLayer: THREE.Object3D
) { ) {
super(); super();
innerLayer.name = "inner"; innerLayer.name = "inner";
@ -55,7 +50,7 @@ export class BodyPart extends Group {
} }
} }
export class SkinObject extends Group { export class SkinObject extends THREE.Group {
// body parts // body parts
readonly head: BodyPart; readonly head: BodyPart;
@ -68,11 +63,11 @@ export class SkinObject extends Group {
private modelListeners: Array<() => void> = []; // called when model(slim property) is changed private modelListeners: Array<() => void> = []; // called when model(slim property) is changed
private _slim = false; private _slim = false;
constructor(layer1Material: MeshBasicMaterial, layer2Material: MeshBasicMaterial) { constructor(layer1Material: THREE.MeshBasicMaterial, layer2Material: THREE.MeshBasicMaterial) {
super(); super();
// Head // Head
const headBox = new BoxGeometry(8, 8, 8, 0, 0, 0); const headBox = new THREE.BoxGeometry(8, 8, 8, 0, 0, 0);
setVertices(headBox, setVertices(headBox,
toSkinVertices(8, 0, 16, 8), toSkinVertices(8, 0, 16, 8),
toSkinVertices(16, 0, 24, 8), toSkinVertices(16, 0, 24, 8),
@ -81,9 +76,9 @@ export class SkinObject extends Group {
toSkinVertices(16, 8, 24, 16), toSkinVertices(16, 8, 24, 16),
toSkinVertices(24, 8, 32, 16) toSkinVertices(24, 8, 32, 16)
); );
const headMesh = new Mesh(headBox, layer1Material); const headMesh = new THREE.Mesh(headBox, layer1Material);
const head2Box = new BoxGeometry(9, 9, 9, 0, 0, 0); const head2Box = new THREE.BoxGeometry(9, 9, 9, 0, 0, 0);
setVertices(head2Box, setVertices(head2Box,
toSkinVertices(40, 0, 48, 8), toSkinVertices(40, 0, 48, 8),
toSkinVertices(48, 0, 56, 8), toSkinVertices(48, 0, 56, 8),
@ -92,7 +87,7 @@ export class SkinObject extends Group {
toSkinVertices(48, 8, 56, 16), toSkinVertices(48, 8, 56, 16),
toSkinVertices(56, 8, 64, 16) toSkinVertices(56, 8, 64, 16)
); );
const head2Mesh = new Mesh(head2Box, layer2Material); const head2Mesh = new THREE.Mesh(head2Box, layer2Material);
head2Mesh.renderOrder = -1; head2Mesh.renderOrder = -1;
this.head = new BodyPart(headMesh, head2Mesh); this.head = new BodyPart(headMesh, head2Mesh);
@ -101,7 +96,7 @@ export class SkinObject extends Group {
this.add(this.head); this.add(this.head);
// Body // Body
const bodyBox = new BoxGeometry(8, 12, 4, 0, 0, 0); const bodyBox = new THREE.BoxGeometry(8, 12, 4, 0, 0, 0);
setVertices(bodyBox, setVertices(bodyBox,
toSkinVertices(20, 16, 28, 20), toSkinVertices(20, 16, 28, 20),
toSkinVertices(28, 16, 36, 20), toSkinVertices(28, 16, 36, 20),
@ -110,9 +105,9 @@ export class SkinObject extends Group {
toSkinVertices(28, 20, 32, 32), toSkinVertices(28, 20, 32, 32),
toSkinVertices(32, 20, 40, 32) toSkinVertices(32, 20, 40, 32)
); );
const bodyMesh = new Mesh(bodyBox, layer1Material); const bodyMesh = new THREE.Mesh(bodyBox, layer1Material);
const body2Box = new BoxGeometry(9, 13.5, 4.5, 0, 0, 0); const body2Box = new THREE.BoxGeometry(9, 13.5, 4.5, 0, 0, 0);
setVertices(body2Box, setVertices(body2Box,
toSkinVertices(20, 32, 28, 36), toSkinVertices(20, 32, 28, 36),
toSkinVertices(28, 32, 36, 36), toSkinVertices(28, 32, 36, 36),
@ -121,7 +116,7 @@ export class SkinObject extends Group {
toSkinVertices(28, 36, 32, 48), toSkinVertices(28, 36, 32, 48),
toSkinVertices(32, 36, 40, 48) toSkinVertices(32, 36, 40, 48)
); );
const body2Mesh = new Mesh(body2Box, layer2Material); const body2Mesh = new THREE.Mesh(body2Box, layer2Material);
this.body = new BodyPart(bodyMesh, body2Mesh); this.body = new BodyPart(bodyMesh, body2Mesh);
this.body.name = "body"; this.body.name = "body";
@ -130,8 +125,8 @@ export class SkinObject extends Group {
this.add(this.body); this.add(this.body);
// Right Arm // Right Arm
const rightArmBox = new BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related const rightArmBox = new THREE.BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related
const rightArmMesh = new Mesh(rightArmBox, layer1Material); const rightArmMesh = new THREE.Mesh(rightArmBox, layer1Material);
this.modelListeners.push(() => { this.modelListeners.push(() => {
rightArmMesh.scale.x = (this.slim ? 3 : 4) - esp; rightArmMesh.scale.x = (this.slim ? 3 : 4) - esp;
rightArmMesh.scale.y = 12 - esp; rightArmMesh.scale.y = 12 - esp;
@ -159,8 +154,8 @@ export class SkinObject extends Group {
rightArmBox.elementsNeedUpdate = true; rightArmBox.elementsNeedUpdate = true;
}); });
const rightArm2Box = new BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related const rightArm2Box = new THREE.BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related
const rightArm2Mesh = new Mesh(rightArm2Box, layer2Material); const rightArm2Mesh = new THREE.Mesh(rightArm2Box, layer2Material);
rightArm2Mesh.renderOrder = 1; rightArm2Mesh.renderOrder = 1;
this.modelListeners.push(() => { this.modelListeners.push(() => {
rightArm2Mesh.scale.x = (this.slim ? 3.375 : 4.5) - esp; rightArm2Mesh.scale.x = (this.slim ? 3.375 : 4.5) - esp;
@ -189,7 +184,7 @@ export class SkinObject extends Group {
rightArm2Box.elementsNeedUpdate = true; rightArm2Box.elementsNeedUpdate = true;
}); });
const rightArmPivot = new Group(); const rightArmPivot = new THREE.Group();
rightArmPivot.add(rightArmMesh, rightArm2Mesh); rightArmPivot.add(rightArmMesh, rightArm2Mesh);
rightArmPivot.position.y = -6; rightArmPivot.position.y = -6;
@ -203,8 +198,8 @@ export class SkinObject extends Group {
this.add(this.rightArm); this.add(this.rightArm);
// Left Arm // Left Arm
const leftArmBox = new BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related const leftArmBox = new THREE.BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related
const leftArmMesh = new Mesh(leftArmBox, layer1Material); const leftArmMesh = new THREE.Mesh(leftArmBox, layer1Material);
this.modelListeners.push(() => { this.modelListeners.push(() => {
leftArmMesh.scale.x = (this.slim ? 3 : 4) - esp; leftArmMesh.scale.x = (this.slim ? 3 : 4) - esp;
leftArmMesh.scale.y = 12 - esp; leftArmMesh.scale.y = 12 - esp;
@ -232,8 +227,8 @@ export class SkinObject extends Group {
leftArmBox.elementsNeedUpdate = true; leftArmBox.elementsNeedUpdate = true;
}); });
const leftArm2Box = new BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related const leftArm2Box = new THREE.BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related
const leftArm2Mesh = new Mesh(leftArm2Box, layer2Material); const leftArm2Mesh = new THREE.Mesh(leftArm2Box, layer2Material);
leftArm2Mesh.renderOrder = 1; leftArm2Mesh.renderOrder = 1;
this.modelListeners.push(() => { this.modelListeners.push(() => {
leftArm2Mesh.scale.x = (this.slim ? 3.375 : 4.5) - esp; leftArm2Mesh.scale.x = (this.slim ? 3.375 : 4.5) - esp;
@ -262,7 +257,7 @@ export class SkinObject extends Group {
leftArm2Box.elementsNeedUpdate = true; leftArm2Box.elementsNeedUpdate = true;
}); });
const leftArmPivot = new Group(); const leftArmPivot = new THREE.Group();
leftArmPivot.add(leftArmMesh, leftArm2Mesh); leftArmPivot.add(leftArmMesh, leftArm2Mesh);
leftArmPivot.position.y = -6; leftArmPivot.position.y = -6;
@ -276,7 +271,7 @@ export class SkinObject extends Group {
this.add(this.leftArm); this.add(this.leftArm);
// Right Leg // Right Leg
const rightLegBox = new BoxGeometry(4 - esp, 12 - esp, 4 - esp, 0, 0, 0); const rightLegBox = new THREE.BoxGeometry(4 - esp, 12 - esp, 4 - esp, 0, 0, 0);
setVertices(rightLegBox, setVertices(rightLegBox,
toSkinVertices(4, 16, 8, 20), toSkinVertices(4, 16, 8, 20),
toSkinVertices(8, 16, 12, 20), toSkinVertices(8, 16, 12, 20),
@ -285,9 +280,9 @@ export class SkinObject extends Group {
toSkinVertices(8, 20, 12, 32), toSkinVertices(8, 20, 12, 32),
toSkinVertices(12, 20, 16, 32) toSkinVertices(12, 20, 16, 32)
); );
const rightLegMesh = new Mesh(rightLegBox, layer1Material); const rightLegMesh = new THREE.Mesh(rightLegBox, layer1Material);
const rightLeg2Box = new BoxGeometry(4.5 - esp, 13.5 - esp, 4.5 - esp, 0, 0, 0); const rightLeg2Box = new THREE.BoxGeometry(4.5 - esp, 13.5 - esp, 4.5 - esp, 0, 0, 0);
setVertices(rightLeg2Box, setVertices(rightLeg2Box,
toSkinVertices(4, 32, 8, 36), toSkinVertices(4, 32, 8, 36),
toSkinVertices(8, 32, 12, 36), toSkinVertices(8, 32, 12, 36),
@ -296,10 +291,10 @@ export class SkinObject extends Group {
toSkinVertices(8, 36, 12, 48), toSkinVertices(8, 36, 12, 48),
toSkinVertices(12, 36, 16, 48) toSkinVertices(12, 36, 16, 48)
); );
const rightLeg2Mesh = new Mesh(rightLeg2Box, layer2Material); const rightLeg2Mesh = new THREE.Mesh(rightLeg2Box, layer2Material);
rightLeg2Mesh.renderOrder = 1; rightLeg2Mesh.renderOrder = 1;
const rightLegPivot = new Group(); const rightLegPivot = new THREE.Group();
rightLegPivot.add(rightLegMesh, rightLeg2Mesh); rightLegPivot.add(rightLegMesh, rightLeg2Mesh);
rightLegPivot.position.y = -6; rightLegPivot.position.y = -6;
@ -311,7 +306,7 @@ export class SkinObject extends Group {
this.add(this.rightLeg); this.add(this.rightLeg);
// Left Leg // Left Leg
const leftLegBox = new BoxGeometry(4 - esp, 12 - esp, 4 - esp, 0, 0, 0); const leftLegBox = new THREE.BoxGeometry(4 - esp, 12 - esp, 4 - esp, 0, 0, 0);
setVertices(leftLegBox, setVertices(leftLegBox,
toSkinVertices(20, 48, 24, 52), toSkinVertices(20, 48, 24, 52),
toSkinVertices(24, 48, 28, 52), toSkinVertices(24, 48, 28, 52),
@ -320,9 +315,9 @@ export class SkinObject extends Group {
toSkinVertices(24, 52, 28, 64), toSkinVertices(24, 52, 28, 64),
toSkinVertices(28, 52, 32, 64) toSkinVertices(28, 52, 32, 64)
); );
const leftLegMesh = new Mesh(leftLegBox, layer1Material); const leftLegMesh = new THREE.Mesh(leftLegBox, layer1Material);
const leftLeg2Box = new BoxGeometry(4.5 - esp, 13.5 - esp, 4.5 - esp, 0, 0, 0); const leftLeg2Box = new THREE.BoxGeometry(4.5 - esp, 13.5 - esp, 4.5 - esp, 0, 0, 0);
setVertices(leftLeg2Box, setVertices(leftLeg2Box,
toSkinVertices(4, 48, 8, 52), toSkinVertices(4, 48, 8, 52),
toSkinVertices(8, 48, 12, 52), toSkinVertices(8, 48, 12, 52),
@ -331,10 +326,10 @@ export class SkinObject extends Group {
toSkinVertices(8, 52, 12, 64), toSkinVertices(8, 52, 12, 64),
toSkinVertices(12, 52, 16, 64) toSkinVertices(12, 52, 16, 64)
); );
const leftLeg2Mesh = new Mesh(leftLeg2Box, layer2Material); const leftLeg2Mesh = new THREE.Mesh(leftLeg2Box, layer2Material);
leftLeg2Mesh.renderOrder = 1; leftLeg2Mesh.renderOrder = 1;
const leftLegPivot = new Group(); const leftLegPivot = new THREE.Group();
leftLegPivot.add(leftLegMesh, leftLeg2Mesh); leftLegPivot.add(leftLegMesh, leftLeg2Mesh);
leftLegPivot.position.y = -6; leftLegPivot.position.y = -6;
@ -370,16 +365,16 @@ export class SkinObject extends Group {
} }
} }
export class CapeObject extends Group { export class CapeObject extends THREE.Group {
readonly cape: Mesh; readonly cape: THREE.Mesh;
constructor(capeMaterial: MeshBasicMaterial) { constructor(capeMaterial: THREE.MeshBasicMaterial) {
super(); super();
// back = outside // back = outside
// front = inside // front = inside
const capeBox = new BoxGeometry(10, 16, 1, 0, 0, 0); const capeBox = new THREE.BoxGeometry(10, 16, 1, 0, 0, 0);
setVertices(capeBox, setVertices(capeBox,
toCapeVertices(1, 0, 11, 1), toCapeVertices(1, 0, 11, 1),
toCapeVertices(11, 0, 21, 1), toCapeVertices(11, 0, 21, 1),
@ -388,19 +383,19 @@ export class CapeObject extends Group {
toCapeVertices(0, 1, 1, 17), toCapeVertices(0, 1, 1, 17),
toCapeVertices(1, 1, 11, 17) toCapeVertices(1, 1, 11, 17)
); );
this.cape = new Mesh(capeBox, capeMaterial); this.cape = new THREE.Mesh(capeBox, capeMaterial);
this.cape.position.y = -8; this.cape.position.y = -8;
this.cape.position.z = -0.5; this.cape.position.z = -0.5;
this.add(this.cape); this.add(this.cape);
} }
} }
export class PlayerObject extends Group { export class PlayerObject extends THREE.Group {
readonly skin: SkinObject; readonly skin: SkinObject;
readonly cape: CapeObject; readonly cape: CapeObject;
constructor(layer1Material: MeshBasicMaterial, layer2Material: MeshBasicMaterial, capeMaterial: MeshBasicMaterial) { constructor(layer1Material: THREE.MeshBasicMaterial, layer2Material: THREE.MeshBasicMaterial, capeMaterial: THREE.MeshBasicMaterial) {
super(); super();
this.skin = new SkinObject(layer1Material, layer2Material); this.skin = new SkinObject(layer1Material, layer2Material);

124
src/orbit_controls.ts
View File

@ -1,12 +1,4 @@
import { Camera } from "three/src/cameras/Camera"; import * as THREE from "three";
import { OrthographicCamera } from "three/src/cameras/OrthographicCamera";
import { PerspectiveCamera } from "three/src/cameras/PerspectiveCamera";
import { MOUSE } from "three/src/constants";
import { EventDispatcher } from "three/src/core/EventDispatcher";
import { Quaternion } from "three/src/math/Quaternion";
import { Spherical } from "three/src/math/Spherical";
import { Vector2 } from "three/src/math/Vector2";
import { Vector3 } from "three/src/math/Vector3";
import { SkinViewer } from "./viewer"; import { SkinViewer } from "./viewer";
const STATE = { const STATE = {
@ -24,7 +16,7 @@ const START_EVENT = { type: "start" };
const END_EVENT = { type: "end" }; const END_EVENT = { type: "end" };
const EPS = 0.000001; const EPS = 0.000001;
export class OrbitControls extends EventDispatcher { export class OrbitControls extends THREE.EventDispatcher {
/** /**
* @preserve * @preserve
* The code was originally from https://github.com/mrdoob/three.js/blob/d45a042cf962e9b1aa9441810ba118647b48aacb/examples/js/controls/OrbitControls.js * The code was originally from https://github.com/mrdoob/three.js/blob/d45a042cf962e9b1aa9441810ba118647b48aacb/examples/js/controls/OrbitControls.js
@ -66,13 +58,13 @@ export class OrbitControls extends EventDispatcher {
// Zoom - middle mouse, or mousewheel / touch: two finger spread or squish // Zoom - middle mouse, or mousewheel / touch: two finger spread or squish
// Pan - right mouse, or arrow keys / touch: three finger swipe // Pan - right mouse, or arrow keys / touch: three finger swipe
object: Camera; object: THREE.Camera;
domElement: HTMLElement | HTMLDocument; domElement: HTMLElement | HTMLDocument;
window: Window; window: Window;
// API // API
enabled: boolean; enabled: boolean;
target: Vector3; target: THREE.Vector3;
enableZoom: boolean; enableZoom: boolean;
zoomSpeed: number; zoomSpeed: number;
@ -92,41 +84,41 @@ export class OrbitControls extends EventDispatcher {
maxAzimuthAngle: number; maxAzimuthAngle: number;
enableKeys: boolean; enableKeys: boolean;
keys: { LEFT: number; UP: number; RIGHT: number; BOTTOM: number; }; keys: { LEFT: number; UP: number; RIGHT: number; BOTTOM: number; };
mouseButtons: { ORBIT: MOUSE; ZOOM: MOUSE; PAN: MOUSE; }; mouseButtons: { ORBIT: THREE.MOUSE; ZOOM: THREE.MOUSE; PAN: THREE.MOUSE; };
enableDamping: boolean; enableDamping: boolean;
dampingFactor: number; dampingFactor: number;
private spherical: Spherical; private spherical: THREE.Spherical;
private sphericalDelta: Spherical; private sphericalDelta: THREE.Spherical;
private scale: number; private scale: number;
private target0: Vector3; private target0: THREE.Vector3;
private position0: Vector3; private position0: THREE.Vector3;
private zoom0: any; private zoom0: any;
private state: number; private state: number;
private panOffset: Vector3; private panOffset: THREE.Vector3;
private zoomChanged: boolean; private zoomChanged: boolean;
private rotateStart: Vector2; private rotateStart: THREE.Vector2;
private rotateEnd: Vector2; private rotateEnd: THREE.Vector2;
private rotateDelta: Vector2; private rotateDelta: THREE.Vector2;
private panStart: Vector2; private panStart: THREE.Vector2;
private panEnd: Vector2; private panEnd: THREE.Vector2;
private panDelta: Vector2; private panDelta: THREE.Vector2;
private dollyStart: Vector2; private dollyStart: THREE.Vector2;
private dollyEnd: Vector2; private dollyEnd: THREE.Vector2;
private dollyDelta: Vector2; private dollyDelta: THREE.Vector2;
private updateLastPosition: Vector3; private updateLastPosition: THREE.Vector3;
private updateOffset: Vector3; private updateOffset: THREE.Vector3;
private updateQuat: Quaternion; private updateQuat: THREE.Quaternion;
private updateLastQuaternion: Quaternion; private updateLastQuaternion: THREE.Quaternion;
private updateQuatInverse: Quaternion; private updateQuatInverse: THREE.Quaternion;
private panLeftV: Vector3; private panLeftV: THREE.Vector3;
private panUpV: Vector3; private panUpV: THREE.Vector3;
private panInternalOffset: Vector3; private panInternalOffset: THREE.Vector3;
private onContextMenu: EventListener; private onContextMenu: EventListener;
private onMouseUp: EventListener; private onMouseUp: EventListener;
@ -138,7 +130,7 @@ export class OrbitControls extends EventDispatcher {
private onTouchMove: EventListener; private onTouchMove: EventListener;
private onKeyDown: EventListener; private onKeyDown: EventListener;
constructor(object: Camera, domElement?: HTMLElement, domWindow?: Window) { constructor(object: THREE.Camera, domElement?: HTMLElement, domWindow?: Window) {
super(); super();
this.object = object; this.object = object;
@ -149,7 +141,7 @@ export class OrbitControls extends EventDispatcher {
this.enabled = true; this.enabled = true;
// "target" sets the location of focus, where the object orbits around // "target" sets the location of focus, where the object orbits around
this.target = new Vector3(); this.target = new THREE.Vector3();
// How far you can dolly in and out ( PerspectiveCamera only ) // How far you can dolly in and out ( PerspectiveCamera only )
this.minDistance = 0; this.minDistance = 0;
@ -199,7 +191,7 @@ export class OrbitControls extends EventDispatcher {
this.keys = { LEFT: 37, UP: 38, RIGHT: 39, BOTTOM: 40 }; this.keys = { LEFT: 37, UP: 38, RIGHT: 39, BOTTOM: 40 };
// Mouse buttons // Mouse buttons
this.mouseButtons = { ORBIT: MOUSE.LEFT, ZOOM: MOUSE.MIDDLE, PAN: MOUSE.RIGHT }; this.mouseButtons = { ORBIT: THREE.MOUSE.LEFT, ZOOM: THREE.MOUSE.MIDDLE, PAN: THREE.MOUSE.RIGHT };
// for reset // for reset
this.target0 = this.target.clone(); this.target0 = this.target.clone();
@ -207,38 +199,38 @@ export class OrbitControls extends EventDispatcher {
this.zoom0 = (this.object as any).zoom; this.zoom0 = (this.object as any).zoom;
// for update speedup // for update speedup
this.updateOffset = new Vector3(); this.updateOffset = new THREE.Vector3();
// so camera.up is the orbit axis // so camera.up is the orbit axis
this.updateQuat = new Quaternion().setFromUnitVectors(object.up, new Vector3(0, 1, 0)); this.updateQuat = new THREE.Quaternion().setFromUnitVectors(object.up, new THREE.Vector3(0, 1, 0));
this.updateQuatInverse = this.updateQuat.clone().inverse(); this.updateQuatInverse = this.updateQuat.clone().inverse();
this.updateLastPosition = new Vector3(); this.updateLastPosition = new THREE.Vector3();
this.updateLastQuaternion = new Quaternion(); this.updateLastQuaternion = new THREE.Quaternion();
this.state = STATE.NONE; this.state = STATE.NONE;
this.scale = 1; this.scale = 1;
// current position in spherical coordinates // current position in spherical coordinates
this.spherical = new Spherical(); this.spherical = new THREE.Spherical();
this.sphericalDelta = new Spherical(); this.sphericalDelta = new THREE.Spherical();
this.panOffset = new Vector3(); this.panOffset = new THREE.Vector3();
this.zoomChanged = false; this.zoomChanged = false;
this.rotateStart = new Vector2(); this.rotateStart = new THREE.Vector2();
this.rotateEnd = new Vector2(); this.rotateEnd = new THREE.Vector2();
this.rotateDelta = new Vector2(); this.rotateDelta = new THREE.Vector2();
this.panStart = new Vector2(); this.panStart = new THREE.Vector2();
this.panEnd = new Vector2(); this.panEnd = new THREE.Vector2();
this.panDelta = new Vector2(); this.panDelta = new THREE.Vector2();
this.dollyStart = new Vector2(); this.dollyStart = new THREE.Vector2();
this.dollyEnd = new Vector2(); this.dollyEnd = new THREE.Vector2();
this.dollyDelta = new Vector2(); this.dollyDelta = new THREE.Vector2();
this.panLeftV = new Vector3(); this.panLeftV = new THREE.Vector3();
this.panUpV = new Vector3(); this.panUpV = new THREE.Vector3();
this.panInternalOffset = new Vector3(); this.panInternalOffset = new THREE.Vector3();
// event handlers - FSM: listen for events and reset state // event handlers - FSM: listen for events and reset state
@ -596,7 +588,7 @@ export class OrbitControls extends EventDispatcher {
pan(deltaX: number, deltaY: number) { pan(deltaX: number, deltaY: number) {
const element = this.domElement === document ? this.domElement.body : this.domElement; const element = this.domElement === document ? this.domElement.body : this.domElement;
if (this.object instanceof PerspectiveCamera) { if (this.object instanceof THREE.PerspectiveCamera) {
// perspective // perspective
const position = this.object.position; const position = this.object.position;
this.panInternalOffset.copy(position).sub(this.target); this.panInternalOffset.copy(position).sub(this.target);
@ -608,7 +600,7 @@ export class OrbitControls extends EventDispatcher {
// we actually don"t use screenWidth, since perspective camera is fixed to screen height // we actually don"t use screenWidth, since perspective camera is fixed to screen height
this.panLeft(2 * deltaX * targetDistance / (element as any).clientHeight, this.object.matrix); this.panLeft(2 * deltaX * targetDistance / (element as any).clientHeight, this.object.matrix);
this.panUp(2 * deltaY * targetDistance / (element as any).clientHeight, this.object.matrix); this.panUp(2 * deltaY * targetDistance / (element as any).clientHeight, this.object.matrix);
} else if (this.object instanceof OrthographicCamera) { } else if (this.object instanceof THREE.OrthographicCamera) {
// orthographic // orthographic
this.panLeft(deltaX * (this.object.right - this.object.left) / this.object.zoom / (element as any).clientWidth, this.object.matrix); this.panLeft(deltaX * (this.object.right - this.object.left) / this.object.zoom / (element as any).clientWidth, this.object.matrix);
this.panUp(deltaY * (this.object.top - this.object.bottom) / this.object.zoom / (element as any).clientHeight, this.object.matrix); this.panUp(deltaY * (this.object.top - this.object.bottom) / this.object.zoom / (element as any).clientHeight, this.object.matrix);
@ -620,9 +612,9 @@ export class OrbitControls extends EventDispatcher {
} }
dollyIn(dollyScale) { dollyIn(dollyScale) {
if (this.object instanceof PerspectiveCamera) { if (this.object instanceof THREE.PerspectiveCamera) {
this.scale /= dollyScale; this.scale /= dollyScale;
} else if (this.object instanceof OrthographicCamera) { } else if (this.object instanceof THREE.OrthographicCamera) {
this.object.zoom = Math.max(this.minZoom, Math.min(this.maxZoom, this.object.zoom * dollyScale)); this.object.zoom = Math.max(this.minZoom, Math.min(this.maxZoom, this.object.zoom * dollyScale));
this.object.updateProjectionMatrix(); this.object.updateProjectionMatrix();
this.zoomChanged = true; this.zoomChanged = true;
@ -633,9 +625,9 @@ export class OrbitControls extends EventDispatcher {
} }
dollyOut(dollyScale) { dollyOut(dollyScale) {
if (this.object instanceof PerspectiveCamera) { if (this.object instanceof THREE.PerspectiveCamera) {
this.scale *= dollyScale; this.scale *= dollyScale;
} else if (this.object instanceof OrthographicCamera) { } else if (this.object instanceof THREE.OrthographicCamera) {
this.object.zoom = Math.max(this.minZoom, Math.min(this.maxZoom, this.object.zoom / dollyScale)); this.object.zoom = Math.max(this.minZoom, Math.min(this.maxZoom, this.object.zoom / dollyScale));
this.object.updateProjectionMatrix(); this.object.updateProjectionMatrix();
this.zoomChanged = true; this.zoomChanged = true;
@ -699,7 +691,7 @@ export class OrbitControls extends EventDispatcher {
} }
// backward compatibility // backward compatibility
// get center(): Vector3 { // get center(): THREE.Vector3 {
// console.warn("THREE.OrbitControls: .center has been renamed to .target"); // console.warn("THREE.OrbitControls: .center has been renamed to .target");
// return this.target; // return this.target;
// } // }
@ -718,7 +710,7 @@ interface ThreeEvent extends Event {
clientX: number; clientX: number;
clientY: number; clientY: number;
deltaY: number; deltaY: number;
button: MOUSE; button: THREE.MOUSE;
touches: Array<any>; touches: Array<any>;
keyCode: number; keyCode: number;
} }
@ -728,7 +720,7 @@ export function createOrbitControls(skinViewer: SkinViewer) {
// default configuration // default configuration
control.enablePan = false; control.enablePan = false;
control.target = new Vector3(0, -12, 0); control.target = new THREE.Vector3(0, -12, 0);
control.minDistance = 10; control.minDistance = 10;
control.maxDistance = 256; control.maxDistance = 256;
control.update(); control.update();

56
src/viewer.ts
View File

@ -1,13 +1,7 @@
import { PerspectiveCamera } from "three/src/cameras/PerspectiveCamera"; import * as THREE from "three";
import { DoubleSide, FrontSide, NearestFilter } from "three/src/constants";
import { MeshBasicMaterial } from "three/src/materials/MeshBasicMaterial";
import { Vector2 } from "three/src/math/Vector2";
import { WebGLRenderer } from "three/src/renderers/WebGLRenderer";
import { Scene } from "three/src/scenes/Scene";
import { Texture } from "three/src/textures/Texture";
import { RootAnimation } from "./animation";
import { PlayerObject } from "./model"; import { PlayerObject } from "./model";
import { isSlimSkin, loadCapeToCanvas, loadSkinToCanvas } from "./utils"; import { RootAnimation } from "./animation";
import { loadSkinToCanvas, loadCapeToCanvas, isSlimSkin } from "./utils";
export interface SkinViewerOptions { export interface SkinViewerOptions {
domElement: Node; domElement: Node;
@ -28,19 +22,19 @@ export class SkinViewer {
public readonly skinImg: HTMLImageElement; public readonly skinImg: HTMLImageElement;
public readonly skinCanvas: HTMLCanvasElement; public readonly skinCanvas: HTMLCanvasElement;
public readonly skinTexture: Texture; public readonly skinTexture: THREE.Texture;
public readonly capeImg: HTMLImageElement; public readonly capeImg: HTMLImageElement;
public readonly capeCanvas: HTMLCanvasElement; public readonly capeCanvas: HTMLCanvasElement;
public readonly capeTexture: Texture; public readonly capeTexture: THREE.Texture;
public readonly layer1Material: MeshBasicMaterial; public readonly layer1Material: THREE.MeshBasicMaterial;
public readonly layer2Material: MeshBasicMaterial; public readonly layer2Material: THREE.MeshBasicMaterial;
public readonly capeMaterial: MeshBasicMaterial; public readonly capeMaterial: THREE.MeshBasicMaterial;
public readonly scene: Scene; public readonly scene: THREE.Scene;
public readonly camera: PerspectiveCamera; public readonly camera: THREE.PerspectiveCamera;
public readonly renderer: WebGLRenderer; public readonly renderer: THREE.WebGLRenderer;
public readonly playerObject: PlayerObject; public readonly playerObject: PlayerObject;
@ -55,29 +49,29 @@ export class SkinViewer {
// texture // texture
this.skinImg = new Image(); this.skinImg = new Image();
this.skinCanvas = document.createElement("canvas"); this.skinCanvas = document.createElement("canvas");
this.skinTexture = new Texture(this.skinCanvas); this.skinTexture = new THREE.Texture(this.skinCanvas);
this.skinTexture.magFilter = NearestFilter; this.skinTexture.magFilter = THREE.NearestFilter;
this.skinTexture.minFilter = NearestFilter; this.skinTexture.minFilter = THREE.NearestFilter;
this.capeImg = new Image(); this.capeImg = new Image();
this.capeCanvas = document.createElement("canvas"); this.capeCanvas = document.createElement("canvas");
this.capeTexture = new Texture(this.capeCanvas); this.capeTexture = new THREE.Texture(this.capeCanvas);
this.capeTexture.magFilter = NearestFilter; this.capeTexture.magFilter = THREE.NearestFilter;
this.capeTexture.minFilter = NearestFilter; this.capeTexture.minFilter = THREE.NearestFilter;
this.layer1Material = new MeshBasicMaterial({ map: this.skinTexture, side: FrontSide }); this.layer1Material = new THREE.MeshBasicMaterial({ map: this.skinTexture, side: THREE.FrontSide });
this.layer2Material = new MeshBasicMaterial({ map: this.skinTexture, transparent: true, opacity: 1, side: DoubleSide, alphaTest: 0.5 }); this.layer2Material = new THREE.MeshBasicMaterial({ map: this.skinTexture, transparent: true, opacity: 1, side: THREE.DoubleSide, alphaTest: 0.5 });
this.capeMaterial = new MeshBasicMaterial({ map: this.capeTexture, transparent: true, opacity: 1, side: DoubleSide, alphaTest: 0.5 }); this.capeMaterial = new THREE.MeshBasicMaterial({ map: this.capeTexture, transparent: true, opacity: 1, side: THREE.DoubleSide, alphaTest: 0.5 });
// scene // scene
this.scene = new Scene(); this.scene = new THREE.Scene();
// Use smaller fov to avoid distortion // Use smaller fov to avoid distortion
this.camera = new PerspectiveCamera(40); this.camera = new THREE.PerspectiveCamera(40);
this.camera.position.y = -12; this.camera.position.y = -12;
this.camera.position.z = 60; this.camera.position.z = 60;
this.renderer = new WebGLRenderer({ alpha: true, antialias: false }); this.renderer = new THREE.WebGLRenderer({ alpha: true, antialias: false });
this.renderer.setSize(300, 300); // default size this.renderer.setSize(300, 300); // default size
this.domElement.appendChild(this.renderer.domElement); this.domElement.appendChild(this.renderer.domElement);
@ -173,7 +167,7 @@ export class SkinViewer {
} }
get width() { get width() {
const target = new Vector2(); const target = new THREE.Vector2();
return this.renderer.getSize(target).width; return this.renderer.getSize(target).width;
} }
@ -182,7 +176,7 @@ export class SkinViewer {
} }
get height() { get height() {
const target = new Vector2(); const target = new THREE.Vector2();
return this.renderer.getSize(target).height; return this.renderer.getSize(target).height;
} }

3
tslint.json
View File

@ -26,8 +26,7 @@
], ],
"max-classes-per-file": false, "max-classes-per-file": false,
"interface-name": false, "interface-name": false,
"member-ordering": false, "member-ordering": false
"no-submodule-imports": false
}, },
"rulesDirectory": [] "rulesDirectory": []
} }