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

Drop namespace THREE 

Co-authored-by: Shirasawa <764798966@qq.com>
This commit is contained in:
yushijinhun 2020-01-01 17:18:06 +08:00
parent 2f304996ae
commit f969e7dbe0
No known key found for this signature in database
GPG Key ID: 5BC167F73EA558E4
4 changed files with 131 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/animation.ts
View File

@ -1,5 +1,5 @@
import { Clock } from "three";
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;

92
src/model.ts
View File

@ -1,11 +1,11 @@
import * as THREE from "three";
import { BoxGeometry, Group, Mesh, MeshBasicMaterial, Object3D, Vector2 } from "three";
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 +17,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<THREE.Vector2>, bottom: Array<THREE.Vector2>, left: Array<THREE.Vector2>, front: Array<THREE.Vector2>, right: Array<THREE.Vector2>, back: Array<THREE.Vector2>) {
function setVertices(box: BoxGeometry, top: Array<Vector2>, bottom: Array<Vector2>, left: Array<Vector2>, front: Array<Vector2>, right: Array<Vector2>, back: Array<Vector2>) {
box.faceVertexUvs[0] = [];
box.faceVertexUvs[0][0] = [right[3], right[0], right[2]];
@ -39,10 +39,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 +50,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 +63,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 +76,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 +87,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 +96,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 +105,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 +116,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 +125,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 +154,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 +184,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 +198,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 +227,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 +257,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 +271,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 +280,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 +291,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 +306,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 +315,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 +326,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 +365,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 +383,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);

116
src/orbit_controls.ts
View File

@ -1,4 +1,4 @@
import * as THREE from "three";
import { Camera, EventDispatcher, MOUSE, OrthographicCamera, PerspectiveCamera, Quaternion, Spherical, Vector2, Vector3 } from "three";
import { SkinViewer } from "./viewer";
const STATE = {
@ -16,7 +16,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 +58,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 +84,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 +130,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 +141,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 +191,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 +199,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 +588,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 +600,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 +612,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 +625,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 +691,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 +710,7 @@ interface ThreeEvent extends Event {
clientX: number;
clientY: number;
deltaY: number;
button: THREE.MOUSE;
button: MOUSE;
touches: Array<any>;
keyCode: number;
}
@ -720,7 +720,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();

50
src/viewer.ts
View File

@ -1,7 +1,7 @@
import * as THREE from "three";
import { PlayerObject } from "./model";
import { DoubleSide, FrontSide, MeshBasicMaterial, NearestFilter, PerspectiveCamera, Scene, Texture, Vector2, WebGLRenderer } from "three";
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 +22,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 +49,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.domElement.appendChild(this.renderer.domElement);
@ -167,7 +167,7 @@ export class SkinViewer {
}
get width() {
const target = new THREE.Vector2();
const target = new Vector2();
return this.renderer.getSize(target).width;
}
@ -176,7 +176,7 @@ export class SkinViewer {
}
get height() {
const target = new THREE.Vector2();
const target = new Vector2();
return this.renderer.getSize(target).height;
}