From 776c96a300e070741958d6de22a6068dd79a5966 Mon Sep 17 00:00:00 2001 From: yushijinhun Date: Fri, 31 Jan 2020 08:34:55 +0800 Subject: [PATCH 1/5] Rename jsm -> libs --- .gitignore | 2 +- package.json | 14 +++++++------- tsconfig.json | 2 +- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/.gitignore b/.gitignore index 4bf852f..72a3e99 100644 --- a/.gitignore +++ b/.gitignore @@ -58,7 +58,7 @@ typings/ .env dist/ -jsm/ +libs/ _ignore/ dist/ .DS_Store diff --git a/package.json b/package.json index 1bf175e..5d7d242 100644 --- a/package.json +++ b/package.json @@ -2,19 +2,19 @@ "name": "skinview3d", "version": "2.0.0-alpha.1", "description": "Three.js powered Minecraft skin viewer", - "main": "jsm/skinview3d.js", + "main": "libs/skinview3d.js", "type": "module", "scripts": { - "clean": "rimraf jsm dist", - "build:jsm": "tsc -p .", + "clean": "rimraf libs dist", + "build:modules": "tsc -p .", "build:umd": "rollup -c", - "build": "npm run build:jsm && npm run build:umd", + "build": "npm run build:modules && npm run build:umd", "test:lint": "eslint --ext .ts src", "test": "npm run test:lint", - "dev:watch:jsm": "tsc -w -p .", + "dev:watch:modules": "tsc -w -p .", "dev:watch:umd": "rollup -w -c", "dev:serve": "ws", - "dev": "npm-run-all --parallel dev:watch:jsm dev:watch:umd dev:serve", + "dev": "npm-run-all --parallel dev:watch:modules dev:watch:umd dev:serve", "prepublishOnly": "npm run clean && npm run build" }, "repository": { @@ -34,7 +34,7 @@ }, "homepage": "https://github.com/bs-community/skinview3d", "files": [ - "jsm", + "libs", "dist" ], "dependencies": { diff --git a/tsconfig.json b/tsconfig.json index 6fcc3b8..97c5771 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -12,7 +12,7 @@ "strictFunctionTypes": false, "declaration": true, "sourceMap": true, - "outDir": "jsm", + "outDir": "libs", "types": [] }, "include": [ From 92abd67c8a07424fa82ac4333f4d0850f3c38bbe Mon Sep 17 00:00:00 2001 From: yushijinhun Date: Fri, 31 Jan 2020 08:39:58 +0800 Subject: [PATCH 2/5] Remove dist/ & add bundles/ --- .gitignore | 3 +-- package.json | 12 ++++++------ rollup.config.js | 8 +------- 3 files changed, 8 insertions(+), 15 deletions(-) diff --git a/.gitignore b/.gitignore index 72a3e99..ffea957 100644 --- a/.gitignore +++ b/.gitignore @@ -57,9 +57,8 @@ typings/ # dotenv environment variables file .env -dist/ +bundles/ libs/ _ignore/ -dist/ .DS_Store .rpt2_cache diff --git a/package.json b/package.json index 5d7d242..f26d470 100644 --- a/package.json +++ b/package.json @@ -5,16 +5,16 @@ "main": "libs/skinview3d.js", "type": "module", "scripts": { - "clean": "rimraf libs dist", + "clean": "rimraf libs bundles", "build:modules": "tsc -p .", - "build:umd": "rollup -c", - "build": "npm run build:modules && npm run build:umd", + "build:bundles": "rollup -c", + "build": "npm run build:modules && npm run build:bundles", "test:lint": "eslint --ext .ts src", "test": "npm run test:lint", "dev:watch:modules": "tsc -w -p .", - "dev:watch:umd": "rollup -w -c", + "dev:watch:bundles": "rollup -w -c", "dev:serve": "ws", - "dev": "npm-run-all --parallel dev:watch:modules dev:watch:umd dev:serve", + "dev": "npm-run-all --parallel dev:watch:modules dev:watch:bundles dev:serve", "prepublishOnly": "npm run clean && npm run build" }, "repository": { @@ -35,7 +35,7 @@ "homepage": "https://github.com/bs-community/skinview3d", "files": [ "libs", - "dist" + "bundles" ], "dependencies": { "three": "^0.112.1", diff --git a/rollup.config.js b/rollup.config.js index db203b7..94cc147 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -5,13 +5,10 @@ import { terser } from "rollup-plugin-terser"; export default { input: "src/skinview3d.ts", output: { - file: "dist/skinview3d.min.js", + file: "bundles/skinview3d.bundle.js", format: "umd", name: "skinview3d", banner: "/* @preserve skinview3d / MIT License / https://github.com/bs-community/skinview3d */", - globals: { - "three": "THREE" - }, sourcemap: true, compact: true }, @@ -19,8 +16,5 @@ export default { typescript(), resolve(), terser() - ], - external: [ - "three" ] }; From 743adb97b852cd9e2a83f29cf7bde240adb22ea1 Mon Sep 17 00:00:00 2001 From: yushijinhun Date: Fri, 31 Jan 2020 08:43:46 +0800 Subject: [PATCH 3/5] use three-minifier 599K -> 381K --- package-lock.json | 25 +++++++++++++++++++++++++ package.json | 1 + rollup.config.js | 2 ++ 3 files changed, 28 insertions(+) diff --git a/package-lock.json b/package-lock.json index 6411563..2ceccd4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -174,6 +174,16 @@ } } }, + "@yushijinhun/three-minifier-rollup": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/@yushijinhun/three-minifier-rollup/-/three-minifier-rollup-0.1.4.tgz", + "integrity": "sha512-tghDPR9O566LUgopJwCrtcDKBI2eS49cr2024ppW0qBmYQ+eCz8Zl/ljpe89leRlHK+XbuZVb0/4NEZ+c7gJlA==", + "dev": true, + "requires": { + "@rollup/plugin-node-resolve": "^7.0.0", + "magic-string": "^0.25.6" + } + }, "JSONStream": { "version": "1.3.5", "resolved": "https://registry.npmjs.org/JSONStream/-/JSONStream-1.3.5.tgz", @@ -1847,6 +1857,15 @@ "koa-static": "^5.0.0" } }, + "magic-string": { + "version": "0.25.6", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.6.tgz", + "integrity": "sha512-3a5LOMSGoCTH5rbqobC2HuDNRtE2glHZ8J7pK+QZYppyWA36yuNpsX994rIY2nCuyP7CZYy7lQq/X2jygiZ89g==", + "dev": true, + "requires": { + "sourcemap-codec": "^1.4.4" + } + }, "media-typer": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", @@ -2539,6 +2558,12 @@ "source-map": "^0.6.0" } }, + "sourcemap-codec": { + "version": "1.4.8", + "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz", + "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==", + "dev": true + }, "spdx-correct": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.0.tgz", diff --git a/package.json b/package.json index f26d470..df87476 100644 --- a/package.json +++ b/package.json @@ -46,6 +46,7 @@ "@rollup/plugin-typescript": "^2.1.0", "@typescript-eslint/eslint-plugin": "^2.17.0", "@typescript-eslint/parser": "^2.17.0", + "@yushijinhun/three-minifier-rollup": "^0.1.4", "eslint": "^6.8.0", "local-web-server": "^3.0.7", "npm-run-all": "^4.1.5", diff --git a/rollup.config.js b/rollup.config.js index 94cc147..31d2dd7 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -1,6 +1,7 @@ import resolve from "@rollup/plugin-node-resolve"; import typescript from '@rollup/plugin-typescript'; import { terser } from "rollup-plugin-terser"; +import { threeMinifier } from "@yushijinhun/three-minifier-rollup"; export default { input: "src/skinview3d.ts", @@ -13,6 +14,7 @@ export default { compact: true }, plugins: [ + threeMinifier(), typescript(), resolve(), terser() From 23b856362fd5605016812718b3095d18ec7fd213 Mon Sep 17 00:00:00 2001 From: yushijinhun Date: Fri, 31 Jan 2020 08:46:43 +0800 Subject: [PATCH 4/5] remove OrbitControls --- src/orbit_controls.ts | 684 +----------------------------------------- 1 file changed, 2 insertions(+), 682 deletions(-) diff --git a/src/orbit_controls.ts b/src/orbit_controls.ts index 18ed437..76d153d 100644 --- a/src/orbit_controls.ts +++ b/src/orbit_controls.ts @@ -1,686 +1,6 @@ -import { EventDispatcher, MOUSE, OrthographicCamera, PerspectiveCamera, Quaternion, Spherical, Vector2, Vector3 } from "three"; import { SkinViewer } from "./viewer.js"; - -const STATE = { - NONE: - 1, - ROTATE: 0, - DOLLY: 1, - PAN: 2, - TOUCH_ROTATE: 3, - TOUCH_DOLLY: 4, - TOUCH_PAN: 5 -}; - -const CHANGE_EVENT = { type: "change" }; -const START_EVENT = { type: "start" }; -const END_EVENT = { type: "end" }; -const EPS = 0.000001; - -export class OrbitControls extends EventDispatcher { - /** - * @preserve - * The code was originally from https://github.com/mrdoob/three.js/blob/d45a042cf962e9b1aa9441810ba118647b48aacb/examples/js/controls/OrbitControls.js - */ - /** - * @license - * Copyright (C) 2010-2017 three.js authors - * - * Permission is hereby granted, free of charge, to any person obtaining a copy - * of this software and associated documentation files (the "Software"), to deal - * in the Software without restriction, including without limitation the rights - * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - * copies of the Software, and to permit persons to whom the Software is - * furnished to do so, subject to the following conditions: - * - * The above copyright notice and this permission notice shall be included in - * all copies or substantial portions of the Software. - * - * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN - * THE SOFTWARE. - * - * - * @author qiao / https://github.com/qiao - * @author mrdoob / http://mrdoob.com - * @author alteredq / http://alteredqualia.com/ - * @author WestLangley / http://github.com/WestLangley - * @author erich666 / http://erichaines.com - */ - - // This set of controls performs orbiting, dollying (zooming), and panning. - // Unlike TrackballControls, it maintains the "up" direction object.up (+Y by default). - // - // Orbit - left mouse / touch: one finger move - // Zoom - middle mouse, or mousewheel / touch: two finger spread or squish - // Pan - right mouse, or arrow keys / touch: three finger swipe - - object: PerspectiveCamera | OrthographicCamera; - domElement: HTMLElement; - window: Window; - - // API - enabled: boolean; - target: Vector3; - - enableZoom: boolean; - zoomSpeed: number; - minDistance: number; - maxDistance: number; - enableRotate: boolean; - rotateSpeed: number; - enablePan: boolean; - keyPanSpeed: number; - autoRotate: boolean; - autoRotateSpeed: number; - minZoom: number; - maxZoom: number; - minPolarAngle: number; - maxPolarAngle: number; - minAzimuthAngle: number; - maxAzimuthAngle: number; - enableKeys: boolean; - keys: { LEFT: number; UP: number; RIGHT: number; BOTTOM: number }; - mouseButtons: { ORBIT: MOUSE; ZOOM: MOUSE; PAN: MOUSE }; - enableDamping: boolean; - dampingFactor: number; - - private spherical: Spherical; - private sphericalDelta: Spherical; - private scale: number; - private target0: Vector3; - private position0: Vector3; - private zoom0: number; - private state: number; - private panOffset: Vector3; - private zoomChanged: boolean; - - private rotateStart: Vector2; - private rotateEnd: Vector2; - private rotateDelta: Vector2; - - private panStart: Vector2; - private panEnd: Vector2; - private panDelta: Vector2; - - private dollyStart: Vector2; - private dollyEnd: Vector2; - private dollyDelta: Vector2; - - private updateLastPosition: Vector3; - private updateOffset: Vector3; - private updateQuat: Quaternion; - private updateLastQuaternion: Quaternion; - private updateQuatInverse: Quaternion; - - private panLeftV: Vector3; - private panUpV: Vector3; - private panInternalOffset: Vector3; - - private onContextMenu: (event: MouseEvent) => void; - private onMouseUp: (event: MouseEvent) => void; - private onMouseDown: (event: MouseEvent) => void; - private onMouseMove: (event: MouseEvent) => void; - private onMouseWheel: (event: MouseWheelEvent) => void; - private onTouchStart: (event: TouchEvent) => void; - private onTouchEnd: (event: TouchEvent) => void; - private onTouchMove: (event: TouchEvent) => void; - private onKeyDown: (event: KeyboardEvent) => void; - - constructor(object: PerspectiveCamera | OrthographicCamera, domElement: HTMLElement, domWindow?: Window) { - super(); - this.object = object; - - this.domElement = domElement; - this.window = (domWindow !== undefined) ? domWindow : window; - - // Set to false to disable this control - this.enabled = true; - - // "target" sets the location of focus, where the object orbits around - this.target = new Vector3(); - - // How far you can dolly in and out ( PerspectiveCamera only ) - this.minDistance = 0; - this.maxDistance = Infinity; - - // How far you can zoom in and out ( OrthographicCamera only ) - this.minZoom = 0; - this.maxZoom = Infinity; - - // How far you can orbit vertically, upper and lower limits. - // Range is 0 to Math.PI radians. - this.minPolarAngle = 0; // radians - this.maxPolarAngle = Math.PI; // radians - - // How far you can orbit horizontally, upper and lower limits. - // If set, must be a sub-interval of the interval [ - Math.PI, Math.PI ]. - this.minAzimuthAngle = - Infinity; // radians - this.maxAzimuthAngle = Infinity; // radians - - // Set to true to enable damping (inertia) - // If damping is enabled, you must call controls.update() in your animation loop - this.enableDamping = false; - this.dampingFactor = 0.25; - - // This option actually enables dollying in and out; left as "zoom" for backwards compatibility. - // Set to false to disable zooming - this.enableZoom = true; - this.zoomSpeed = 1.0; - - // Set to false to disable rotating - this.enableRotate = true; - this.rotateSpeed = 1.0; - - // Set to false to disable panning - this.enablePan = true; - this.keyPanSpeed = 7.0; // pixels moved per arrow key push - - // Set to true to automatically rotate around the target - // If auto-rotate is enabled, you must call controls.update() in your animation loop - this.autoRotate = false; - this.autoRotateSpeed = 2.0; // 30 seconds per round when fps is 60 - - // Set to false to disable use of the keys - this.enableKeys = true; - - // The four arrow keys - this.keys = { LEFT: 37, UP: 38, RIGHT: 39, BOTTOM: 40 }; - - // Mouse buttons - this.mouseButtons = { ORBIT: MOUSE.LEFT, ZOOM: MOUSE.MIDDLE, PAN: MOUSE.RIGHT }; - - // for reset - this.target0 = this.target.clone(); - this.position0 = this.object.position.clone(); - this.zoom0 = this.object.zoom; - - // for update speedup - this.updateOffset = new Vector3(); - // so camera.up is the orbit axis - this.updateQuat = new Quaternion().setFromUnitVectors(object.up, new Vector3(0, 1, 0)); - this.updateQuatInverse = this.updateQuat.clone().inverse(); - this.updateLastPosition = new Vector3(); - this.updateLastQuaternion = new Quaternion(); - - this.state = STATE.NONE; - this.scale = 1; - - // current position in spherical coordinates - this.spherical = new Spherical(); - this.sphericalDelta = new Spherical(); - - this.panOffset = new Vector3(); - this.zoomChanged = false; - - this.rotateStart = new Vector2(); - this.rotateEnd = new Vector2(); - this.rotateDelta = new Vector2(); - - this.panStart = new Vector2(); - this.panEnd = new Vector2(); - this.panDelta = new Vector2(); - - this.dollyStart = new Vector2(); - this.dollyEnd = new Vector2(); - this.dollyDelta = new Vector2(); - - this.panLeftV = new Vector3(); - this.panUpV = new Vector3(); - this.panInternalOffset = new Vector3(); - - // event handlers - FSM: listen for events and reset state - - this.onMouseDown = event => { - if (this.enabled === false) return; - event.preventDefault(); - if (event.button === this.mouseButtons.ORBIT) { - if (this.enableRotate === false) return; - this.rotateStart.set(event.clientX, event.clientY); - this.state = STATE.ROTATE; - } else if (event.button === this.mouseButtons.ZOOM) { - if (this.enableZoom === false) return; - this.dollyStart.set(event.clientX, event.clientY); - this.state = STATE.DOLLY; - } else if (event.button === this.mouseButtons.PAN) { - if (this.enablePan === false) return; - this.panStart.set(event.clientX, event.clientY); - this.state = STATE.PAN; - } - - if (this.state !== STATE.NONE) { - document.addEventListener("mousemove", this.onMouseMove, false); - document.addEventListener("mouseup", this.onMouseUp, false); - this.dispatchEvent(START_EVENT); - } - }; - - this.onMouseMove = event => { - if (this.enabled === false) return; - - event.preventDefault(); - - if (this.state === STATE.ROTATE) { - if (this.enableRotate === false) return; - this.rotateEnd.set(event.clientX, event.clientY); - this.rotateDelta.subVectors(this.rotateEnd, this.rotateStart); - - // rotating across whole screen goes 360 degrees around - this.rotateLeft(2 * Math.PI * this.rotateDelta.x / this.domElement.clientWidth * this.rotateSpeed); - // rotating up and down along whole screen attempts to go 360, but limited to 180 - this.rotateUp(2 * Math.PI * this.rotateDelta.y / this.domElement.clientHeight * this.rotateSpeed); - this.rotateStart.copy(this.rotateEnd); - - this.update(); - } else if (this.state === STATE.DOLLY) { - - if (this.enableZoom === false) return; - - this.dollyEnd.set(event.clientX, event.clientY); - this.dollyDelta.subVectors(this.dollyEnd, this.dollyStart); - - if (this.dollyDelta.y > 0) { - this.dollyIn(this.getZoomScale()); - } else if (this.dollyDelta.y < 0) { - this.dollyOut(this.getZoomScale()); - } - - this.dollyStart.copy(this.dollyEnd); - this.update(); - } else if (this.state === STATE.PAN) { - - if (this.enablePan === false) return; - - this.panEnd.set(event.clientX, event.clientY); - this.panDelta.subVectors(this.panEnd, this.panStart); - this.pan(this.panDelta.x, this.panDelta.y); - this.panStart.copy(this.panEnd); - this.update(); - } - }; - - this.onMouseUp = () => { - if (this.enabled === false) return; - document.removeEventListener("mousemove", this.onMouseMove, false); - document.removeEventListener("mouseup", this.onMouseUp, false); - - this.dispatchEvent(END_EVENT); - this.state = STATE.NONE; - }; - - this.onMouseWheel = event => { - - if (this.enabled === false || this.enableZoom === false || (this.state !== STATE.NONE && this.state !== STATE.ROTATE)) return; - - event.preventDefault(); - event.stopPropagation(); - - if (event.deltaY < 0) { - this.dollyOut(this.getZoomScale()); - } else if (event.deltaY > 0) { - this.dollyIn(this.getZoomScale()); - } - - this.update(); - - this.dispatchEvent(START_EVENT); // not sure why these are here... - this.dispatchEvent(END_EVENT); - }; - - this.onKeyDown = event => { - - if (this.enabled === false || this.enableKeys === false || this.enablePan === false) return; - - switch (event.keyCode) { - case this.keys.UP: { - this.pan(0, this.keyPanSpeed); - this.update(); - break; - } - case this.keys.BOTTOM: { - this.pan(0, - this.keyPanSpeed); - this.update(); - break; - } - case this.keys.LEFT: { - this.pan(this.keyPanSpeed, 0); - this.update(); - break; - } - case this.keys.RIGHT: { - this.pan(- this.keyPanSpeed, 0); - this.update(); - break; - } - } - }; - - this.onTouchStart = event => { - if (this.enabled === false) return; - - switch (event.touches.length) { - // one-fingered touch: rotate - case 1: { - if (this.enableRotate === false) return; - - this.rotateStart.set(event.touches[0].pageX, event.touches[0].pageY); - this.state = STATE.TOUCH_ROTATE; - break; - } - // two-fingered touch: dolly - case 2: { - if (this.enableZoom === false) return; - - const dx = event.touches[0].pageX - event.touches[1].pageX; - const dy = event.touches[0].pageY - event.touches[1].pageY; - - const distance = Math.sqrt(dx * dx + dy * dy); - this.dollyStart.set(0, distance); - this.state = STATE.TOUCH_DOLLY; - break; - } - // three-fingered touch: pan - case 3: { - if (this.enablePan === false) return; - - this.panStart.set(event.touches[0].pageX, event.touches[0].pageY); - this.state = STATE.TOUCH_PAN; - break; - } - default: { - this.state = STATE.NONE; - } - } - - if (this.state !== STATE.NONE) { - this.dispatchEvent(START_EVENT); - } - }; - - this.onTouchMove = event => { - if (this.enabled === false) return; - event.preventDefault(); - event.stopPropagation(); - - switch (event.touches.length) { - // one-fingered touch: rotate - case 1: { - if (this.enableRotate === false) return; - if (this.state !== STATE.TOUCH_ROTATE) return; // is this needed?... - - this.rotateEnd.set(event.touches[0].pageX, event.touches[0].pageY); - this.rotateDelta.subVectors(this.rotateEnd, this.rotateStart); - - // rotating across whole screen goes 360 degrees around - this.rotateLeft(2 * Math.PI * this.rotateDelta.x / this.domElement.clientWidth * this.rotateSpeed); - - // rotating up and down along whole screen attempts to go 360, but limited to 180 - this.rotateUp(2 * Math.PI * this.rotateDelta.y / this.domElement.clientHeight * this.rotateSpeed); - - this.rotateStart.copy(this.rotateEnd); - - this.update(); - break; - } - // two-fingered touch: dolly - case 2: { - if (this.enableZoom === false) return; - if (this.state !== STATE.TOUCH_DOLLY) return; // is this needed?... - - // console.log( "handleTouchMoveDolly" ); - const dx = event.touches[0].pageX - event.touches[1].pageX; - const dy = event.touches[0].pageY - event.touches[1].pageY; - - const distance = Math.sqrt(dx * dx + dy * dy); - - this.dollyEnd.set(0, distance); - - this.dollyDelta.subVectors(this.dollyEnd, this.dollyStart); - - if (this.dollyDelta.y > 0) { - this.dollyOut(this.getZoomScale()); - } else if (this.dollyDelta.y < 0) { - this.dollyIn(this.getZoomScale()); - } - - this.dollyStart.copy(this.dollyEnd); - this.update(); - break; - } - // three-fingered touch: pan - case 3: { - if (this.enablePan === false) return; - if (this.state !== STATE.TOUCH_PAN) return; // is this needed?... - this.panEnd.set(event.touches[0].pageX, event.touches[0].pageY); - this.panDelta.subVectors(this.panEnd, this.panStart); - this.pan(this.panDelta.x, this.panDelta.y); - this.panStart.copy(this.panEnd); - this.update(); - break; - } - default: { - this.state = STATE.NONE; - } - } - }; - - this.onTouchEnd = () => { - if (this.enabled === false) return; - this.dispatchEvent(END_EVENT); - this.state = STATE.NONE; - }; - - this.onContextMenu = event => { - event.preventDefault(); - }; - - this.domElement.addEventListener("contextmenu", this.onContextMenu, false); - - this.domElement.addEventListener("mousedown", this.onMouseDown, false); - this.domElement.addEventListener("wheel", this.onMouseWheel, false); - - this.domElement.addEventListener("touchstart", this.onTouchStart, false); - this.domElement.addEventListener("touchend", this.onTouchEnd, false); - this.domElement.addEventListener("touchmove", this.onTouchMove, false); - - this.window.addEventListener("keydown", this.onKeyDown, false); - - // force an update at start - this.update(); - } - - update() { - const position = this.object.position; - this.updateOffset.copy(position).sub(this.target); - - // rotate offset to "y-axis-is-up" space - this.updateOffset.applyQuaternion(this.updateQuat); - - // angle from z-axis around y-axis - this.spherical.setFromVector3(this.updateOffset); - - if (this.autoRotate && this.state === STATE.NONE) { - this.rotateLeft(this.getAutoRotationAngle()); - } - - this.spherical.theta += this.sphericalDelta.theta; - this.spherical.phi += this.sphericalDelta.phi; - - // restrict theta to be between desired limits - this.spherical.theta = Math.max(this.minAzimuthAngle, Math.min(this.maxAzimuthAngle, this.spherical.theta)); - - // restrict phi to be between desired limits - this.spherical.phi = Math.max(this.minPolarAngle, Math.min(this.maxPolarAngle, this.spherical.phi)); - - this.spherical.makeSafe(); - - this.spherical.radius *= this.scale; - - // restrict radius to be between desired limits - this.spherical.radius = Math.max(this.minDistance, Math.min(this.maxDistance, this.spherical.radius)); - - // move target to panned location - this.target.add(this.panOffset); - - this.updateOffset.setFromSpherical(this.spherical); - - // rotate offset back to "camera-up-vector-is-up" space - this.updateOffset.applyQuaternion(this.updateQuatInverse); - - position.copy(this.target).add(this.updateOffset); - - this.object.lookAt(this.target); - - if (this.enableDamping === true) { - - this.sphericalDelta.theta *= (1 - this.dampingFactor); - this.sphericalDelta.phi *= (1 - this.dampingFactor); - - } else { - - this.sphericalDelta.set(0, 0, 0); - - } - - this.scale = 1; - this.panOffset.set(0, 0, 0); - - // update condition is: - // min(camera displacement, camera rotation in radians)^2 > EPS - // using small-angle approximation cos(x/2) = 1 - x^2 / 8 - - if (this.zoomChanged || - this.updateLastPosition.distanceToSquared(this.object.position) > EPS || - 8 * (1 - this.updateLastQuaternion.dot(this.object.quaternion)) > EPS) { - - this.dispatchEvent(CHANGE_EVENT); - this.updateLastPosition.copy(this.object.position); - this.updateLastQuaternion.copy(this.object.quaternion); - this.zoomChanged = false; - return true; - } - return false; - } - - panLeft(distance: number, objectMatrix) { - this.panLeftV.setFromMatrixColumn(objectMatrix, 0); // get X column of objectMatrix - this.panLeftV.multiplyScalar(- distance); - this.panOffset.add(this.panLeftV); - } - - panUp(distance: number, objectMatrix) { - this.panUpV.setFromMatrixColumn(objectMatrix, 1); // get Y column of objectMatrix - this.panUpV.multiplyScalar(distance); - this.panOffset.add(this.panUpV); - } - - // deltaX and deltaY are in pixels; right and down are positive - pan(deltaX: number, deltaY: number) { - if (this.object instanceof PerspectiveCamera) { - // perspective - const position = this.object.position; - this.panInternalOffset.copy(position).sub(this.target); - let targetDistance = this.panInternalOffset.length(); - - // half of the fov is center to top of screen - targetDistance *= Math.tan((this.object.fov / 2) * Math.PI / 180.0); - - // we actually don"t use screenWidth, since perspective camera is fixed to screen height - this.panLeft(2 * deltaX * targetDistance / this.domElement.clientHeight, this.object.matrix); - this.panUp(2 * deltaY * targetDistance / this.domElement.clientHeight, this.object.matrix); - } else if (this.object instanceof OrthographicCamera) { - // orthographic - this.panLeft(deltaX * (this.object.right - this.object.left) / this.object.zoom / this.domElement.clientWidth, this.object.matrix); - this.panUp(deltaY * (this.object.top - this.object.bottom) / this.object.zoom / this.domElement.clientHeight, this.object.matrix); - } else { - // camera neither orthographic nor perspective - console.warn("WARNING: OrbitControls.js encountered an unknown camera type - pan disabled."); - this.enablePan = false; - } - } - - dollyIn(dollyScale) { - if (this.object instanceof PerspectiveCamera) { - this.scale /= dollyScale; - } 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; - } else { - console.warn("WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled."); - this.enableZoom = false; - } - } - - dollyOut(dollyScale) { - if (this.object instanceof PerspectiveCamera) { - this.scale *= dollyScale; - } 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; - } else { - console.warn("WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled."); - this.enableZoom = false; - } - } - - getAutoRotationAngle() { - return 2 * Math.PI / 60 / 60 * this.autoRotateSpeed; - } - - getZoomScale() { - return Math.pow(0.95, this.zoomSpeed); - } - - rotateLeft(angle: number) { - this.sphericalDelta.theta -= angle; - } - - rotateUp(angle: number) { - this.sphericalDelta.phi -= angle; - } - - getPolarAngle(): number { - return this.spherical.phi; - } - - getAzimuthalAngle(): number { - return this.spherical.theta; - } - - dispose(): void { - this.domElement.removeEventListener("contextmenu", this.onContextMenu, false); - this.domElement.removeEventListener("mousedown", this.onMouseDown, false); - this.domElement.removeEventListener("wheel", this.onMouseWheel, false); - - this.domElement.removeEventListener("touchstart", this.onTouchStart, false); - this.domElement.removeEventListener("touchend", this.onTouchEnd, false); - this.domElement.removeEventListener("touchmove", this.onTouchMove, false); - - document.removeEventListener("mousemove", this.onMouseMove, false); - document.removeEventListener("mouseup", this.onMouseUp, false); - - this.window.removeEventListener("keydown", this.onKeyDown, false); - // this.dispatchEvent( { type: "dispose" } ); // should this be added here? - } - - reset(): void { - this.target.copy(this.target0); - this.object.position.copy(this.position0); - this.object.zoom = this.zoom0; - - this.object.updateProjectionMatrix(); - this.dispatchEvent(CHANGE_EVENT); - - this.update(); - - this.state = STATE.NONE; - } -} +import { Vector3 } from "three"; +import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"; export function createOrbitControls(skinViewer: SkinViewer) { const control = new OrbitControls(skinViewer.camera, skinViewer.renderer.domElement); From 80d96a0ac91f472cb821c5236b8f71e3148bb0a1 Mon Sep 17 00:00:00 2001 From: yushijinhun Date: Fri, 31 Jan 2020 08:50:30 +0800 Subject: [PATCH 5/5] update example --- examples/index.html | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/examples/index.html b/examples/index.html index 8258a01..27a723c 100644 --- a/examples/index.html +++ b/examples/index.html @@ -19,9 +19,7 @@
- - - +