Revert "Merge remote-tracking branch 'ShirasawaSama/master'"
This reverts commit9f6017d14c, reversing changes made todb1884e782. This reverts #41.
This commit is contained in:
yushijinhun
parent
acda22d0e4
commit
2f304996ae
|
|
@ -19,7 +19,9 @@
|
|||
|
||||
<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>
|
||||
let skinViewer = new skinview3d.SkinViewer({
|
||||
|
|
|
|||
|
|
@ -3,73 +3,48 @@ import typescript from "rollup-plugin-typescript2";
|
|||
import resolve from "@rollup/plugin-node-resolve";
|
||||
import license from "rollup-plugin-license";
|
||||
|
||||
const umd = {
|
||||
format: "umd",
|
||||
name: "skinview3d",
|
||||
indent: "\t",
|
||||
globals: {
|
||||
"three": "THREE"
|
||||
}
|
||||
};
|
||||
|
||||
const es = {
|
||||
format: "es",
|
||||
indent: "\t"
|
||||
};
|
||||
|
||||
const resolverPlugin = {
|
||||
name: "resolver",
|
||||
resolveId: id => id.startsWith("three/src/") ? "three" : undefined
|
||||
};
|
||||
|
||||
const licensePlugin = license({
|
||||
banner: `
|
||||
const base = {
|
||||
input: "src/skinview3d.ts",
|
||||
output: [
|
||||
{
|
||||
format: "umd",
|
||||
name: "skinview3d",
|
||||
file: "dist/skinview3d.js",
|
||||
indent: "\t",
|
||||
globals: {
|
||||
"three": "THREE"
|
||||
}
|
||||
},
|
||||
{
|
||||
format: "es",
|
||||
file: "dist/skinview3d.module.js",
|
||||
indent: "\t"
|
||||
}
|
||||
],
|
||||
external: [
|
||||
"three"
|
||||
],
|
||||
plugins: [
|
||||
resolve(),
|
||||
typescript(),
|
||||
license({
|
||||
banner: `
|
||||
skinview3d (https://github.com/bs-community/skinview3d)
|
||||
|
||||
MIT License
|
||||
`
|
||||
});
|
||||
|
||||
const base = {
|
||||
input: "src/skinview3d.ts",
|
||||
external: [
|
||||
"three"
|
||||
})
|
||||
]
|
||||
};
|
||||
|
||||
export default [
|
||||
{
|
||||
...base,
|
||||
output: [
|
||||
{ ...umd, file: "dist/skinview3d.js" },
|
||||
{ ...es, file: "dist/skinview3d.module.js" }
|
||||
],
|
||||
plugins: [
|
||||
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
|
||||
]
|
||||
}
|
||||
base,
|
||||
Object.assign({}, base, {
|
||||
output: Object.assign({}, base.output[0], { file: "dist/skinview3d.min.js" }),
|
||||
plugins: (() => {
|
||||
const plugin = base.plugins.slice();
|
||||
plugin.splice(1, 0, terser());
|
||||
return plugin;
|
||||
})()
|
||||
})
|
||||
];
|
||||
|
|
|
|||
|
|
@ -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: Clock = new Clock(true);
|
||||
readonly clock: THREE.Clock = new THREE.Clock(true);
|
||||
|
||||
get animation() {
|
||||
return this;
|
||||
|
|
|
|||
97
src/model.ts
97
src/model.ts
|
|
@ -1,16 +1,11 @@
|
|||
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";
|
||||
import * as THREE from "three";
|
||||
|
||||
function toFaceVertices(x1: number, y1: number, x2: number, y2: number, w: number, h: number) {
|
||||
return [
|
||||
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)
|
||||
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)
|
||||
];
|
||||
}
|
||||
|
||||
|
|
@ -22,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: 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][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.
|
||||
*/
|
||||
export class BodyPart extends Group {
|
||||
export class BodyPart extends THREE.Group {
|
||||
constructor(
|
||||
readonly innerLayer: Object3D,
|
||||
readonly outerLayer: Object3D
|
||||
readonly innerLayer: THREE.Object3D,
|
||||
readonly outerLayer: THREE.Object3D
|
||||
) {
|
||||
super();
|
||||
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
|
||||
readonly head: BodyPart;
|
||||
|
|
@ -68,11 +63,11 @@ export class SkinObject extends Group {
|
|||
private modelListeners: Array<() => void> = []; // called when model(slim property) is changed
|
||||
private _slim = false;
|
||||
|
||||
constructor(layer1Material: MeshBasicMaterial, layer2Material: MeshBasicMaterial) {
|
||||
constructor(layer1Material: THREE.MeshBasicMaterial, layer2Material: THREE.MeshBasicMaterial) {
|
||||
super();
|
||||
|
||||
// Head
|
||||
const headBox = new BoxGeometry(8, 8, 8, 0, 0, 0);
|
||||
const headBox = new THREE.BoxGeometry(8, 8, 8, 0, 0, 0);
|
||||
setVertices(headBox,
|
||||
toSkinVertices(8, 0, 16, 8),
|
||||
toSkinVertices(16, 0, 24, 8),
|
||||
|
|
@ -81,9 +76,9 @@ export class SkinObject extends Group {
|
|||
toSkinVertices(16, 8, 24, 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,
|
||||
toSkinVertices(40, 0, 48, 8),
|
||||
toSkinVertices(48, 0, 56, 8),
|
||||
|
|
@ -92,7 +87,7 @@ export class SkinObject extends Group {
|
|||
toSkinVertices(48, 8, 56, 16),
|
||||
toSkinVertices(56, 8, 64, 16)
|
||||
);
|
||||
const head2Mesh = new Mesh(head2Box, layer2Material);
|
||||
const head2Mesh = new THREE.Mesh(head2Box, layer2Material);
|
||||
head2Mesh.renderOrder = -1;
|
||||
|
||||
this.head = new BodyPart(headMesh, head2Mesh);
|
||||
|
|
@ -101,7 +96,7 @@ export class SkinObject extends Group {
|
|||
this.add(this.head);
|
||||
|
||||
// Body
|
||||
const bodyBox = new BoxGeometry(8, 12, 4, 0, 0, 0);
|
||||
const bodyBox = new THREE.BoxGeometry(8, 12, 4, 0, 0, 0);
|
||||
setVertices(bodyBox,
|
||||
toSkinVertices(20, 16, 28, 20),
|
||||
toSkinVertices(28, 16, 36, 20),
|
||||
|
|
@ -110,9 +105,9 @@ export class SkinObject extends Group {
|
|||
toSkinVertices(28, 20, 32, 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,
|
||||
toSkinVertices(20, 32, 28, 36),
|
||||
toSkinVertices(28, 32, 36, 36),
|
||||
|
|
@ -121,7 +116,7 @@ export class SkinObject extends Group {
|
|||
toSkinVertices(28, 36, 32, 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.name = "body";
|
||||
|
|
@ -130,8 +125,8 @@ export class SkinObject extends Group {
|
|||
this.add(this.body);
|
||||
|
||||
// Right Arm
|
||||
const rightArmBox = new BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related
|
||||
const rightArmMesh = new Mesh(rightArmBox, layer1Material);
|
||||
const rightArmBox = new THREE.BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related
|
||||
const rightArmMesh = new THREE.Mesh(rightArmBox, layer1Material);
|
||||
this.modelListeners.push(() => {
|
||||
rightArmMesh.scale.x = (this.slim ? 3 : 4) - esp;
|
||||
rightArmMesh.scale.y = 12 - esp;
|
||||
|
|
@ -159,8 +154,8 @@ export class SkinObject extends Group {
|
|||
rightArmBox.elementsNeedUpdate = true;
|
||||
});
|
||||
|
||||
const rightArm2Box = new BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related
|
||||
const rightArm2Mesh = new Mesh(rightArm2Box, layer2Material);
|
||||
const rightArm2Box = new THREE.BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related
|
||||
const rightArm2Mesh = new THREE.Mesh(rightArm2Box, layer2Material);
|
||||
rightArm2Mesh.renderOrder = 1;
|
||||
this.modelListeners.push(() => {
|
||||
rightArm2Mesh.scale.x = (this.slim ? 3.375 : 4.5) - esp;
|
||||
|
|
@ -189,7 +184,7 @@ export class SkinObject extends Group {
|
|||
rightArm2Box.elementsNeedUpdate = true;
|
||||
});
|
||||
|
||||
const rightArmPivot = new Group();
|
||||
const rightArmPivot = new THREE.Group();
|
||||
rightArmPivot.add(rightArmMesh, rightArm2Mesh);
|
||||
rightArmPivot.position.y = -6;
|
||||
|
||||
|
|
@ -203,8 +198,8 @@ export class SkinObject extends Group {
|
|||
this.add(this.rightArm);
|
||||
|
||||
// Left Arm
|
||||
const leftArmBox = new BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related
|
||||
const leftArmMesh = new Mesh(leftArmBox, layer1Material);
|
||||
const leftArmBox = new THREE.BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related
|
||||
const leftArmMesh = new THREE.Mesh(leftArmBox, layer1Material);
|
||||
this.modelListeners.push(() => {
|
||||
leftArmMesh.scale.x = (this.slim ? 3 : 4) - esp;
|
||||
leftArmMesh.scale.y = 12 - esp;
|
||||
|
|
@ -232,8 +227,8 @@ export class SkinObject extends Group {
|
|||
leftArmBox.elementsNeedUpdate = true;
|
||||
});
|
||||
|
||||
const leftArm2Box = new BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related
|
||||
const leftArm2Mesh = new Mesh(leftArm2Box, layer2Material);
|
||||
const leftArm2Box = new THREE.BoxGeometry(1, 1, 1, 0, 0, 0); // w/d/h is model-related
|
||||
const leftArm2Mesh = new THREE.Mesh(leftArm2Box, layer2Material);
|
||||
leftArm2Mesh.renderOrder = 1;
|
||||
this.modelListeners.push(() => {
|
||||
leftArm2Mesh.scale.x = (this.slim ? 3.375 : 4.5) - esp;
|
||||
|
|
@ -262,7 +257,7 @@ export class SkinObject extends Group {
|
|||
leftArm2Box.elementsNeedUpdate = true;
|
||||
});
|
||||
|
||||
const leftArmPivot = new Group();
|
||||
const leftArmPivot = new THREE.Group();
|
||||
leftArmPivot.add(leftArmMesh, leftArm2Mesh);
|
||||
leftArmPivot.position.y = -6;
|
||||
|
||||
|
|
@ -276,7 +271,7 @@ export class SkinObject extends Group {
|
|||
this.add(this.leftArm);
|
||||
|
||||
// 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,
|
||||
toSkinVertices(4, 16, 8, 20),
|
||||
toSkinVertices(8, 16, 12, 20),
|
||||
|
|
@ -285,9 +280,9 @@ export class SkinObject extends Group {
|
|||
toSkinVertices(8, 20, 12, 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,
|
||||
toSkinVertices(4, 32, 8, 36),
|
||||
toSkinVertices(8, 32, 12, 36),
|
||||
|
|
@ -296,10 +291,10 @@ export class SkinObject extends Group {
|
|||
toSkinVertices(8, 36, 12, 48),
|
||||
toSkinVertices(12, 36, 16, 48)
|
||||
);
|
||||
const rightLeg2Mesh = new Mesh(rightLeg2Box, layer2Material);
|
||||
const rightLeg2Mesh = new THREE.Mesh(rightLeg2Box, layer2Material);
|
||||
rightLeg2Mesh.renderOrder = 1;
|
||||
|
||||
const rightLegPivot = new Group();
|
||||
const rightLegPivot = new THREE.Group();
|
||||
rightLegPivot.add(rightLegMesh, rightLeg2Mesh);
|
||||
rightLegPivot.position.y = -6;
|
||||
|
||||
|
|
@ -311,7 +306,7 @@ export class SkinObject extends Group {
|
|||
this.add(this.rightLeg);
|
||||
|
||||
// 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,
|
||||
toSkinVertices(20, 48, 24, 52),
|
||||
toSkinVertices(24, 48, 28, 52),
|
||||
|
|
@ -320,9 +315,9 @@ export class SkinObject extends Group {
|
|||
toSkinVertices(24, 52, 28, 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,
|
||||
toSkinVertices(4, 48, 8, 52),
|
||||
toSkinVertices(8, 48, 12, 52),
|
||||
|
|
@ -331,10 +326,10 @@ export class SkinObject extends Group {
|
|||
toSkinVertices(8, 52, 12, 64),
|
||||
toSkinVertices(12, 52, 16, 64)
|
||||
);
|
||||
const leftLeg2Mesh = new Mesh(leftLeg2Box, layer2Material);
|
||||
const leftLeg2Mesh = new THREE.Mesh(leftLeg2Box, layer2Material);
|
||||
leftLeg2Mesh.renderOrder = 1;
|
||||
|
||||
const leftLegPivot = new Group();
|
||||
const leftLegPivot = new THREE.Group();
|
||||
leftLegPivot.add(leftLegMesh, leftLeg2Mesh);
|
||||
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();
|
||||
|
||||
// back = outside
|
||||
// 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,
|
||||
toCapeVertices(1, 0, 11, 1),
|
||||
toCapeVertices(11, 0, 21, 1),
|
||||
|
|
@ -388,19 +383,19 @@ export class CapeObject extends Group {
|
|||
toCapeVertices(0, 1, 1, 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.z = -0.5;
|
||||
this.add(this.cape);
|
||||
}
|
||||
}
|
||||
|
||||
export class PlayerObject extends Group {
|
||||
export class PlayerObject extends THREE.Group {
|
||||
|
||||
readonly skin: SkinObject;
|
||||
readonly cape: CapeObject;
|
||||
|
||||
constructor(layer1Material: MeshBasicMaterial, layer2Material: MeshBasicMaterial, capeMaterial: MeshBasicMaterial) {
|
||||
constructor(layer1Material: THREE.MeshBasicMaterial, layer2Material: THREE.MeshBasicMaterial, capeMaterial: THREE.MeshBasicMaterial) {
|
||||
super();
|
||||
|
||||
this.skin = new SkinObject(layer1Material, layer2Material);
|
||||
|
|
|
|||
|
|
@ -1,12 +1,4 @@
|
|||
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 * as THREE from "three";
|
||||
import { SkinViewer } from "./viewer";
|
||||
|
||||
const STATE = {
|
||||
|
|
@ -24,7 +16,7 @@ const START_EVENT = { type: "start" };
|
|||
const END_EVENT = { type: "end" };
|
||||
const EPS = 0.000001;
|
||||
|
||||
export class OrbitControls extends EventDispatcher {
|
||||
export class OrbitControls extends THREE.EventDispatcher {
|
||||
/**
|
||||
* @preserve
|
||||
* 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
|
||||
// Pan - right mouse, or arrow keys / touch: three finger swipe
|
||||
|
||||
object: Camera;
|
||||
object: THREE.Camera;
|
||||
domElement: HTMLElement | HTMLDocument;
|
||||
window: Window;
|
||||
|
||||
// API
|
||||
enabled: boolean;
|
||||
target: Vector3;
|
||||
target: THREE.Vector3;
|
||||
|
||||
enableZoom: boolean;
|
||||
zoomSpeed: number;
|
||||
|
|
@ -92,41 +84,41 @@ export class OrbitControls extends EventDispatcher {
|
|||
maxAzimuthAngle: number;
|
||||
enableKeys: boolean;
|
||||
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;
|
||||
dampingFactor: number;
|
||||
|
||||
private spherical: Spherical;
|
||||
private sphericalDelta: Spherical;
|
||||
private spherical: THREE.Spherical;
|
||||
private sphericalDelta: THREE.Spherical;
|
||||
private scale: number;
|
||||
private target0: Vector3;
|
||||
private position0: Vector3;
|
||||
private target0: THREE.Vector3;
|
||||
private position0: THREE.Vector3;
|
||||
private zoom0: any;
|
||||
private state: number;
|
||||
private panOffset: Vector3;
|
||||
private panOffset: THREE.Vector3;
|
||||
private zoomChanged: boolean;
|
||||
|
||||
private rotateStart: Vector2;
|
||||
private rotateEnd: Vector2;
|
||||
private rotateDelta: Vector2;
|
||||
private rotateStart: THREE.Vector2;
|
||||
private rotateEnd: THREE.Vector2;
|
||||
private rotateDelta: THREE.Vector2;
|
||||
|
||||
private panStart: Vector2;
|
||||
private panEnd: Vector2;
|
||||
private panDelta: Vector2;
|
||||
private panStart: THREE.Vector2;
|
||||
private panEnd: THREE.Vector2;
|
||||
private panDelta: THREE.Vector2;
|
||||
|
||||
private dollyStart: Vector2;
|
||||
private dollyEnd: Vector2;
|
||||
private dollyDelta: Vector2;
|
||||
private dollyStart: THREE.Vector2;
|
||||
private dollyEnd: THREE.Vector2;
|
||||
private dollyDelta: THREE.Vector2;
|
||||
|
||||
private updateLastPosition: Vector3;
|
||||
private updateOffset: Vector3;
|
||||
private updateQuat: Quaternion;
|
||||
private updateLastQuaternion: Quaternion;
|
||||
private updateQuatInverse: Quaternion;
|
||||
private updateLastPosition: THREE.Vector3;
|
||||
private updateOffset: THREE.Vector3;
|
||||
private updateQuat: THREE.Quaternion;
|
||||
private updateLastQuaternion: THREE.Quaternion;
|
||||
private updateQuatInverse: THREE.Quaternion;
|
||||
|
||||
private panLeftV: Vector3;
|
||||
private panUpV: Vector3;
|
||||
private panInternalOffset: Vector3;
|
||||
private panLeftV: THREE.Vector3;
|
||||
private panUpV: THREE.Vector3;
|
||||
private panInternalOffset: THREE.Vector3;
|
||||
|
||||
private onContextMenu: EventListener;
|
||||
private onMouseUp: EventListener;
|
||||
|
|
@ -138,7 +130,7 @@ export class OrbitControls extends EventDispatcher {
|
|||
private onTouchMove: EventListener;
|
||||
private onKeyDown: EventListener;
|
||||
|
||||
constructor(object: Camera, domElement?: HTMLElement, domWindow?: Window) {
|
||||
constructor(object: THREE.Camera, domElement?: HTMLElement, domWindow?: Window) {
|
||||
super();
|
||||
this.object = object;
|
||||
|
||||
|
|
@ -149,7 +141,7 @@ export class OrbitControls extends EventDispatcher {
|
|||
this.enabled = true;
|
||||
|
||||
// "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 )
|
||||
this.minDistance = 0;
|
||||
|
|
@ -199,7 +191,7 @@ export class OrbitControls extends EventDispatcher {
|
|||
this.keys = { LEFT: 37, UP: 38, RIGHT: 39, BOTTOM: 40 };
|
||||
|
||||
// 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
|
||||
this.target0 = this.target.clone();
|
||||
|
|
@ -207,38 +199,38 @@ export class OrbitControls extends EventDispatcher {
|
|||
this.zoom0 = (this.object as any).zoom;
|
||||
|
||||
// for update speedup
|
||||
this.updateOffset = new Vector3();
|
||||
this.updateOffset = new THREE.Vector3();
|
||||
// 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.updateLastPosition = new Vector3();
|
||||
this.updateLastQuaternion = new Quaternion();
|
||||
this.updateLastPosition = new THREE.Vector3();
|
||||
this.updateLastQuaternion = new THREE.Quaternion();
|
||||
|
||||
this.state = STATE.NONE;
|
||||
this.scale = 1;
|
||||
|
||||
// current position in spherical coordinates
|
||||
this.spherical = new Spherical();
|
||||
this.sphericalDelta = new Spherical();
|
||||
this.spherical = new THREE.Spherical();
|
||||
this.sphericalDelta = new THREE.Spherical();
|
||||
|
||||
this.panOffset = new Vector3();
|
||||
this.panOffset = new THREE.Vector3();
|
||||
this.zoomChanged = false;
|
||||
|
||||
this.rotateStart = new Vector2();
|
||||
this.rotateEnd = new Vector2();
|
||||
this.rotateDelta = new Vector2();
|
||||
this.rotateStart = new THREE.Vector2();
|
||||
this.rotateEnd = new THREE.Vector2();
|
||||
this.rotateDelta = new THREE.Vector2();
|
||||
|
||||
this.panStart = new Vector2();
|
||||
this.panEnd = new Vector2();
|
||||
this.panDelta = new Vector2();
|
||||
this.panStart = new THREE.Vector2();
|
||||
this.panEnd = new THREE.Vector2();
|
||||
this.panDelta = new THREE.Vector2();
|
||||
|
||||
this.dollyStart = new Vector2();
|
||||
this.dollyEnd = new Vector2();
|
||||
this.dollyDelta = new Vector2();
|
||||
this.dollyStart = new THREE.Vector2();
|
||||
this.dollyEnd = new THREE.Vector2();
|
||||
this.dollyDelta = new THREE.Vector2();
|
||||
|
||||
this.panLeftV = new Vector3();
|
||||
this.panUpV = new Vector3();
|
||||
this.panInternalOffset = new Vector3();
|
||||
this.panLeftV = new THREE.Vector3();
|
||||
this.panUpV = new THREE.Vector3();
|
||||
this.panInternalOffset = new THREE.Vector3();
|
||||
|
||||
// event handlers - FSM: listen for events and reset state
|
||||
|
||||
|
|
@ -596,7 +588,7 @@ export class OrbitControls extends EventDispatcher {
|
|||
pan(deltaX: number, deltaY: number) {
|
||||
const element = this.domElement === document ? this.domElement.body : this.domElement;
|
||||
|
||||
if (this.object instanceof PerspectiveCamera) {
|
||||
if (this.object instanceof THREE.PerspectiveCamera) {
|
||||
// perspective
|
||||
const position = this.object.position;
|
||||
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
|
||||
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 OrthographicCamera) {
|
||||
} else if (this.object instanceof THREE.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);
|
||||
|
|
@ -620,9 +612,9 @@ export class OrbitControls extends EventDispatcher {
|
|||
}
|
||||
|
||||
dollyIn(dollyScale) {
|
||||
if (this.object instanceof PerspectiveCamera) {
|
||||
if (this.object instanceof THREE.PerspectiveCamera) {
|
||||
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.updateProjectionMatrix();
|
||||
this.zoomChanged = true;
|
||||
|
|
@ -633,9 +625,9 @@ export class OrbitControls extends EventDispatcher {
|
|||
}
|
||||
|
||||
dollyOut(dollyScale) {
|
||||
if (this.object instanceof PerspectiveCamera) {
|
||||
if (this.object instanceof THREE.PerspectiveCamera) {
|
||||
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.updateProjectionMatrix();
|
||||
this.zoomChanged = true;
|
||||
|
|
@ -699,7 +691,7 @@ export class OrbitControls extends EventDispatcher {
|
|||
}
|
||||
|
||||
// backward compatibility
|
||||
// get center(): Vector3 {
|
||||
// get center(): THREE.Vector3 {
|
||||
// console.warn("THREE.OrbitControls: .center has been renamed to .target");
|
||||
// return this.target;
|
||||
// }
|
||||
|
|
@ -718,7 +710,7 @@ interface ThreeEvent extends Event {
|
|||
clientX: number;
|
||||
clientY: number;
|
||||
deltaY: number;
|
||||
button: MOUSE;
|
||||
button: THREE.MOUSE;
|
||||
touches: Array<any>;
|
||||
keyCode: number;
|
||||
}
|
||||
|
|
@ -728,7 +720,7 @@ export function createOrbitControls(skinViewer: SkinViewer) {
|
|||
|
||||
// default configuration
|
||||
control.enablePan = false;
|
||||
control.target = new Vector3(0, -12, 0);
|
||||
control.target = new THREE.Vector3(0, -12, 0);
|
||||
control.minDistance = 10;
|
||||
control.maxDistance = 256;
|
||||
control.update();
|
||||
|
|
|
|||
|
|
@ -1,13 +1,7 @@
|
|||
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 * as THREE from "three";
|
||||
import { PlayerObject } from "./model";
|
||||
import { isSlimSkin, loadCapeToCanvas, loadSkinToCanvas } from "./utils";
|
||||
import { RootAnimation } from "./animation";
|
||||
import { loadSkinToCanvas, loadCapeToCanvas, isSlimSkin } from "./utils";
|
||||
|
||||
export interface SkinViewerOptions {
|
||||
domElement: Node;
|
||||
|
|
@ -28,19 +22,19 @@ export class SkinViewer {
|
|||
|
||||
public readonly skinImg: HTMLImageElement;
|
||||
public readonly skinCanvas: HTMLCanvasElement;
|
||||
public readonly skinTexture: Texture;
|
||||
public readonly skinTexture: THREE.Texture;
|
||||
|
||||
public readonly capeImg: HTMLImageElement;
|
||||
public readonly capeCanvas: HTMLCanvasElement;
|
||||
public readonly capeTexture: Texture;
|
||||
public readonly capeTexture: THREE.Texture;
|
||||
|
||||
public readonly layer1Material: MeshBasicMaterial;
|
||||
public readonly layer2Material: MeshBasicMaterial;
|
||||
public readonly capeMaterial: MeshBasicMaterial;
|
||||
public readonly layer1Material: THREE.MeshBasicMaterial;
|
||||
public readonly layer2Material: THREE.MeshBasicMaterial;
|
||||
public readonly capeMaterial: THREE.MeshBasicMaterial;
|
||||
|
||||
public readonly scene: Scene;
|
||||
public readonly camera: PerspectiveCamera;
|
||||
public readonly renderer: WebGLRenderer;
|
||||
public readonly scene: THREE.Scene;
|
||||
public readonly camera: THREE.PerspectiveCamera;
|
||||
public readonly renderer: THREE.WebGLRenderer;
|
||||
|
||||
public readonly playerObject: PlayerObject;
|
||||
|
||||
|
|
@ -55,29 +49,29 @@ export class SkinViewer {
|
|||
// texture
|
||||
this.skinImg = new Image();
|
||||
this.skinCanvas = document.createElement("canvas");
|
||||
this.skinTexture = new Texture(this.skinCanvas);
|
||||
this.skinTexture.magFilter = NearestFilter;
|
||||
this.skinTexture.minFilter = NearestFilter;
|
||||
this.skinTexture = new THREE.Texture(this.skinCanvas);
|
||||
this.skinTexture.magFilter = THREE.NearestFilter;
|
||||
this.skinTexture.minFilter = THREE.NearestFilter;
|
||||
|
||||
this.capeImg = new Image();
|
||||
this.capeCanvas = document.createElement("canvas");
|
||||
this.capeTexture = new Texture(this.capeCanvas);
|
||||
this.capeTexture.magFilter = NearestFilter;
|
||||
this.capeTexture.minFilter = NearestFilter;
|
||||
this.capeTexture = new THREE.Texture(this.capeCanvas);
|
||||
this.capeTexture.magFilter = THREE.NearestFilter;
|
||||
this.capeTexture.minFilter = THREE.NearestFilter;
|
||||
|
||||
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 });
|
||||
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 });
|
||||
|
||||
// scene
|
||||
this.scene = new Scene();
|
||||
this.scene = new THREE.Scene();
|
||||
|
||||
// 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.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.domElement.appendChild(this.renderer.domElement);
|
||||
|
||||
|
|
@ -173,7 +167,7 @@ export class SkinViewer {
|
|||
}
|
||||
|
||||
get width() {
|
||||
const target = new Vector2();
|
||||
const target = new THREE.Vector2();
|
||||
return this.renderer.getSize(target).width;
|
||||
}
|
||||
|
||||
|
|
@ -182,7 +176,7 @@ export class SkinViewer {
|
|||
}
|
||||
|
||||
get height() {
|
||||
const target = new Vector2();
|
||||
const target = new THREE.Vector2();
|
||||
return this.renderer.getSize(target).height;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -26,8 +26,7 @@
|
|||
],
|
||||
"max-classes-per-file": false,
|
||||
"interface-name": false,
|
||||
"member-ordering": false,
|
||||
"no-submodule-imports": false
|
||||
"member-ordering": false
|
||||
},
|
||||
"rulesDirectory": []
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue