diff --git a/README.md b/README.md index deb8c37..bf0bc10 100644 --- a/README.md +++ b/README.md @@ -37,10 +37,10 @@ Three.js powered Minecraft skin viewer. skinViewer.height = 400; // Control objects with your mouse! - let control = new skinview3d.SkinControl(skinViewer); - control.rotation = true; - control.zoom = false; - control.pan = false; + let control = skinview3d.createOrbitControls(skinViewer); + control.enableRotate = true; + control.enableZoom = false; + control.enablePan = false; skinViewer.animation = new skinview3d.CompositeAnimation(); diff --git a/src/orbit_controls.js b/src/orbit_controls.js index 08f8af2..633ee47 100644 --- a/src/orbit_controls.js +++ b/src/orbit_controls.js @@ -593,4 +593,17 @@ class OrbitControls extends THREE.EventDispatcher { } } -export { OrbitControls }; +function createOrbitControls(skinViewer) { + let control = new OrbitControls(skinViewer.camera, skinViewer.renderer.domElement); + + // default configuration + control.enablePan = false; + control.target = new THREE.Vector3(0, -12, 0); + control.minDistance = 10; + control.maxDistance = 256; + control.update(); + + return control; +} + +export { OrbitControls, createOrbitControls }; diff --git a/src/skinview3d.js b/src/skinview3d.js index a2a5644..f4069d9 100644 --- a/src/skinview3d.js +++ b/src/skinview3d.js @@ -1,5 +1,6 @@ export { SkinObject, CapeObject, PlayerObject } from "./model"; -export { SkinViewer, MouseControl } from "./viewer"; +export { SkinViewer } from "./viewer"; +export { OrbitControls, createOrbitControls } from "./orbit_controls"; export { invokeAnimation, CompositeAnimation, diff --git a/src/viewer.js b/src/viewer.js index 660db0e..964157a 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -1,6 +1,5 @@ import * as THREE from "three"; import { PlayerObject } from "./model"; -import { OrbitControls } from "./orbit_controls"; import { invokeAnimation } from "./animation"; function copyImage(context, sX, sY, w, h, dX, dY, flipHorizontal) { @@ -228,45 +227,4 @@ class SkinViewer { } } -class MouseControl { - constructor(skinViewer) { - this.skinViewer = skinViewer; - - this.orbitControls = new OrbitControls(skinViewer.camera, skinViewer.renderer.domElement); - this.orbitControls.enablePan = false; - this.orbitControls.target = new THREE.Vector3(0, -12, 0); - this.orbitControls.minDistance = 10; - this.orbitControls.maxDistance = 256; - this.orbitControls.update(); - } - - get rotation() { - return this.orbitControls.enableRotate; - } - - set rotation(value) { - this.orbitControls.enableRotate = value; - } - - get zoom() { - return this.orbitControls.enableZoom; - } - - set zoom(value) { - this.orbitControls.enableZoom = value; - } - - get pan() { - return this.orbitControls.enablePan; - } - - set pan(value) { - this.orbitControls.enablePan = value; - } - - dispose() { - this.orbitControls.dispose(); - } -} - -export { SkinViewer, MouseControl }; +export { SkinViewer }; diff --git a/types/orbit_controls.d.ts b/types/orbit_controls.d.ts new file mode 100644 index 0000000..73cdcac --- /dev/null +++ b/types/orbit_controls.d.ts @@ -0,0 +1,57 @@ +import * as THREE from "three"; +import { SkinViewer } from "./viewer"; + +export class OrbitControls { + + public readonly object: THREE.Camera; + public readonly domElement: HTMLElement | HTMLDocument; + + public enabled: boolean; + public target: THREE.Vector3; + + public minDistance: number; + public maxDistance: number; + + public minZoom: number; + public maxZoom: number; + + public minPolarAngle: number; + public maxPolarAngle: number; + + public minAzimuthAngle: number; + public maxAzimuthAngle: number; + + public enableDamping: boolean; + public dampingFactor: number; + + public enableZoom: boolean; + public zoomSpeed: number; + + public enableRotate: boolean; + public rotateSpeed: number; + + public enablePan: boolean; + public keyPanSpeed: number; + + public autoRotate: boolean; + public autoRotateSpeed: number; + + public enableKeys: boolean; + public keys: { LEFT: number, UP: number, RIGHT: number, BOTTOM: number }; + + public mouseButtons: { ORBIT: THREE.MOUSE, ZOOM: THREE.MOUSE, PAN: THREE.MOUSE }; + + constructor(object: THREE.Camera, domElement?: HTMLElement); + + public getPolarAngle(): number; + public getAzimuthalAngle(): number; + + public saveState(): void; + public reset(): void; + + public update(): boolean; + + public dispose(): void; +} + +export function createOrbitControls(skinViewer: SkinViewer): OrbitControls; diff --git a/types/skinview3d.d.ts b/types/skinview3d.d.ts index 43581bc..befec93 100644 --- a/types/skinview3d.d.ts +++ b/types/skinview3d.d.ts @@ -1,3 +1,4 @@ export * from "./model"; export * from "./animation"; export * from "./viewer"; +export * from "./orbit_controls";