From 298cce4554d63500ed0814cc6e7bc31b45f2f71f Mon Sep 17 00:00:00 2001 From: yushijinhun Date: Wed, 1 Jan 2020 00:47:04 +0800 Subject: [PATCH] Drop namespace THREE, use submodules Co-authored-by: Shirasawa <764798966@qq.com> --- rollup.config.js | 7 +++ src/animation.ts | 4 +- src/model.ts | 97 +++++++++++++++++---------------- src/orbit_controls.ts | 124 ++++++++++++++++++++++-------------------- src/viewer.ts | 56 ++++++++++--------- tslint.json | 3 +- 6 files changed, 159 insertions(+), 132 deletions(-) diff --git a/rollup.config.js b/rollup.config.js index 9c8dc32..ab87059 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -17,6 +17,11 @@ const es = { indent: "\t" }; +const resolverPlugin = { + name: "resolver", + resolveId: id => id.startsWith("three/src/") ? "three" : undefined +}; + const licensePlugin = license({ banner: ` skinview3d (https://github.com/bs-community/skinview3d) @@ -40,6 +45,7 @@ export default [ { ...es, file: "dist/skinview3d.module.js" } ], plugins: [ + resolverPlugin, resolve(), typescript(), licensePlugin @@ -49,6 +55,7 @@ export default [ ...base, output: { ...umd, file: "dist/skinview3d.min.js" }, plugins: [ + resolverPlugin, resolve(), typescript(), terser(), diff --git a/src/animation.ts b/src/animation.ts index 973b1ca..49123b1 100644 --- a/src/animation.ts +++ b/src/animation.ts @@ -1,5 +1,5 @@ +import { Clock } from "three/src/core/Clock"; import { PlayerObject } from "./model"; -import * as THREE from "three"; export interface IAnimation { play(player: PlayerObject, time: number): void; @@ -102,7 +102,7 @@ export class CompositeAnimation implements IAnimation { export class RootAnimation extends CompositeAnimation implements AnimationHandle { speed: number = 1.0; progress: number = 0.0; - readonly clock: THREE.Clock = new THREE.Clock(true); + readonly clock: Clock = new Clock(true); get animation() { return this; diff --git a/src/model.ts b/src/model.ts index 10f2942..985f596 100644 --- a/src/model.ts +++ b/src/model.ts @@ -1,11 +1,16 @@ -import * as THREE from "three"; +import { Object3D } from "three/src/core/Object3D"; +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) { return [ - new THREE.Vector2(x1 / w, 1.0 - y2 / h), - new THREE.Vector2(x2 / w, 1.0 - y2 / h), - new THREE.Vector2(x2 / w, 1.0 - y1 / h), - new THREE.Vector2(x1 / w, 1.0 - y1 / h) + new Vector2(x1 / w, 1.0 - y2 / h), + new Vector2(x2 / w, 1.0 - y2 / h), + new Vector2(x2 / w, 1.0 - y1 / h), + new Vector2(x1 / w, 1.0 - y1 / h) ]; } @@ -17,7 +22,7 @@ function toCapeVertices(x1: number, y1: number, x2: number, y2: number) { return toFaceVertices(x1, y1, x2, y2, 64.0, 32.0); } -function setVertices(box: THREE.BoxGeometry, top: Array, bottom: Array, left: Array, front: Array, right: Array, back: Array) { +function setVertices(box: BoxGeometry, top: Array, bottom: Array, left: Array, front: Array, right: Array, back: Array) { box.faceVertexUvs[0] = []; box.faceVertexUvs[0][0] = [right[3], right[0], right[2]]; @@ -39,10 +44,10 @@ const esp = 0.002; /** * Notice that innerLayer and outerLayer may NOT be the direct children of the Group. */ -export class BodyPart extends THREE.Group { +export class BodyPart extends Group { constructor( - readonly innerLayer: THREE.Object3D, - readonly outerLayer: THREE.Object3D + readonly innerLayer: Object3D, + readonly outerLayer: Object3D ) { super(); innerLayer.name = "inner"; @@ -50,7 +55,7 @@ export class BodyPart extends THREE.Group { } } -export class SkinObject extends THREE.Group { +export class SkinObject extends Group { // body parts readonly head: BodyPart; @@ -63,11 +68,11 @@ export class SkinObject extends THREE.Group { private modelListeners: Array<() => void> = []; // called when model(slim property) is changed private _slim = false; - constructor(layer1Material: THREE.MeshBasicMaterial, layer2Material: THREE.MeshBasicMaterial) { + constructor(layer1Material: MeshBasicMaterial, layer2Material: MeshBasicMaterial) { super(); // Head - const headBox = new THREE.BoxGeometry(8, 8, 8, 0, 0, 0); + const headBox = new BoxGeometry(8, 8, 8, 0, 0, 0); setVertices(headBox, toSkinVertices(8, 0, 16, 8), toSkinVertices(16, 0, 24, 8), @@ -76,9 +81,9 @@ export class SkinObject extends THREE.Group { toSkinVertices(16, 8, 24, 16), toSkinVertices(24, 8, 32, 16) ); - const headMesh = new THREE.Mesh(headBox, layer1Material); + const headMesh = new Mesh(headBox, layer1Material); - const head2Box = new THREE.BoxGeometry(9, 9, 9, 0, 0, 0); + const head2Box = new BoxGeometry(9, 9, 9, 0, 0, 0); setVertices(head2Box, toSkinVertices(40, 0, 48, 8), toSkinVertices(48, 0, 56, 8), @@ -87,7 +92,7 @@ export class SkinObject extends THREE.Group { toSkinVertices(48, 8, 56, 16), toSkinVertices(56, 8, 64, 16) ); - const head2Mesh = new THREE.Mesh(head2Box, layer2Material); + const head2Mesh = new Mesh(head2Box, layer2Material); head2Mesh.renderOrder = -1; this.head = new BodyPart(headMesh, head2Mesh); @@ -96,7 +101,7 @@ export class SkinObject extends THREE.Group { this.add(this.head); // Body - const bodyBox = new THREE.BoxGeometry(8, 12, 4, 0, 0, 0); + const bodyBox = new BoxGeometry(8, 12, 4, 0, 0, 0); setVertices(bodyBox, toSkinVertices(20, 16, 28, 20), toSkinVertices(28, 16, 36, 20), @@ -105,9 +110,9 @@ export class SkinObject extends THREE.Group { toSkinVertices(28, 20, 32, 32), toSkinVertices(32, 20, 40, 32) ); - const bodyMesh = new THREE.Mesh(bodyBox, layer1Material); + const bodyMesh = new Mesh(bodyBox, layer1Material); - const body2Box = new THREE.BoxGeometry(9, 13.5, 4.5, 0, 0, 0); + const body2Box = new BoxGeometry(9, 13.5, 4.5, 0, 0, 0); setVertices(body2Box, toSkinVertices(20, 32, 28, 36), toSkinVertices(28, 32, 36, 36), @@ -116,7 +121,7 @@ export class SkinObject extends THREE.Group { toSkinVertices(28, 36, 32, 48), toSkinVertices(32, 36, 40, 48) ); - const body2Mesh = new THREE.Mesh(body2Box, layer2Material); + const body2Mesh = new Mesh(body2Box, layer2Material); this.body = new BodyPart(bodyMesh, body2Mesh); this.body.name = "body"; @@ -125,8 +130,8 @@ export class SkinObject extends THREE.Group { this.add(this.body); // Right Arm - const rightArmBox = new THREE.BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related - const rightArmMesh = new THREE.Mesh(rightArmBox, layer1Material); + const rightArmBox = new BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related + const rightArmMesh = new Mesh(rightArmBox, layer1Material); this.modelListeners.push(() => { rightArmMesh.scale.x = (this.slim ? 3 : 4) - esp; rightArmMesh.scale.y = 12 - esp; @@ -154,8 +159,8 @@ export class SkinObject extends THREE.Group { rightArmBox.elementsNeedUpdate = true; }); - const rightArm2Box = new THREE.BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related - const rightArm2Mesh = new THREE.Mesh(rightArm2Box, layer2Material); + const rightArm2Box = new BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related + const rightArm2Mesh = new Mesh(rightArm2Box, layer2Material); rightArm2Mesh.renderOrder = 1; this.modelListeners.push(() => { rightArm2Mesh.scale.x = (this.slim ? 3.375 : 4.5) - esp; @@ -184,7 +189,7 @@ export class SkinObject extends THREE.Group { rightArm2Box.elementsNeedUpdate = true; }); - const rightArmPivot = new THREE.Group(); + const rightArmPivot = new Group(); rightArmPivot.add(rightArmMesh, rightArm2Mesh); rightArmPivot.position.y = -6; @@ -198,8 +203,8 @@ export class SkinObject extends THREE.Group { this.add(this.rightArm); // Left Arm - const leftArmBox = new THREE.BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related - const leftArmMesh = new THREE.Mesh(leftArmBox, layer1Material); + const leftArmBox = new BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related + const leftArmMesh = new Mesh(leftArmBox, layer1Material); this.modelListeners.push(() => { leftArmMesh.scale.x = (this.slim ? 3 : 4) - esp; leftArmMesh.scale.y = 12 - esp; @@ -227,8 +232,8 @@ export class SkinObject extends THREE.Group { leftArmBox.elementsNeedUpdate = true; }); - const leftArm2Box = new THREE.BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related - const leftArm2Mesh = new THREE.Mesh(leftArm2Box, layer2Material); + const leftArm2Box = new BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related + const leftArm2Mesh = new Mesh(leftArm2Box, layer2Material); leftArm2Mesh.renderOrder = 1; this.modelListeners.push(() => { leftArm2Mesh.scale.x = (this.slim ? 3.375 : 4.5) - esp; @@ -257,7 +262,7 @@ export class SkinObject extends THREE.Group { leftArm2Box.elementsNeedUpdate = true; }); - const leftArmPivot = new THREE.Group(); + const leftArmPivot = new Group(); leftArmPivot.add(leftArmMesh, leftArm2Mesh); leftArmPivot.position.y = -6; @@ -271,7 +276,7 @@ export class SkinObject extends THREE.Group { this.add(this.leftArm); // Right Leg - const rightLegBox = new THREE.BoxGeometry(4 - esp, 12 - esp, 4 - esp, 0, 0, 0); + const rightLegBox = new BoxGeometry(4 - esp, 12 - esp, 4 - esp, 0, 0, 0); setVertices(rightLegBox, toSkinVertices(4, 16, 8, 20), toSkinVertices(8, 16, 12, 20), @@ -280,9 +285,9 @@ export class SkinObject extends THREE.Group { toSkinVertices(8, 20, 12, 32), toSkinVertices(12, 20, 16, 32) ); - const rightLegMesh = new THREE.Mesh(rightLegBox, layer1Material); + const rightLegMesh = new Mesh(rightLegBox, layer1Material); - const rightLeg2Box = new THREE.BoxGeometry(4.5 - esp, 13.5 - esp, 4.5 - esp, 0, 0, 0); + const rightLeg2Box = new BoxGeometry(4.5 - esp, 13.5 - esp, 4.5 - esp, 0, 0, 0); setVertices(rightLeg2Box, toSkinVertices(4, 32, 8, 36), toSkinVertices(8, 32, 12, 36), @@ -291,10 +296,10 @@ export class SkinObject extends THREE.Group { toSkinVertices(8, 36, 12, 48), toSkinVertices(12, 36, 16, 48) ); - const rightLeg2Mesh = new THREE.Mesh(rightLeg2Box, layer2Material); + const rightLeg2Mesh = new Mesh(rightLeg2Box, layer2Material); rightLeg2Mesh.renderOrder = 1; - const rightLegPivot = new THREE.Group(); + const rightLegPivot = new Group(); rightLegPivot.add(rightLegMesh, rightLeg2Mesh); rightLegPivot.position.y = -6; @@ -306,7 +311,7 @@ export class SkinObject extends THREE.Group { this.add(this.rightLeg); // Left Leg - const leftLegBox = new THREE.BoxGeometry(4 - esp, 12 - esp, 4 - esp, 0, 0, 0); + const leftLegBox = new BoxGeometry(4 - esp, 12 - esp, 4 - esp, 0, 0, 0); setVertices(leftLegBox, toSkinVertices(20, 48, 24, 52), toSkinVertices(24, 48, 28, 52), @@ -315,9 +320,9 @@ export class SkinObject extends THREE.Group { toSkinVertices(24, 52, 28, 64), toSkinVertices(28, 52, 32, 64) ); - const leftLegMesh = new THREE.Mesh(leftLegBox, layer1Material); + const leftLegMesh = new Mesh(leftLegBox, layer1Material); - const leftLeg2Box = new THREE.BoxGeometry(4.5 - esp, 13.5 - esp, 4.5 - esp, 0, 0, 0); + const leftLeg2Box = new BoxGeometry(4.5 - esp, 13.5 - esp, 4.5 - esp, 0, 0, 0); setVertices(leftLeg2Box, toSkinVertices(4, 48, 8, 52), toSkinVertices(8, 48, 12, 52), @@ -326,10 +331,10 @@ export class SkinObject extends THREE.Group { toSkinVertices(8, 52, 12, 64), toSkinVertices(12, 52, 16, 64) ); - const leftLeg2Mesh = new THREE.Mesh(leftLeg2Box, layer2Material); + const leftLeg2Mesh = new Mesh(leftLeg2Box, layer2Material); leftLeg2Mesh.renderOrder = 1; - const leftLegPivot = new THREE.Group(); + const leftLegPivot = new Group(); leftLegPivot.add(leftLegMesh, leftLeg2Mesh); leftLegPivot.position.y = -6; @@ -365,16 +370,16 @@ export class SkinObject extends THREE.Group { } } -export class CapeObject extends THREE.Group { +export class CapeObject extends Group { - readonly cape: THREE.Mesh; + readonly cape: Mesh; - constructor(capeMaterial: THREE.MeshBasicMaterial) { + constructor(capeMaterial: MeshBasicMaterial) { super(); // back = outside // front = inside - const capeBox = new THREE.BoxGeometry(10, 16, 1, 0, 0, 0); + const capeBox = new BoxGeometry(10, 16, 1, 0, 0, 0); setVertices(capeBox, toCapeVertices(1, 0, 11, 1), toCapeVertices(11, 0, 21, 1), @@ -383,19 +388,19 @@ export class CapeObject extends THREE.Group { toCapeVertices(0, 1, 1, 17), toCapeVertices(1, 1, 11, 17) ); - this.cape = new THREE.Mesh(capeBox, capeMaterial); + this.cape = new Mesh(capeBox, capeMaterial); this.cape.position.y = -8; this.cape.position.z = -0.5; this.add(this.cape); } } -export class PlayerObject extends THREE.Group { +export class PlayerObject extends Group { readonly skin: SkinObject; readonly cape: CapeObject; - constructor(layer1Material: THREE.MeshBasicMaterial, layer2Material: THREE.MeshBasicMaterial, capeMaterial: THREE.MeshBasicMaterial) { + constructor(layer1Material: MeshBasicMaterial, layer2Material: MeshBasicMaterial, capeMaterial: MeshBasicMaterial) { super(); this.skin = new SkinObject(layer1Material, layer2Material); diff --git a/src/orbit_controls.ts b/src/orbit_controls.ts index ee963c3..819e922 100644 --- a/src/orbit_controls.ts +++ b/src/orbit_controls.ts @@ -1,4 +1,12 @@ -import * as THREE from "three"; +import { Camera } from "three/src/cameras/Camera"; +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"; const STATE = { @@ -16,7 +24,7 @@ const START_EVENT = { type: "start" }; const END_EVENT = { type: "end" }; const EPS = 0.000001; -export class OrbitControls extends THREE.EventDispatcher { +export class OrbitControls extends EventDispatcher { /** * @preserve * The code was originally from https://github.com/mrdoob/three.js/blob/d45a042cf962e9b1aa9441810ba118647b48aacb/examples/js/controls/OrbitControls.js @@ -58,13 +66,13 @@ export class OrbitControls extends THREE.EventDispatcher { // Zoom - middle mouse, or mousewheel / touch: two finger spread or squish // Pan - right mouse, or arrow keys / touch: three finger swipe - object: THREE.Camera; + object: Camera; domElement: HTMLElement | HTMLDocument; window: Window; // API enabled: boolean; - target: THREE.Vector3; + target: Vector3; enableZoom: boolean; zoomSpeed: number; @@ -84,41 +92,41 @@ export class OrbitControls extends THREE.EventDispatcher { maxAzimuthAngle: number; enableKeys: boolean; keys: { LEFT: number; UP: number; RIGHT: number; BOTTOM: number; }; - mouseButtons: { ORBIT: THREE.MOUSE; ZOOM: THREE.MOUSE; PAN: THREE.MOUSE; }; + mouseButtons: { ORBIT: MOUSE; ZOOM: MOUSE; PAN: MOUSE; }; enableDamping: boolean; dampingFactor: number; - private spherical: THREE.Spherical; - private sphericalDelta: THREE.Spherical; + private spherical: Spherical; + private sphericalDelta: Spherical; private scale: number; - private target0: THREE.Vector3; - private position0: THREE.Vector3; + private target0: Vector3; + private position0: Vector3; private zoom0: any; private state: number; - private panOffset: THREE.Vector3; + private panOffset: Vector3; private zoomChanged: boolean; - private rotateStart: THREE.Vector2; - private rotateEnd: THREE.Vector2; - private rotateDelta: THREE.Vector2; + private rotateStart: Vector2; + private rotateEnd: Vector2; + private rotateDelta: Vector2; - private panStart: THREE.Vector2; - private panEnd: THREE.Vector2; - private panDelta: THREE.Vector2; + private panStart: Vector2; + private panEnd: Vector2; + private panDelta: Vector2; - private dollyStart: THREE.Vector2; - private dollyEnd: THREE.Vector2; - private dollyDelta: THREE.Vector2; + private dollyStart: Vector2; + private dollyEnd: Vector2; + private dollyDelta: Vector2; - private updateLastPosition: THREE.Vector3; - private updateOffset: THREE.Vector3; - private updateQuat: THREE.Quaternion; - private updateLastQuaternion: THREE.Quaternion; - private updateQuatInverse: THREE.Quaternion; + private updateLastPosition: Vector3; + private updateOffset: Vector3; + private updateQuat: Quaternion; + private updateLastQuaternion: Quaternion; + private updateQuatInverse: Quaternion; - private panLeftV: THREE.Vector3; - private panUpV: THREE.Vector3; - private panInternalOffset: THREE.Vector3; + private panLeftV: Vector3; + private panUpV: Vector3; + private panInternalOffset: Vector3; private onContextMenu: EventListener; private onMouseUp: EventListener; @@ -130,7 +138,7 @@ export class OrbitControls extends THREE.EventDispatcher { private onTouchMove: EventListener; private onKeyDown: EventListener; - constructor(object: THREE.Camera, domElement?: HTMLElement, domWindow?: Window) { + constructor(object: Camera, domElement?: HTMLElement, domWindow?: Window) { super(); this.object = object; @@ -141,7 +149,7 @@ export class OrbitControls extends THREE.EventDispatcher { this.enabled = true; // "target" sets the location of focus, where the object orbits around - this.target = new THREE.Vector3(); + this.target = new Vector3(); // How far you can dolly in and out ( PerspectiveCamera only ) this.minDistance = 0; @@ -191,7 +199,7 @@ export class OrbitControls extends THREE.EventDispatcher { this.keys = { LEFT: 37, UP: 38, RIGHT: 39, BOTTOM: 40 }; // Mouse buttons - this.mouseButtons = { ORBIT: THREE.MOUSE.LEFT, ZOOM: THREE.MOUSE.MIDDLE, PAN: THREE.MOUSE.RIGHT }; + this.mouseButtons = { ORBIT: MOUSE.LEFT, ZOOM: MOUSE.MIDDLE, PAN: MOUSE.RIGHT }; // for reset this.target0 = this.target.clone(); @@ -199,38 +207,38 @@ export class OrbitControls extends THREE.EventDispatcher { this.zoom0 = (this.object as any).zoom; // for update speedup - this.updateOffset = new THREE.Vector3(); + this.updateOffset = new Vector3(); // so camera.up is the orbit axis - this.updateQuat = new THREE.Quaternion().setFromUnitVectors(object.up, new THREE.Vector3(0, 1, 0)); + this.updateQuat = new Quaternion().setFromUnitVectors(object.up, new Vector3(0, 1, 0)); this.updateQuatInverse = this.updateQuat.clone().inverse(); - this.updateLastPosition = new THREE.Vector3(); - this.updateLastQuaternion = new THREE.Quaternion(); + this.updateLastPosition = new Vector3(); + this.updateLastQuaternion = new Quaternion(); this.state = STATE.NONE; this.scale = 1; // current position in spherical coordinates - this.spherical = new THREE.Spherical(); - this.sphericalDelta = new THREE.Spherical(); + this.spherical = new Spherical(); + this.sphericalDelta = new Spherical(); - this.panOffset = new THREE.Vector3(); + this.panOffset = new Vector3(); this.zoomChanged = false; - this.rotateStart = new THREE.Vector2(); - this.rotateEnd = new THREE.Vector2(); - this.rotateDelta = new THREE.Vector2(); + this.rotateStart = new Vector2(); + this.rotateEnd = new Vector2(); + this.rotateDelta = new Vector2(); - this.panStart = new THREE.Vector2(); - this.panEnd = new THREE.Vector2(); - this.panDelta = new THREE.Vector2(); + this.panStart = new Vector2(); + this.panEnd = new Vector2(); + this.panDelta = new Vector2(); - this.dollyStart = new THREE.Vector2(); - this.dollyEnd = new THREE.Vector2(); - this.dollyDelta = new THREE.Vector2(); + this.dollyStart = new Vector2(); + this.dollyEnd = new Vector2(); + this.dollyDelta = new Vector2(); - this.panLeftV = new THREE.Vector3(); - this.panUpV = new THREE.Vector3(); - this.panInternalOffset = new THREE.Vector3(); + this.panLeftV = new Vector3(); + this.panUpV = new Vector3(); + this.panInternalOffset = new Vector3(); // event handlers - FSM: listen for events and reset state @@ -588,7 +596,7 @@ export class OrbitControls extends THREE.EventDispatcher { pan(deltaX: number, deltaY: number) { const element = this.domElement === document ? this.domElement.body : this.domElement; - if (this.object instanceof THREE.PerspectiveCamera) { + if (this.object instanceof PerspectiveCamera) { // perspective const position = this.object.position; this.panInternalOffset.copy(position).sub(this.target); @@ -600,7 +608,7 @@ export class OrbitControls extends THREE.EventDispatcher { // 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.panUp(2 * deltaY * targetDistance / (element as any).clientHeight, this.object.matrix); - } else if (this.object instanceof THREE.OrthographicCamera) { + } else if (this.object instanceof OrthographicCamera) { // orthographic 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); @@ -612,9 +620,9 @@ export class OrbitControls extends THREE.EventDispatcher { } dollyIn(dollyScale) { - if (this.object instanceof THREE.PerspectiveCamera) { + if (this.object instanceof PerspectiveCamera) { this.scale /= dollyScale; - } else if (this.object instanceof THREE.OrthographicCamera) { + } else if (this.object instanceof OrthographicCamera) { this.object.zoom = Math.max(this.minZoom, Math.min(this.maxZoom, this.object.zoom * dollyScale)); this.object.updateProjectionMatrix(); this.zoomChanged = true; @@ -625,9 +633,9 @@ export class OrbitControls extends THREE.EventDispatcher { } dollyOut(dollyScale) { - if (this.object instanceof THREE.PerspectiveCamera) { + if (this.object instanceof PerspectiveCamera) { this.scale *= dollyScale; - } else if (this.object instanceof THREE.OrthographicCamera) { + } else if (this.object instanceof OrthographicCamera) { this.object.zoom = Math.max(this.minZoom, Math.min(this.maxZoom, this.object.zoom / dollyScale)); this.object.updateProjectionMatrix(); this.zoomChanged = true; @@ -691,7 +699,7 @@ export class OrbitControls extends THREE.EventDispatcher { } // backward compatibility - // get center(): THREE.Vector3 { + // get center(): Vector3 { // console.warn("THREE.OrbitControls: .center has been renamed to .target"); // return this.target; // } @@ -710,7 +718,7 @@ interface ThreeEvent extends Event { clientX: number; clientY: number; deltaY: number; - button: THREE.MOUSE; + button: MOUSE; touches: Array; keyCode: number; } @@ -720,7 +728,7 @@ export function createOrbitControls(skinViewer: SkinViewer) { // default configuration control.enablePan = false; - control.target = new THREE.Vector3(0, -12, 0); + control.target = new Vector3(0, -12, 0); control.minDistance = 10; control.maxDistance = 256; control.update(); diff --git a/src/viewer.ts b/src/viewer.ts index cca75fb..faf6863 100644 --- a/src/viewer.ts +++ b/src/viewer.ts @@ -1,7 +1,13 @@ -import * as THREE from "three"; -import { PlayerObject } from "./model"; +import { PerspectiveCamera } from "three/src/cameras/PerspectiveCamera"; +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 { loadSkinToCanvas, loadCapeToCanvas, isSlimSkin } from "./utils"; +import { PlayerObject } from "./model"; +import { isSlimSkin, loadCapeToCanvas, loadSkinToCanvas } from "./utils"; export interface SkinViewerOptions { domElement: Node; @@ -22,19 +28,19 @@ export class SkinViewer { public readonly skinImg: HTMLImageElement; public readonly skinCanvas: HTMLCanvasElement; - public readonly skinTexture: THREE.Texture; + public readonly skinTexture: Texture; public readonly capeImg: HTMLImageElement; public readonly capeCanvas: HTMLCanvasElement; - public readonly capeTexture: THREE.Texture; + public readonly capeTexture: Texture; - public readonly layer1Material: THREE.MeshBasicMaterial; - public readonly layer2Material: THREE.MeshBasicMaterial; - public readonly capeMaterial: THREE.MeshBasicMaterial; + public readonly layer1Material: MeshBasicMaterial; + public readonly layer2Material: MeshBasicMaterial; + public readonly capeMaterial: MeshBasicMaterial; - public readonly scene: THREE.Scene; - public readonly camera: THREE.PerspectiveCamera; - public readonly renderer: THREE.WebGLRenderer; + public readonly scene: Scene; + public readonly camera: PerspectiveCamera; + public readonly renderer: WebGLRenderer; public readonly playerObject: PlayerObject; @@ -49,29 +55,29 @@ export class SkinViewer { // texture this.skinImg = new Image(); this.skinCanvas = document.createElement("canvas"); - this.skinTexture = new THREE.Texture(this.skinCanvas); - this.skinTexture.magFilter = THREE.NearestFilter; - this.skinTexture.minFilter = THREE.NearestFilter; + this.skinTexture = new Texture(this.skinCanvas); + this.skinTexture.magFilter = NearestFilter; + this.skinTexture.minFilter = NearestFilter; this.capeImg = new Image(); this.capeCanvas = document.createElement("canvas"); - this.capeTexture = new THREE.Texture(this.capeCanvas); - this.capeTexture.magFilter = THREE.NearestFilter; - this.capeTexture.minFilter = THREE.NearestFilter; + this.capeTexture = new Texture(this.capeCanvas); + this.capeTexture.magFilter = NearestFilter; + this.capeTexture.minFilter = NearestFilter; - this.layer1Material = new THREE.MeshBasicMaterial({ map: this.skinTexture, side: THREE.FrontSide }); - this.layer2Material = new THREE.MeshBasicMaterial({ map: this.skinTexture, transparent: true, opacity: 1, side: THREE.DoubleSide, alphaTest: 0.5 }); - this.capeMaterial = new THREE.MeshBasicMaterial({ map: this.capeTexture, transparent: true, opacity: 1, side: THREE.DoubleSide, alphaTest: 0.5 }); + this.layer1Material = new MeshBasicMaterial({ map: this.skinTexture, side: FrontSide }); + this.layer2Material = new MeshBasicMaterial({ map: this.skinTexture, transparent: true, opacity: 1, side: DoubleSide, alphaTest: 0.5 }); + this.capeMaterial = new MeshBasicMaterial({ map: this.capeTexture, transparent: true, opacity: 1, side: DoubleSide, alphaTest: 0.5 }); // scene - this.scene = new THREE.Scene(); + this.scene = new Scene(); // Use smaller fov to avoid distortion - this.camera = new THREE.PerspectiveCamera(40); + this.camera = new PerspectiveCamera(40); this.camera.position.y = -12; this.camera.position.z = 60; - this.renderer = new THREE.WebGLRenderer({ alpha: true, antialias: false }); + this.renderer = new WebGLRenderer({ alpha: true, antialias: false }); this.renderer.setSize(300, 300); // default size this.renderer.context.getShaderInfoLog = () => ""; // shut firefox up this.domElement.appendChild(this.renderer.domElement); @@ -168,7 +174,7 @@ export class SkinViewer { } get width() { - const target = new THREE.Vector2(); + const target = new Vector2(); return this.renderer.getSize(target).width; } @@ -177,7 +183,7 @@ export class SkinViewer { } get height() { - const target = new THREE.Vector2(); + const target = new Vector2(); return this.renderer.getSize(target).height; } diff --git a/tslint.json b/tslint.json index 48212b6..0015a4c 100644 --- a/tslint.json +++ b/tslint.json @@ -26,7 +26,8 @@ ], "max-classes-per-file": false, "interface-name": false, - "member-ordering": false + "member-ordering": false, + "no-submodule-imports": false }, "rulesDirectory": [] }