Buckets:
ktongue/docker_container / simsite /frontend /node_modules /three-stdlib /controls /ArcballControls.js
| var __defProp = Object.defineProperty; | |
| var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; | |
| var __publicField = (obj, key, value) => { | |
| __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value); | |
| return value; | |
| }; | |
| import { Vector2, Vector3, Matrix4, Quaternion, Group, EllipseCurve, BufferGeometry, PerspectiveCamera, MathUtils, OrthographicCamera, Box3, Sphere, GridHelper, LineBasicMaterial, Line, Raycaster } from "three"; | |
| import { EventDispatcher } from "./EventDispatcher.js"; | |
| const STATE = { | |
| IDLE: Symbol(), | |
| ROTATE: Symbol(), | |
| PAN: Symbol(), | |
| SCALE: Symbol(), | |
| FOV: Symbol(), | |
| FOCUS: Symbol(), | |
| ZROTATE: Symbol(), | |
| TOUCH_MULTI: Symbol(), | |
| ANIMATION_FOCUS: Symbol(), | |
| ANIMATION_ROTATE: Symbol() | |
| }; | |
| const INPUT = { | |
| NONE: Symbol(), | |
| ONE_FINGER: Symbol(), | |
| ONE_FINGER_SWITCHED: Symbol(), | |
| TWO_FINGER: Symbol(), | |
| MULT_FINGER: Symbol(), | |
| CURSOR: Symbol() | |
| }; | |
| const _center = { | |
| x: 0, | |
| y: 0 | |
| }; | |
| const _transformation = { | |
| camera: /* @__PURE__ */ new Matrix4(), | |
| gizmos: /* @__PURE__ */ new Matrix4() | |
| }; | |
| const _changeEvent = { type: "change" }; | |
| const _startEvent = { type: "start" }; | |
| const _endEvent = { type: "end" }; | |
| class ArcballControls extends EventDispatcher { | |
| constructor(camera, domElement = null, scene = null) { | |
| super(); | |
| __publicField(this, "camera"); | |
| __publicField(this, "domElement"); | |
| __publicField(this, "scene"); | |
| __publicField(this, "mouseActions"); | |
| __publicField(this, "_mouseOp"); | |
| __publicField(this, "_v2_1"); | |
| __publicField(this, "_v3_1"); | |
| __publicField(this, "_v3_2"); | |
| __publicField(this, "_m4_1"); | |
| __publicField(this, "_m4_2"); | |
| __publicField(this, "_quat"); | |
| __publicField(this, "_translationMatrix"); | |
| __publicField(this, "_rotationMatrix"); | |
| __publicField(this, "_scaleMatrix"); | |
| __publicField(this, "_rotationAxis"); | |
| __publicField(this, "_cameraMatrixState"); | |
| __publicField(this, "_cameraProjectionState"); | |
| __publicField(this, "_fovState"); | |
| __publicField(this, "_upState"); | |
| __publicField(this, "_zoomState"); | |
| __publicField(this, "_nearPos"); | |
| __publicField(this, "_farPos"); | |
| __publicField(this, "_gizmoMatrixState"); | |
| __publicField(this, "_up0"); | |
| __publicField(this, "_zoom0"); | |
| __publicField(this, "_fov0"); | |
| __publicField(this, "_initialNear"); | |
| __publicField(this, "_nearPos0"); | |
| __publicField(this, "_initialFar"); | |
| __publicField(this, "_farPos0"); | |
| __publicField(this, "_cameraMatrixState0"); | |
| __publicField(this, "_gizmoMatrixState0"); | |
| __publicField(this, "_button"); | |
| __publicField(this, "_touchStart"); | |
| __publicField(this, "_touchCurrent"); | |
| __publicField(this, "_input"); | |
| __publicField(this, "_switchSensibility"); | |
| __publicField(this, "_startFingerDistance"); | |
| __publicField(this, "_currentFingerDistance"); | |
| __publicField(this, "_startFingerRotation"); | |
| __publicField(this, "_currentFingerRotation"); | |
| __publicField(this, "_devPxRatio"); | |
| __publicField(this, "_downValid"); | |
| __publicField(this, "_nclicks"); | |
| __publicField(this, "_downEvents"); | |
| __publicField(this, "_clickStart"); | |
| __publicField(this, "_maxDownTime"); | |
| __publicField(this, "_maxInterval"); | |
| __publicField(this, "_posThreshold"); | |
| __publicField(this, "_movementThreshold"); | |
| __publicField(this, "_currentCursorPosition"); | |
| __publicField(this, "_startCursorPosition"); | |
| __publicField(this, "_grid"); | |
| __publicField(this, "_gridPosition"); | |
| __publicField(this, "_gizmos"); | |
| __publicField(this, "_curvePts"); | |
| __publicField(this, "_timeStart"); | |
| __publicField(this, "_animationId"); | |
| __publicField(this, "focusAnimationTime"); | |
| __publicField(this, "_timePrev"); | |
| __publicField(this, "_timeCurrent"); | |
| __publicField(this, "_anglePrev"); | |
| __publicField(this, "_angleCurrent"); | |
| __publicField(this, "_cursorPosPrev"); | |
| __publicField(this, "_cursorPosCurr"); | |
| __publicField(this, "_wPrev"); | |
| __publicField(this, "_wCurr"); | |
| __publicField(this, "adjustNearFar"); | |
| __publicField(this, "scaleFactor"); | |
| __publicField(this, "dampingFactor"); | |
| __publicField(this, "wMax"); | |
| __publicField(this, "enableAnimations"); | |
| __publicField(this, "enableGrid"); | |
| __publicField(this, "cursorZoom"); | |
| __publicField(this, "minFov"); | |
| __publicField(this, "maxFov"); | |
| __publicField(this, "enabled"); | |
| __publicField(this, "enablePan"); | |
| __publicField(this, "enableRotate"); | |
| __publicField(this, "enableZoom"); | |
| __publicField(this, "minDistance"); | |
| __publicField(this, "maxDistance"); | |
| __publicField(this, "minZoom"); | |
| __publicField(this, "maxZoom"); | |
| __publicField(this, "target"); | |
| __publicField(this, "_currentTarget"); | |
| __publicField(this, "_tbRadius"); | |
| __publicField(this, "_state"); | |
| //listeners | |
| __publicField(this, "onWindowResize", () => { | |
| const scale = (this._gizmos.scale.x + this._gizmos.scale.y + this._gizmos.scale.z) / 3; | |
| if (this.camera) { | |
| const tbRadius = this.calculateTbRadius(this.camera); | |
| if (tbRadius !== void 0) { | |
| this._tbRadius = tbRadius; | |
| } | |
| } | |
| const newRadius = this._tbRadius / scale; | |
| const curve = new EllipseCurve(0, 0, newRadius, newRadius); | |
| const points = curve.getPoints(this._curvePts); | |
| const curveGeometry = new BufferGeometry().setFromPoints(points); | |
| for (const gizmo in this._gizmos.children) { | |
| const child = this._gizmos.children[gizmo]; | |
| child.geometry = curveGeometry; | |
| } | |
| this.dispatchEvent(_changeEvent); | |
| }); | |
| __publicField(this, "onContextMenu", (event) => { | |
| if (!this.enabled) { | |
| return; | |
| } | |
| for (let i = 0; i < this.mouseActions.length; i++) { | |
| if (this.mouseActions[i].mouse == 2) { | |
| event.preventDefault(); | |
| break; | |
| } | |
| } | |
| }); | |
| __publicField(this, "onPointerCancel", () => { | |
| this._touchStart.splice(0, this._touchStart.length); | |
| this._touchCurrent.splice(0, this._touchCurrent.length); | |
| this._input = INPUT.NONE; | |
| }); | |
| __publicField(this, "onPointerDown", (event) => { | |
| if (event.button == 0 && event.isPrimary) { | |
| this._downValid = true; | |
| this._downEvents.push(event); | |
| } else { | |
| this._downValid = false; | |
| } | |
| if (event.pointerType == "touch" && this._input != INPUT.CURSOR) { | |
| this._touchStart.push(event); | |
| this._touchCurrent.push(event); | |
| switch (this._input) { | |
| case INPUT.NONE: | |
| this._input = INPUT.ONE_FINGER; | |
| this.onSinglePanStart(event, "ROTATE"); | |
| window.addEventListener("pointermove", this.onPointerMove); | |
| window.addEventListener("pointerup", this.onPointerUp); | |
| break; | |
| case INPUT.ONE_FINGER: | |
| case INPUT.ONE_FINGER_SWITCHED: | |
| this._input = INPUT.TWO_FINGER; | |
| this.onRotateStart(); | |
| this.onPinchStart(); | |
| this.onDoublePanStart(); | |
| break; | |
| case INPUT.TWO_FINGER: | |
| this._input = INPUT.MULT_FINGER; | |
| this.onTriplePanStart(); | |
| break; | |
| } | |
| } else if (event.pointerType != "touch" && this._input == INPUT.NONE) { | |
| let modifier = null; | |
| if (event.ctrlKey || event.metaKey) { | |
| modifier = "CTRL"; | |
| } else if (event.shiftKey) { | |
| modifier = "SHIFT"; | |
| } | |
| this._mouseOp = this.getOpFromAction(event.button, modifier); | |
| if (this._mouseOp) { | |
| window.addEventListener("pointermove", this.onPointerMove); | |
| window.addEventListener("pointerup", this.onPointerUp); | |
| this._input = INPUT.CURSOR; | |
| this._button = event.button; | |
| this.onSinglePanStart(event, this._mouseOp); | |
| } | |
| } | |
| }); | |
| __publicField(this, "onPointerMove", (event) => { | |
| if (event.pointerType == "touch" && this._input != INPUT.CURSOR) { | |
| switch (this._input) { | |
| case INPUT.ONE_FINGER: | |
| this.updateTouchEvent(event); | |
| this.onSinglePanMove(event, STATE.ROTATE); | |
| break; | |
| case INPUT.ONE_FINGER_SWITCHED: | |
| const movement = this.calculatePointersDistance(this._touchCurrent[0], event) * this._devPxRatio; | |
| if (movement >= this._switchSensibility) { | |
| this._input = INPUT.ONE_FINGER; | |
| this.updateTouchEvent(event); | |
| this.onSinglePanStart(event, "ROTATE"); | |
| break; | |
| } | |
| break; | |
| case INPUT.TWO_FINGER: | |
| this.updateTouchEvent(event); | |
| this.onRotateMove(); | |
| this.onPinchMove(); | |
| this.onDoublePanMove(); | |
| break; | |
| case INPUT.MULT_FINGER: | |
| this.updateTouchEvent(event); | |
| this.onTriplePanMove(); | |
| break; | |
| } | |
| } else if (event.pointerType != "touch" && this._input == INPUT.CURSOR) { | |
| let modifier = null; | |
| if (event.ctrlKey || event.metaKey) { | |
| modifier = "CTRL"; | |
| } else if (event.shiftKey) { | |
| modifier = "SHIFT"; | |
| } | |
| const mouseOpState = this.getOpStateFromAction(this._button, modifier); | |
| if (mouseOpState) { | |
| this.onSinglePanMove(event, mouseOpState); | |
| } | |
| } | |
| if (this._downValid) { | |
| const movement = this.calculatePointersDistance(this._downEvents[this._downEvents.length - 1], event) * this._devPxRatio; | |
| if (movement > this._movementThreshold) { | |
| this._downValid = false; | |
| } | |
| } | |
| }); | |
| __publicField(this, "onPointerUp", (event) => { | |
| if (event.pointerType == "touch" && this._input != INPUT.CURSOR) { | |
| const nTouch = this._touchCurrent.length; | |
| for (let i = 0; i < nTouch; i++) { | |
| if (this._touchCurrent[i].pointerId == event.pointerId) { | |
| this._touchCurrent.splice(i, 1); | |
| this._touchStart.splice(i, 1); | |
| break; | |
| } | |
| } | |
| switch (this._input) { | |
| case INPUT.ONE_FINGER: | |
| case INPUT.ONE_FINGER_SWITCHED: | |
| window.removeEventListener("pointermove", this.onPointerMove); | |
| window.removeEventListener("pointerup", this.onPointerUp); | |
| this._input = INPUT.NONE; | |
| this.onSinglePanEnd(); | |
| break; | |
| case INPUT.TWO_FINGER: | |
| this.onDoublePanEnd(); | |
| this.onPinchEnd(); | |
| this.onRotateEnd(); | |
| this._input = INPUT.ONE_FINGER_SWITCHED; | |
| break; | |
| case INPUT.MULT_FINGER: | |
| if (this._touchCurrent.length == 0) { | |
| window.removeEventListener("pointermove", this.onPointerMove); | |
| window.removeEventListener("pointerup", this.onPointerUp); | |
| this._input = INPUT.NONE; | |
| this.onTriplePanEnd(); | |
| } | |
| break; | |
| } | |
| } else if (event.pointerType != "touch" && this._input == INPUT.CURSOR) { | |
| window.removeEventListener("pointermove", this.onPointerMove); | |
| window.removeEventListener("pointerup", this.onPointerUp); | |
| this._input = INPUT.NONE; | |
| this.onSinglePanEnd(); | |
| this._button = -1; | |
| } | |
| if (event.isPrimary) { | |
| if (this._downValid) { | |
| const downTime = event.timeStamp - this._downEvents[this._downEvents.length - 1].timeStamp; | |
| if (downTime <= this._maxDownTime) { | |
| if (this._nclicks == 0) { | |
| this._nclicks = 1; | |
| this._clickStart = performance.now(); | |
| } else { | |
| const clickInterval = event.timeStamp - this._clickStart; | |
| const movement = this.calculatePointersDistance(this._downEvents[1], this._downEvents[0]) * this._devPxRatio; | |
| if (clickInterval <= this._maxInterval && movement <= this._posThreshold) { | |
| this._nclicks = 0; | |
| this._downEvents.splice(0, this._downEvents.length); | |
| this.onDoubleTap(event); | |
| } else { | |
| this._nclicks = 1; | |
| this._downEvents.shift(); | |
| this._clickStart = performance.now(); | |
| } | |
| } | |
| } else { | |
| this._downValid = false; | |
| this._nclicks = 0; | |
| this._downEvents.splice(0, this._downEvents.length); | |
| } | |
| } else { | |
| this._nclicks = 0; | |
| this._downEvents.splice(0, this._downEvents.length); | |
| } | |
| } | |
| }); | |
| __publicField(this, "onWheel", (event) => { | |
| var _a, _b; | |
| if (this.enabled && this.enableZoom && this.domElement) { | |
| let modifier = null; | |
| if (event.ctrlKey || event.metaKey) { | |
| modifier = "CTRL"; | |
| } else if (event.shiftKey) { | |
| modifier = "SHIFT"; | |
| } | |
| const mouseOp = this.getOpFromAction("WHEEL", modifier); | |
| if (mouseOp) { | |
| event.preventDefault(); | |
| this.dispatchEvent(_startEvent); | |
| const notchDeltaY = 125; | |
| let sgn = event.deltaY / notchDeltaY; | |
| let size = 1; | |
| if (sgn > 0) { | |
| size = 1 / this.scaleFactor; | |
| } else if (sgn < 0) { | |
| size = this.scaleFactor; | |
| } | |
| switch (mouseOp) { | |
| case "ZOOM": | |
| this.updateTbState(STATE.SCALE, true); | |
| if (sgn > 0) { | |
| size = 1 / Math.pow(this.scaleFactor, sgn); | |
| } else if (sgn < 0) { | |
| size = Math.pow(this.scaleFactor, -sgn); | |
| } | |
| if (this.cursorZoom && this.enablePan) { | |
| let scalePoint; | |
| if (this.camera instanceof OrthographicCamera) { | |
| scalePoint = (_a = this.unprojectOnTbPlane(this.camera, event.clientX, event.clientY, this.domElement)) == null ? void 0 : _a.applyQuaternion(this.camera.quaternion).multiplyScalar(1 / this.camera.zoom).add(this._gizmos.position); | |
| } | |
| if (this.camera instanceof PerspectiveCamera) { | |
| scalePoint = (_b = this.unprojectOnTbPlane(this.camera, event.clientX, event.clientY, this.domElement)) == null ? void 0 : _b.applyQuaternion(this.camera.quaternion).add(this._gizmos.position); | |
| } | |
| if (scalePoint !== void 0) | |
| this.applyTransformMatrix(this.applyScale(size, scalePoint)); | |
| } else { | |
| this.applyTransformMatrix(this.applyScale(size, this._gizmos.position)); | |
| } | |
| if (this._grid) { | |
| this.disposeGrid(); | |
| this.drawGrid(); | |
| } | |
| this.updateTbState(STATE.IDLE, false); | |
| this.dispatchEvent(_changeEvent); | |
| this.dispatchEvent(_endEvent); | |
| break; | |
| case "FOV": | |
| if (this.camera instanceof PerspectiveCamera) { | |
| this.updateTbState(STATE.FOV, true); | |
| if (event.deltaX != 0) { | |
| sgn = event.deltaX / notchDeltaY; | |
| size = 1; | |
| if (sgn > 0) { | |
| size = 1 / Math.pow(this.scaleFactor, sgn); | |
| } else if (sgn < 0) { | |
| size = Math.pow(this.scaleFactor, -sgn); | |
| } | |
| } | |
| this._v3_1.setFromMatrixPosition(this._cameraMatrixState); | |
| const x = this._v3_1.distanceTo(this._gizmos.position); | |
| let xNew = x / size; | |
| xNew = MathUtils.clamp(xNew, this.minDistance, this.maxDistance); | |
| const y = x * Math.tan(MathUtils.DEG2RAD * this.camera.fov * 0.5); | |
| let newFov = MathUtils.RAD2DEG * (Math.atan(y / xNew) * 2); | |
| if (newFov > this.maxFov) { | |
| newFov = this.maxFov; | |
| } else if (newFov < this.minFov) { | |
| newFov = this.minFov; | |
| } | |
| const newDistance = y / Math.tan(MathUtils.DEG2RAD * (newFov / 2)); | |
| size = x / newDistance; | |
| this.setFov(newFov); | |
| this.applyTransformMatrix(this.applyScale(size, this._gizmos.position, false)); | |
| } | |
| if (this._grid) { | |
| this.disposeGrid(); | |
| this.drawGrid(); | |
| } | |
| this.updateTbState(STATE.IDLE, false); | |
| this.dispatchEvent(_changeEvent); | |
| this.dispatchEvent(_endEvent); | |
| break; | |
| } | |
| } | |
| } | |
| }); | |
| __publicField(this, "onSinglePanStart", (event, operation) => { | |
| if (this.enabled && this.domElement) { | |
| this.dispatchEvent(_startEvent); | |
| this.setCenter(event.clientX, event.clientY); | |
| switch (operation) { | |
| case "PAN": | |
| if (!this.enablePan) | |
| return; | |
| if (this._animationId != -1) { | |
| cancelAnimationFrame(this._animationId); | |
| this._animationId = -1; | |
| this._timeStart = -1; | |
| this.activateGizmos(false); | |
| this.dispatchEvent(_changeEvent); | |
| } | |
| if (this.camera) { | |
| this.updateTbState(STATE.PAN, true); | |
| const rayDir = this.unprojectOnTbPlane(this.camera, _center.x, _center.y, this.domElement); | |
| if (rayDir !== void 0) { | |
| this._startCursorPosition.copy(rayDir); | |
| } | |
| if (this.enableGrid) { | |
| this.drawGrid(); | |
| this.dispatchEvent(_changeEvent); | |
| } | |
| } | |
| break; | |
| case "ROTATE": | |
| if (!this.enableRotate) | |
| return; | |
| if (this._animationId != -1) { | |
| cancelAnimationFrame(this._animationId); | |
| this._animationId = -1; | |
| this._timeStart = -1; | |
| } | |
| if (this.camera) { | |
| this.updateTbState(STATE.ROTATE, true); | |
| const rayDir = this.unprojectOnTbSurface(this.camera, _center.x, _center.y, this.domElement, this._tbRadius); | |
| if (rayDir !== void 0) { | |
| this._startCursorPosition.copy(rayDir); | |
| } | |
| this.activateGizmos(true); | |
| if (this.enableAnimations) { | |
| this._timePrev = this._timeCurrent = performance.now(); | |
| this._angleCurrent = this._anglePrev = 0; | |
| this._cursorPosPrev.copy(this._startCursorPosition); | |
| this._cursorPosCurr.copy(this._cursorPosPrev); | |
| this._wCurr = 0; | |
| this._wPrev = this._wCurr; | |
| } | |
| } | |
| this.dispatchEvent(_changeEvent); | |
| break; | |
| case "FOV": | |
| if (!this.enableZoom) | |
| return; | |
| if (this.camera instanceof PerspectiveCamera) { | |
| if (this._animationId != -1) { | |
| cancelAnimationFrame(this._animationId); | |
| this._animationId = -1; | |
| this._timeStart = -1; | |
| this.activateGizmos(false); | |
| this.dispatchEvent(_changeEvent); | |
| } | |
| this.updateTbState(STATE.FOV, true); | |
| this._startCursorPosition.setY(this.getCursorNDC(_center.x, _center.y, this.domElement).y * 0.5); | |
| this._currentCursorPosition.copy(this._startCursorPosition); | |
| } | |
| break; | |
| case "ZOOM": | |
| if (!this.enableZoom) | |
| return; | |
| if (this._animationId != -1) { | |
| cancelAnimationFrame(this._animationId); | |
| this._animationId = -1; | |
| this._timeStart = -1; | |
| this.activateGizmos(false); | |
| this.dispatchEvent(_changeEvent); | |
| } | |
| this.updateTbState(STATE.SCALE, true); | |
| this._startCursorPosition.setY(this.getCursorNDC(_center.x, _center.y, this.domElement).y * 0.5); | |
| this._currentCursorPosition.copy(this._startCursorPosition); | |
| break; | |
| } | |
| } | |
| }); | |
| __publicField(this, "onSinglePanMove", (event, opState) => { | |
| if (this.enabled && this.domElement) { | |
| const restart = opState != this._state; | |
| this.setCenter(event.clientX, event.clientY); | |
| switch (opState) { | |
| case STATE.PAN: | |
| if (this.enablePan && this.camera) { | |
| if (restart) { | |
| this.dispatchEvent(_endEvent); | |
| this.dispatchEvent(_startEvent); | |
| this.updateTbState(opState, true); | |
| const rayDir = this.unprojectOnTbPlane(this.camera, _center.x, _center.y, this.domElement); | |
| if (rayDir !== void 0) { | |
| this._startCursorPosition.copy(rayDir); | |
| } | |
| if (this.enableGrid) { | |
| this.drawGrid(); | |
| } | |
| this.activateGizmos(false); | |
| } else { | |
| const rayDir = this.unprojectOnTbPlane(this.camera, _center.x, _center.y, this.domElement); | |
| if (rayDir !== void 0) { | |
| this._currentCursorPosition.copy(rayDir); | |
| } | |
| this.applyTransformMatrix(this.pan(this._startCursorPosition, this._currentCursorPosition)); | |
| } | |
| } | |
| break; | |
| case STATE.ROTATE: | |
| if (this.enableRotate && this.camera) { | |
| if (restart) { | |
| this.dispatchEvent(_endEvent); | |
| this.dispatchEvent(_startEvent); | |
| this.updateTbState(opState, true); | |
| const rayDir = this.unprojectOnTbSurface( | |
| this.camera, | |
| _center.x, | |
| _center.y, | |
| this.domElement, | |
| this._tbRadius | |
| ); | |
| if (rayDir !== void 0) { | |
| this._startCursorPosition.copy(rayDir); | |
| } | |
| if (this.enableGrid) { | |
| this.disposeGrid(); | |
| } | |
| this.activateGizmos(true); | |
| } else { | |
| const rayDir = this.unprojectOnTbSurface( | |
| this.camera, | |
| _center.x, | |
| _center.y, | |
| this.domElement, | |
| this._tbRadius | |
| ); | |
| if (rayDir !== void 0) { | |
| this._currentCursorPosition.copy(rayDir); | |
| } | |
| const distance = this._startCursorPosition.distanceTo(this._currentCursorPosition); | |
| const angle = this._startCursorPosition.angleTo(this._currentCursorPosition); | |
| const amount = Math.max(distance / this._tbRadius, angle); | |
| this.applyTransformMatrix( | |
| this.rotate(this.calculateRotationAxis(this._startCursorPosition, this._currentCursorPosition), amount) | |
| ); | |
| if (this.enableAnimations) { | |
| this._timePrev = this._timeCurrent; | |
| this._timeCurrent = performance.now(); | |
| this._anglePrev = this._angleCurrent; | |
| this._angleCurrent = amount; | |
| this._cursorPosPrev.copy(this._cursorPosCurr); | |
| this._cursorPosCurr.copy(this._currentCursorPosition); | |
| this._wPrev = this._wCurr; | |
| this._wCurr = this.calculateAngularSpeed( | |
| this._anglePrev, | |
| this._angleCurrent, | |
| this._timePrev, | |
| this._timeCurrent | |
| ); | |
| } | |
| } | |
| } | |
| break; | |
| case STATE.SCALE: | |
| if (this.enableZoom) { | |
| if (restart) { | |
| this.dispatchEvent(_endEvent); | |
| this.dispatchEvent(_startEvent); | |
| this.updateTbState(opState, true); | |
| this._startCursorPosition.setY(this.getCursorNDC(_center.x, _center.y, this.domElement).y * 0.5); | |
| this._currentCursorPosition.copy(this._startCursorPosition); | |
| if (this.enableGrid) { | |
| this.disposeGrid(); | |
| } | |
| this.activateGizmos(false); | |
| } else { | |
| const screenNotches = 8; | |
| this._currentCursorPosition.setY(this.getCursorNDC(_center.x, _center.y, this.domElement).y * 0.5); | |
| const movement = this._currentCursorPosition.y - this._startCursorPosition.y; | |
| let size = 1; | |
| if (movement < 0) { | |
| size = 1 / Math.pow(this.scaleFactor, -movement * screenNotches); | |
| } else if (movement > 0) { | |
| size = Math.pow(this.scaleFactor, movement * screenNotches); | |
| } | |
| this.applyTransformMatrix(this.applyScale(size, this._gizmos.position)); | |
| } | |
| } | |
| break; | |
| case STATE.FOV: | |
| if (this.enableZoom && this.camera instanceof PerspectiveCamera) { | |
| if (restart) { | |
| this.dispatchEvent(_endEvent); | |
| this.dispatchEvent(_startEvent); | |
| this.updateTbState(opState, true); | |
| this._startCursorPosition.setY(this.getCursorNDC(_center.x, _center.y, this.domElement).y * 0.5); | |
| this._currentCursorPosition.copy(this._startCursorPosition); | |
| if (this.enableGrid) { | |
| this.disposeGrid(); | |
| } | |
| this.activateGizmos(false); | |
| } else { | |
| const screenNotches = 8; | |
| this._currentCursorPosition.setY(this.getCursorNDC(_center.x, _center.y, this.domElement).y * 0.5); | |
| const movement = this._currentCursorPosition.y - this._startCursorPosition.y; | |
| let size = 1; | |
| if (movement < 0) { | |
| size = 1 / Math.pow(this.scaleFactor, -movement * screenNotches); | |
| } else if (movement > 0) { | |
| size = Math.pow(this.scaleFactor, movement * screenNotches); | |
| } | |
| this._v3_1.setFromMatrixPosition(this._cameraMatrixState); | |
| const x = this._v3_1.distanceTo(this._gizmos.position); | |
| let xNew = x / size; | |
| xNew = MathUtils.clamp(xNew, this.minDistance, this.maxDistance); | |
| const y = x * Math.tan(MathUtils.DEG2RAD * this._fovState * 0.5); | |
| let newFov = MathUtils.RAD2DEG * (Math.atan(y / xNew) * 2); | |
| newFov = MathUtils.clamp(newFov, this.minFov, this.maxFov); | |
| const newDistance = y / Math.tan(MathUtils.DEG2RAD * (newFov / 2)); | |
| size = x / newDistance; | |
| this._v3_2.setFromMatrixPosition(this._gizmoMatrixState); | |
| this.setFov(newFov); | |
| this.applyTransformMatrix(this.applyScale(size, this._v3_2, false)); | |
| const direction = this._gizmos.position.clone().sub(this.camera.position).normalize().multiplyScalar(newDistance / x); | |
| this._m4_1.makeTranslation(direction.x, direction.y, direction.z); | |
| } | |
| } | |
| break; | |
| } | |
| this.dispatchEvent(_changeEvent); | |
| } | |
| }); | |
| __publicField(this, "onSinglePanEnd", () => { | |
| if (this._state == STATE.ROTATE) { | |
| if (!this.enableRotate) { | |
| return; | |
| } | |
| if (this.enableAnimations) { | |
| const deltaTime = performance.now() - this._timeCurrent; | |
| if (deltaTime < 120) { | |
| const w = Math.abs((this._wPrev + this._wCurr) / 2); | |
| const self = this; | |
| this._animationId = window.requestAnimationFrame(function(t) { | |
| self.updateTbState(STATE.ANIMATION_ROTATE, true); | |
| const rotationAxis = self.calculateRotationAxis(self._cursorPosPrev, self._cursorPosCurr); | |
| self.onRotationAnim(t, rotationAxis, Math.min(w, self.wMax)); | |
| }); | |
| } else { | |
| this.updateTbState(STATE.IDLE, false); | |
| this.activateGizmos(false); | |
| this.dispatchEvent(_changeEvent); | |
| } | |
| } else { | |
| this.updateTbState(STATE.IDLE, false); | |
| this.activateGizmos(false); | |
| this.dispatchEvent(_changeEvent); | |
| } | |
| } else if (this._state == STATE.PAN || this._state == STATE.IDLE) { | |
| this.updateTbState(STATE.IDLE, false); | |
| if (this.enableGrid) { | |
| this.disposeGrid(); | |
| } | |
| this.activateGizmos(false); | |
| this.dispatchEvent(_changeEvent); | |
| } | |
| this.dispatchEvent(_endEvent); | |
| }); | |
| __publicField(this, "onDoubleTap", (event) => { | |
| if (this.enabled && this.enablePan && this.scene && this.camera && this.domElement) { | |
| this.dispatchEvent(_startEvent); | |
| this.setCenter(event.clientX, event.clientY); | |
| const hitP = this.unprojectOnObj(this.getCursorNDC(_center.x, _center.y, this.domElement), this.camera); | |
| if (hitP && this.enableAnimations) { | |
| const self = this; | |
| if (this._animationId != -1) { | |
| window.cancelAnimationFrame(this._animationId); | |
| } | |
| this._timeStart = -1; | |
| this._animationId = window.requestAnimationFrame(function(t) { | |
| self.updateTbState(STATE.ANIMATION_FOCUS, true); | |
| self.onFocusAnim(t, hitP, self._cameraMatrixState, self._gizmoMatrixState); | |
| }); | |
| } else if (hitP && !this.enableAnimations) { | |
| this.updateTbState(STATE.FOCUS, true); | |
| this.focus(hitP, this.scaleFactor); | |
| this.updateTbState(STATE.IDLE, false); | |
| this.dispatchEvent(_changeEvent); | |
| } | |
| } | |
| this.dispatchEvent(_endEvent); | |
| }); | |
| __publicField(this, "onDoublePanStart", () => { | |
| if (this.enabled && this.enablePan && this.camera && this.domElement) { | |
| this.dispatchEvent(_startEvent); | |
| this.updateTbState(STATE.PAN, true); | |
| this.setCenter( | |
| (this._touchCurrent[0].clientX + this._touchCurrent[1].clientX) / 2, | |
| (this._touchCurrent[0].clientY + this._touchCurrent[1].clientY) / 2 | |
| ); | |
| const rayDir = this.unprojectOnTbPlane(this.camera, _center.x, _center.y, this.domElement, true); | |
| if (rayDir !== void 0) { | |
| this._startCursorPosition.copy(rayDir); | |
| } | |
| this._currentCursorPosition.copy(this._startCursorPosition); | |
| this.activateGizmos(false); | |
| } | |
| }); | |
| __publicField(this, "onDoublePanMove", () => { | |
| if (this.enabled && this.enablePan && this.camera && this.domElement) { | |
| this.setCenter( | |
| (this._touchCurrent[0].clientX + this._touchCurrent[1].clientX) / 2, | |
| (this._touchCurrent[0].clientY + this._touchCurrent[1].clientY) / 2 | |
| ); | |
| if (this._state != STATE.PAN) { | |
| this.updateTbState(STATE.PAN, true); | |
| this._startCursorPosition.copy(this._currentCursorPosition); | |
| } | |
| const rayDir = this.unprojectOnTbPlane(this.camera, _center.x, _center.y, this.domElement, true); | |
| if (rayDir !== void 0) | |
| this._currentCursorPosition.copy(rayDir); | |
| this.applyTransformMatrix(this.pan(this._startCursorPosition, this._currentCursorPosition, true)); | |
| this.dispatchEvent(_changeEvent); | |
| } | |
| }); | |
| __publicField(this, "onDoublePanEnd", () => { | |
| this.updateTbState(STATE.IDLE, false); | |
| this.dispatchEvent(_endEvent); | |
| }); | |
| __publicField(this, "onRotateStart", () => { | |
| var _a; | |
| if (this.enabled && this.enableRotate) { | |
| this.dispatchEvent(_startEvent); | |
| this.updateTbState(STATE.ZROTATE, true); | |
| this._startFingerRotation = this.getAngle(this._touchCurrent[1], this._touchCurrent[0]) + this.getAngle(this._touchStart[1], this._touchStart[0]); | |
| this._currentFingerRotation = this._startFingerRotation; | |
| (_a = this.camera) == null ? void 0 : _a.getWorldDirection(this._rotationAxis); | |
| if (!this.enablePan && !this.enableZoom) { | |
| this.activateGizmos(true); | |
| } | |
| } | |
| }); | |
| __publicField(this, "onRotateMove", () => { | |
| var _a; | |
| if (this.enabled && this.enableRotate && this.camera && this.domElement) { | |
| this.setCenter( | |
| (this._touchCurrent[0].clientX + this._touchCurrent[1].clientX) / 2, | |
| (this._touchCurrent[0].clientY + this._touchCurrent[1].clientY) / 2 | |
| ); | |
| let rotationPoint; | |
| if (this._state != STATE.ZROTATE) { | |
| this.updateTbState(STATE.ZROTATE, true); | |
| this._startFingerRotation = this._currentFingerRotation; | |
| } | |
| this._currentFingerRotation = this.getAngle(this._touchCurrent[1], this._touchCurrent[0]) + this.getAngle(this._touchStart[1], this._touchStart[0]); | |
| if (!this.enablePan) { | |
| rotationPoint = new Vector3().setFromMatrixPosition(this._gizmoMatrixState); | |
| } else if (this.camera) { | |
| this._v3_2.setFromMatrixPosition(this._gizmoMatrixState); | |
| rotationPoint = (_a = this.unprojectOnTbPlane(this.camera, _center.x, _center.y, this.domElement)) == null ? void 0 : _a.applyQuaternion(this.camera.quaternion).multiplyScalar(1 / this.camera.zoom).add(this._v3_2); | |
| } | |
| const amount = MathUtils.DEG2RAD * (this._startFingerRotation - this._currentFingerRotation); | |
| if (rotationPoint !== void 0) { | |
| this.applyTransformMatrix(this.zRotate(rotationPoint, amount)); | |
| } | |
| this.dispatchEvent(_changeEvent); | |
| } | |
| }); | |
| __publicField(this, "onRotateEnd", () => { | |
| this.updateTbState(STATE.IDLE, false); | |
| this.activateGizmos(false); | |
| this.dispatchEvent(_endEvent); | |
| }); | |
| __publicField(this, "onPinchStart", () => { | |
| if (this.enabled && this.enableZoom) { | |
| this.dispatchEvent(_startEvent); | |
| this.updateTbState(STATE.SCALE, true); | |
| this._startFingerDistance = this.calculatePointersDistance(this._touchCurrent[0], this._touchCurrent[1]); | |
| this._currentFingerDistance = this._startFingerDistance; | |
| this.activateGizmos(false); | |
| } | |
| }); | |
| __publicField(this, "onPinchMove", () => { | |
| var _a, _b; | |
| if (this.enabled && this.enableZoom && this.domElement) { | |
| this.setCenter( | |
| (this._touchCurrent[0].clientX + this._touchCurrent[1].clientX) / 2, | |
| (this._touchCurrent[0].clientY + this._touchCurrent[1].clientY) / 2 | |
| ); | |
| const minDistance = 12; | |
| if (this._state != STATE.SCALE) { | |
| this._startFingerDistance = this._currentFingerDistance; | |
| this.updateTbState(STATE.SCALE, true); | |
| } | |
| this._currentFingerDistance = Math.max( | |
| this.calculatePointersDistance(this._touchCurrent[0], this._touchCurrent[1]), | |
| minDistance * this._devPxRatio | |
| ); | |
| const amount = this._currentFingerDistance / this._startFingerDistance; | |
| let scalePoint; | |
| if (!this.enablePan) { | |
| scalePoint = this._gizmos.position; | |
| } else { | |
| if (this.camera instanceof OrthographicCamera) { | |
| scalePoint = (_a = this.unprojectOnTbPlane(this.camera, _center.x, _center.y, this.domElement)) == null ? void 0 : _a.applyQuaternion(this.camera.quaternion).multiplyScalar(1 / this.camera.zoom).add(this._gizmos.position); | |
| } else if (this.camera instanceof PerspectiveCamera) { | |
| scalePoint = (_b = this.unprojectOnTbPlane(this.camera, _center.x, _center.y, this.domElement)) == null ? void 0 : _b.applyQuaternion(this.camera.quaternion).add(this._gizmos.position); | |
| } | |
| } | |
| if (scalePoint !== void 0) { | |
| this.applyTransformMatrix(this.applyScale(amount, scalePoint)); | |
| } | |
| this.dispatchEvent(_changeEvent); | |
| } | |
| }); | |
| __publicField(this, "onPinchEnd", () => { | |
| this.updateTbState(STATE.IDLE, false); | |
| this.dispatchEvent(_endEvent); | |
| }); | |
| __publicField(this, "onTriplePanStart", () => { | |
| if (this.enabled && this.enableZoom && this.domElement) { | |
| this.dispatchEvent(_startEvent); | |
| this.updateTbState(STATE.SCALE, true); | |
| let clientX = 0; | |
| let clientY = 0; | |
| const nFingers = this._touchCurrent.length; | |
| for (let i = 0; i < nFingers; i++) { | |
| clientX += this._touchCurrent[i].clientX; | |
| clientY += this._touchCurrent[i].clientY; | |
| } | |
| this.setCenter(clientX / nFingers, clientY / nFingers); | |
| this._startCursorPosition.setY(this.getCursorNDC(_center.x, _center.y, this.domElement).y * 0.5); | |
| this._currentCursorPosition.copy(this._startCursorPosition); | |
| } | |
| }); | |
| __publicField(this, "onTriplePanMove", () => { | |
| if (this.enabled && this.enableZoom && this.camera && this.domElement) { | |
| let clientX = 0; | |
| let clientY = 0; | |
| const nFingers = this._touchCurrent.length; | |
| for (let i = 0; i < nFingers; i++) { | |
| clientX += this._touchCurrent[i].clientX; | |
| clientY += this._touchCurrent[i].clientY; | |
| } | |
| this.setCenter(clientX / nFingers, clientY / nFingers); | |
| const screenNotches = 8; | |
| this._currentCursorPosition.setY(this.getCursorNDC(_center.x, _center.y, this.domElement).y * 0.5); | |
| const movement = this._currentCursorPosition.y - this._startCursorPosition.y; | |
| let size = 1; | |
| if (movement < 0) { | |
| size = 1 / Math.pow(this.scaleFactor, -movement * screenNotches); | |
| } else if (movement > 0) { | |
| size = Math.pow(this.scaleFactor, movement * screenNotches); | |
| } | |
| this._v3_1.setFromMatrixPosition(this._cameraMatrixState); | |
| const x = this._v3_1.distanceTo(this._gizmos.position); | |
| let xNew = x / size; | |
| xNew = MathUtils.clamp(xNew, this.minDistance, this.maxDistance); | |
| const y = x * Math.tan(MathUtils.DEG2RAD * this._fovState * 0.5); | |
| let newFov = MathUtils.RAD2DEG * (Math.atan(y / xNew) * 2); | |
| newFov = MathUtils.clamp(newFov, this.minFov, this.maxFov); | |
| const newDistance = y / Math.tan(MathUtils.DEG2RAD * (newFov / 2)); | |
| size = x / newDistance; | |
| this._v3_2.setFromMatrixPosition(this._gizmoMatrixState); | |
| this.setFov(newFov); | |
| this.applyTransformMatrix(this.applyScale(size, this._v3_2, false)); | |
| const direction = this._gizmos.position.clone().sub(this.camera.position).normalize().multiplyScalar(newDistance / x); | |
| this._m4_1.makeTranslation(direction.x, direction.y, direction.z); | |
| this.dispatchEvent(_changeEvent); | |
| } | |
| }); | |
| __publicField(this, "onTriplePanEnd", () => { | |
| this.updateTbState(STATE.IDLE, false); | |
| this.dispatchEvent(_endEvent); | |
| }); | |
| /** | |
| * Set _center's x/y coordinates | |
| * @param {Number} clientX | |
| * @param {Number} clientY | |
| */ | |
| __publicField(this, "setCenter", (clientX, clientY) => { | |
| _center.x = clientX; | |
| _center.y = clientY; | |
| }); | |
| /** | |
| * Set default mouse actions | |
| */ | |
| __publicField(this, "initializeMouseActions", () => { | |
| this.setMouseAction("PAN", 0, "CTRL"); | |
| this.setMouseAction("PAN", 2); | |
| this.setMouseAction("ROTATE", 0); | |
| this.setMouseAction("ZOOM", "WHEEL"); | |
| this.setMouseAction("ZOOM", 1); | |
| this.setMouseAction("FOV", "WHEEL", "SHIFT"); | |
| this.setMouseAction("FOV", 1, "SHIFT"); | |
| }); | |
| /** | |
| * Set a new mouse action by specifying the operation to be performed and a mouse/key combination. In case of conflict, replaces the existing one | |
| * @param {String} operation The operation to be performed ('PAN', 'ROTATE', 'ZOOM', 'FOV) | |
| * @param {*} mouse A mouse button (0, 1, 2) or 'WHEEL' for wheel notches | |
| * @param {*} key The keyboard modifier ('CTRL', 'SHIFT') or null if key is not needed | |
| * @returns {Boolean} True if the mouse action has been successfully added, false otherwise | |
| */ | |
| __publicField(this, "setMouseAction", (operation, mouse, key = null) => { | |
| const operationInput = ["PAN", "ROTATE", "ZOOM", "FOV"]; | |
| const mouseInput = [0, 1, 2, "WHEEL"]; | |
| const keyInput = ["CTRL", "SHIFT", null]; | |
| let state; | |
| if (!operationInput.includes(operation) || !mouseInput.includes(mouse) || !keyInput.includes(key)) { | |
| return false; | |
| } | |
| if (mouse == "WHEEL") { | |
| if (operation != "ZOOM" && operation != "FOV") { | |
| return false; | |
| } | |
| } | |
| switch (operation) { | |
| case "PAN": | |
| state = STATE.PAN; | |
| break; | |
| case "ROTATE": | |
| state = STATE.ROTATE; | |
| break; | |
| case "ZOOM": | |
| state = STATE.SCALE; | |
| break; | |
| case "FOV": | |
| state = STATE.FOV; | |
| break; | |
| } | |
| const action = { | |
| operation, | |
| mouse, | |
| key, | |
| state | |
| }; | |
| for (let i = 0; i < this.mouseActions.length; i++) { | |
| if (this.mouseActions[i].mouse == action.mouse && this.mouseActions[i].key == action.key) { | |
| this.mouseActions.splice(i, 1, action); | |
| return true; | |
| } | |
| } | |
| this.mouseActions.push(action); | |
| return true; | |
| }); | |
| /** | |
| * Return the operation associated to a mouse/keyboard combination | |
| * @param {*} mouse A mouse button (0, 1, 2) or 'WHEEL' for wheel notches | |
| * @param {*} key The keyboard modifier ('CTRL', 'SHIFT') or null if key is not needed | |
| * @returns The operation if it has been found, null otherwise | |
| */ | |
| __publicField(this, "getOpFromAction", (mouse, key) => { | |
| let action; | |
| for (let i = 0; i < this.mouseActions.length; i++) { | |
| action = this.mouseActions[i]; | |
| if (action.mouse == mouse && action.key == key) { | |
| return action.operation; | |
| } | |
| } | |
| if (key) { | |
| for (let i = 0; i < this.mouseActions.length; i++) { | |
| action = this.mouseActions[i]; | |
| if (action.mouse == mouse && action.key == null) { | |
| return action.operation; | |
| } | |
| } | |
| } | |
| return null; | |
| }); | |
| /** | |
| * Get the operation associated to mouse and key combination and returns the corresponding FSA state | |
| * @param {Number} mouse Mouse button | |
| * @param {String} key Keyboard modifier | |
| * @returns The FSA state obtained from the operation associated to mouse/keyboard combination | |
| */ | |
| __publicField(this, "getOpStateFromAction", (mouse, key) => { | |
| let action; | |
| for (let i = 0; i < this.mouseActions.length; i++) { | |
| action = this.mouseActions[i]; | |
| if (action.mouse == mouse && action.key == key) { | |
| return action.state; | |
| } | |
| } | |
| if (key) { | |
| for (let i = 0; i < this.mouseActions.length; i++) { | |
| action = this.mouseActions[i]; | |
| if (action.mouse == mouse && action.key == null) { | |
| return action.state; | |
| } | |
| } | |
| } | |
| return null; | |
| }); | |
| /** | |
| * Calculate the angle between two pointers | |
| * @param {PointerEvent} p1 | |
| * @param {PointerEvent} p2 | |
| * @returns {Number} The angle between two pointers in degrees | |
| */ | |
| __publicField(this, "getAngle", (p1, p2) => { | |
| return Math.atan2(p2.clientY - p1.clientY, p2.clientX - p1.clientX) * 180 / Math.PI; | |
| }); | |
| /** | |
| * Update a PointerEvent inside current pointerevents array | |
| * @param {PointerEvent} event | |
| */ | |
| __publicField(this, "updateTouchEvent", (event) => { | |
| for (let i = 0; i < this._touchCurrent.length; i++) { | |
| if (this._touchCurrent[i].pointerId == event.pointerId) { | |
| this._touchCurrent.splice(i, 1, event); | |
| break; | |
| } | |
| } | |
| }); | |
| /** | |
| * Calculate the angular speed | |
| * @param {Number} p0 Position at t0 | |
| * @param {Number} p1 Position at t1 | |
| * @param {Number} t0 Initial time in milliseconds | |
| * @param {Number} t1 Ending time in milliseconds | |
| */ | |
| __publicField(this, "calculateAngularSpeed", (p0, p1, t0, t1) => { | |
| const s = p1 - p0; | |
| const t = (t1 - t0) / 1e3; | |
| if (t == 0) { | |
| return 0; | |
| } | |
| return s / t; | |
| }); | |
| /** | |
| * Calculate the distance between two pointers | |
| * @param {PointerEvent} p0 The first pointer | |
| * @param {PointerEvent} p1 The second pointer | |
| * @returns {number} The distance between the two pointers | |
| */ | |
| __publicField(this, "calculatePointersDistance", (p0, p1) => { | |
| return Math.sqrt(Math.pow(p1.clientX - p0.clientX, 2) + Math.pow(p1.clientY - p0.clientY, 2)); | |
| }); | |
| /** | |
| * Calculate the rotation axis as the vector perpendicular between two vectors | |
| * @param {Vector3} vec1 The first vector | |
| * @param {Vector3} vec2 The second vector | |
| * @returns {Vector3} The normalized rotation axis | |
| */ | |
| __publicField(this, "calculateRotationAxis", (vec1, vec2) => { | |
| this._rotationMatrix.extractRotation(this._cameraMatrixState); | |
| this._quat.setFromRotationMatrix(this._rotationMatrix); | |
| this._rotationAxis.crossVectors(vec1, vec2).applyQuaternion(this._quat); | |
| return this._rotationAxis.normalize().clone(); | |
| }); | |
| /** | |
| * Calculate the trackball radius so that gizmo's diamater will be 2/3 of the minimum side of the camera frustum | |
| * @param {Camera} camera | |
| * @returns {Number} The trackball radius | |
| */ | |
| __publicField(this, "calculateTbRadius", (camera) => { | |
| const factor = 0.67; | |
| const distance = camera.position.distanceTo(this._gizmos.position); | |
| if (camera instanceof PerspectiveCamera) { | |
| const halfFovV = MathUtils.DEG2RAD * camera.fov * 0.5; | |
| const halfFovH = Math.atan(camera.aspect * Math.tan(halfFovV)); | |
| return Math.tan(Math.min(halfFovV, halfFovH)) * distance * factor; | |
| } else if (camera instanceof OrthographicCamera) { | |
| return Math.min(camera.top, camera.right) * factor; | |
| } | |
| }); | |
| /** | |
| * Focus operation consist of positioning the point of interest in front of the camera and a slightly zoom in | |
| * @param {Vector3} point The point of interest | |
| * @param {Number} size Scale factor | |
| * @param {Number} amount Amount of operation to be completed (used for focus animations, default is complete full operation) | |
| */ | |
| __publicField(this, "focus", (point, size, amount = 1) => { | |
| if (this.camera) { | |
| const focusPoint = point.clone(); | |
| focusPoint.sub(this._gizmos.position).multiplyScalar(amount); | |
| this._translationMatrix.makeTranslation(focusPoint.x, focusPoint.y, focusPoint.z); | |
| const gizmoStateTemp = this._gizmoMatrixState.clone(); | |
| this._gizmoMatrixState.premultiply(this._translationMatrix); | |
| this._gizmoMatrixState.decompose(this._gizmos.position, this._gizmos.quaternion, this._gizmos.scale); | |
| const cameraStateTemp = this._cameraMatrixState.clone(); | |
| this._cameraMatrixState.premultiply(this._translationMatrix); | |
| this._cameraMatrixState.decompose(this.camera.position, this.camera.quaternion, this.camera.scale); | |
| if (this.enableZoom) { | |
| this.applyTransformMatrix(this.applyScale(size, this._gizmos.position)); | |
| } | |
| this._gizmoMatrixState.copy(gizmoStateTemp); | |
| this._cameraMatrixState.copy(cameraStateTemp); | |
| } | |
| }); | |
| /** | |
| * Draw a grid and add it to the scene | |
| */ | |
| __publicField(this, "drawGrid", () => { | |
| if (this.scene) { | |
| const color = 8947848; | |
| const multiplier = 3; | |
| let size, divisions, maxLength, tick; | |
| if (this.camera instanceof OrthographicCamera) { | |
| const width = this.camera.right - this.camera.left; | |
| const height = this.camera.bottom - this.camera.top; | |
| maxLength = Math.max(width, height); | |
| tick = maxLength / 20; | |
| size = maxLength / this.camera.zoom * multiplier; | |
| divisions = size / tick * this.camera.zoom; | |
| } else if (this.camera instanceof PerspectiveCamera) { | |
| const distance = this.camera.position.distanceTo(this._gizmos.position); | |
| const halfFovV = MathUtils.DEG2RAD * this.camera.fov * 0.5; | |
| const halfFovH = Math.atan(this.camera.aspect * Math.tan(halfFovV)); | |
| maxLength = Math.tan(Math.max(halfFovV, halfFovH)) * distance * 2; | |
| tick = maxLength / 20; | |
| size = maxLength * multiplier; | |
| divisions = size / tick; | |
| } | |
| if (this._grid == null && this.camera) { | |
| this._grid = new GridHelper(size, divisions, color, color); | |
| this._grid.position.copy(this._gizmos.position); | |
| this._gridPosition.copy(this._grid.position); | |
| this._grid.quaternion.copy(this.camera.quaternion); | |
| this._grid.rotateX(Math.PI * 0.5); | |
| this.scene.add(this._grid); | |
| } | |
| } | |
| }); | |
| __publicField(this, "connect", (domElement) => { | |
| if (domElement === document) { | |
| console.error( | |
| 'THREE.ArcballControls: "document" should not be used as the target "domElement". Please use "renderer.domElement" instead.' | |
| ); | |
| } | |
| this.domElement = domElement; | |
| this.domElement.style.touchAction = "none"; | |
| this.domElement.addEventListener("contextmenu", this.onContextMenu); | |
| this.domElement.addEventListener("pointerdown", this.onPointerDown); | |
| this.domElement.addEventListener("pointercancel", this.onPointerCancel); | |
| this.domElement.addEventListener("wheel", this.onWheel); | |
| }); | |
| /** | |
| * Remove all listeners, stop animations and clean scene | |
| */ | |
| __publicField(this, "dispose", () => { | |
| var _a, _b, _c, _d, _e; | |
| if (this._animationId != -1) { | |
| window.cancelAnimationFrame(this._animationId); | |
| } | |
| (_a = this.domElement) == null ? void 0 : _a.removeEventListener("pointerdown", this.onPointerDown); | |
| (_b = this.domElement) == null ? void 0 : _b.removeEventListener("pointercancel", this.onPointerCancel); | |
| (_c = this.domElement) == null ? void 0 : _c.removeEventListener("wheel", this.onWheel); | |
| (_d = this.domElement) == null ? void 0 : _d.removeEventListener("contextmenu", this.onContextMenu); | |
| window.removeEventListener("pointermove", this.onPointerMove); | |
| window.removeEventListener("pointerup", this.onPointerUp); | |
| window.removeEventListener("resize", this.onWindowResize); | |
| (_e = this.scene) == null ? void 0 : _e.remove(this._gizmos); | |
| this.disposeGrid(); | |
| }); | |
| /** | |
| * remove the grid from the scene | |
| */ | |
| __publicField(this, "disposeGrid", () => { | |
| if (this._grid && this.scene) { | |
| this.scene.remove(this._grid); | |
| this._grid = null; | |
| } | |
| }); | |
| /** | |
| * Compute the easing out cubic function for ease out effect in animation | |
| * @param {Number} t The absolute progress of the animation in the bound of 0 (beginning of the) and 1 (ending of animation) | |
| * @returns {Number} Result of easing out cubic at time t | |
| */ | |
| __publicField(this, "easeOutCubic", (t) => { | |
| return 1 - Math.pow(1 - t, 3); | |
| }); | |
| /** | |
| * Make rotation gizmos more or less visible | |
| * @param {Boolean} isActive If true, make gizmos more visible | |
| */ | |
| __publicField(this, "activateGizmos", (isActive) => { | |
| for (const gizmo of this._gizmos.children) { | |
| gizmo.material.setValues({ opacity: isActive ? 1 : 0.6 }); | |
| } | |
| }); | |
| /** | |
| * Calculate the cursor position in NDC | |
| * @param {number} x Cursor horizontal coordinate within the canvas | |
| * @param {number} y Cursor vertical coordinate within the canvas | |
| * @param {HTMLElement} canvas The canvas where the renderer draws its output | |
| * @returns {Vector2} Cursor normalized position inside the canvas | |
| */ | |
| __publicField(this, "getCursorNDC", (cursorX, cursorY, canvas) => { | |
| const canvasRect = canvas.getBoundingClientRect(); | |
| this._v2_1.setX((cursorX - canvasRect.left) / canvasRect.width * 2 - 1); | |
| this._v2_1.setY((canvasRect.bottom - cursorY) / canvasRect.height * 2 - 1); | |
| return this._v2_1.clone(); | |
| }); | |
| /** | |
| * Calculate the cursor position inside the canvas x/y coordinates with the origin being in the center of the canvas | |
| * @param {Number} x Cursor horizontal coordinate within the canvas | |
| * @param {Number} y Cursor vertical coordinate within the canvas | |
| * @param {HTMLElement} canvas The canvas where the renderer draws its output | |
| * @returns {Vector2} Cursor position inside the canvas | |
| */ | |
| __publicField(this, "getCursorPosition", (cursorX, cursorY, canvas) => { | |
| this._v2_1.copy(this.getCursorNDC(cursorX, cursorY, canvas)); | |
| if (this.camera instanceof OrthographicCamera) { | |
| this._v2_1.x *= (this.camera.right - this.camera.left) * 0.5; | |
| this._v2_1.y *= (this.camera.top - this.camera.bottom) * 0.5; | |
| } | |
| return this._v2_1.clone(); | |
| }); | |
| /** | |
| * Set the camera to be controlled | |
| * @param {Camera} camera The virtual camera to be controlled | |
| */ | |
| __publicField(this, "setCamera", (camera) => { | |
| if (camera) { | |
| camera.lookAt(this.target); | |
| camera.updateMatrix(); | |
| if (camera instanceof PerspectiveCamera) { | |
| this._fov0 = camera.fov; | |
| this._fovState = camera.fov; | |
| } | |
| this._cameraMatrixState0.copy(camera.matrix); | |
| this._cameraMatrixState.copy(this._cameraMatrixState0); | |
| this._cameraProjectionState.copy(camera.projectionMatrix); | |
| this._zoom0 = camera.zoom; | |
| this._zoomState = this._zoom0; | |
| this._initialNear = camera.near; | |
| this._nearPos0 = camera.position.distanceTo(this.target) - camera.near; | |
| this._nearPos = this._initialNear; | |
| this._initialFar = camera.far; | |
| this._farPos0 = camera.position.distanceTo(this.target) - camera.far; | |
| this._farPos = this._initialFar; | |
| this._up0.copy(camera.up); | |
| this._upState.copy(camera.up); | |
| this.camera = camera; | |
| this.camera.updateProjectionMatrix(); | |
| const tbRadius = this.calculateTbRadius(camera); | |
| if (tbRadius !== void 0) { | |
| this._tbRadius = tbRadius; | |
| } | |
| this.makeGizmos(this.target, this._tbRadius); | |
| } | |
| }); | |
| /** | |
| * Creates the rotation gizmos matching trackball center and radius | |
| * @param {Vector3} tbCenter The trackball center | |
| * @param {number} tbRadius The trackball radius | |
| */ | |
| __publicField(this, "makeGizmos", (tbCenter, tbRadius) => { | |
| const curve = new EllipseCurve(0, 0, tbRadius, tbRadius); | |
| const points = curve.getPoints(this._curvePts); | |
| const curveGeometry = new BufferGeometry().setFromPoints(points); | |
| const curveMaterialX = new LineBasicMaterial({ color: 16744576, fog: false, transparent: true, opacity: 0.6 }); | |
| const curveMaterialY = new LineBasicMaterial({ color: 8454016, fog: false, transparent: true, opacity: 0.6 }); | |
| const curveMaterialZ = new LineBasicMaterial({ color: 8421631, fog: false, transparent: true, opacity: 0.6 }); | |
| const gizmoX = new Line(curveGeometry, curveMaterialX); | |
| const gizmoY = new Line(curveGeometry, curveMaterialY); | |
| const gizmoZ = new Line(curveGeometry, curveMaterialZ); | |
| const rotation = Math.PI * 0.5; | |
| gizmoX.rotation.x = rotation; | |
| gizmoY.rotation.y = rotation; | |
| this._gizmoMatrixState0.identity().setPosition(tbCenter); | |
| this._gizmoMatrixState.copy(this._gizmoMatrixState0); | |
| if (this.camera && this.camera.zoom != 1) { | |
| const size = 1 / this.camera.zoom; | |
| this._scaleMatrix.makeScale(size, size, size); | |
| this._translationMatrix.makeTranslation(-tbCenter.x, -tbCenter.y, -tbCenter.z); | |
| this._gizmoMatrixState.premultiply(this._translationMatrix).premultiply(this._scaleMatrix); | |
| this._translationMatrix.makeTranslation(tbCenter.x, tbCenter.y, tbCenter.z); | |
| this._gizmoMatrixState.premultiply(this._translationMatrix); | |
| } | |
| this._gizmoMatrixState.decompose(this._gizmos.position, this._gizmos.quaternion, this._gizmos.scale); | |
| this._gizmos.clear(); | |
| this._gizmos.add(gizmoX); | |
| this._gizmos.add(gizmoY); | |
| this._gizmos.add(gizmoZ); | |
| }); | |
| /** | |
| * Perform animation for focus operation | |
| * @param {Number} time Instant in which this function is called as performance.now() | |
| * @param {Vector3} point Point of interest for focus operation | |
| * @param {Matrix4} cameraMatrix Camera matrix | |
| * @param {Matrix4} gizmoMatrix Gizmos matrix | |
| */ | |
| __publicField(this, "onFocusAnim", (time, point, cameraMatrix, gizmoMatrix) => { | |
| if (this._timeStart == -1) { | |
| this._timeStart = time; | |
| } | |
| if (this._state == STATE.ANIMATION_FOCUS) { | |
| const deltaTime = time - this._timeStart; | |
| const animTime = deltaTime / this.focusAnimationTime; | |
| this._gizmoMatrixState.copy(gizmoMatrix); | |
| if (animTime >= 1) { | |
| this._gizmoMatrixState.decompose(this._gizmos.position, this._gizmos.quaternion, this._gizmos.scale); | |
| this.focus(point, this.scaleFactor); | |
| this._timeStart = -1; | |
| this.updateTbState(STATE.IDLE, false); | |
| this.activateGizmos(false); | |
| this.dispatchEvent(_changeEvent); | |
| } else { | |
| const amount = this.easeOutCubic(animTime); | |
| const size = 1 - amount + this.scaleFactor * amount; | |
| this._gizmoMatrixState.decompose(this._gizmos.position, this._gizmos.quaternion, this._gizmos.scale); | |
| this.focus(point, size, amount); | |
| this.dispatchEvent(_changeEvent); | |
| const self = this; | |
| this._animationId = window.requestAnimationFrame(function(t) { | |
| self.onFocusAnim(t, point, cameraMatrix, gizmoMatrix.clone()); | |
| }); | |
| } | |
| } else { | |
| this._animationId = -1; | |
| this._timeStart = -1; | |
| } | |
| }); | |
| /** | |
| * Perform animation for rotation operation | |
| * @param {Number} time Instant in which this function is called as performance.now() | |
| * @param {Vector3} rotationAxis Rotation axis | |
| * @param {number} w0 Initial angular velocity | |
| */ | |
| __publicField(this, "onRotationAnim", (time, rotationAxis, w0) => { | |
| if (this._timeStart == -1) { | |
| this._anglePrev = 0; | |
| this._angleCurrent = 0; | |
| this._timeStart = time; | |
| } | |
| if (this._state == STATE.ANIMATION_ROTATE) { | |
| const deltaTime = (time - this._timeStart) / 1e3; | |
| const w = w0 + -this.dampingFactor * deltaTime; | |
| if (w > 0) { | |
| this._angleCurrent = 0.5 * -this.dampingFactor * Math.pow(deltaTime, 2) + w0 * deltaTime + 0; | |
| this.applyTransformMatrix(this.rotate(rotationAxis, this._angleCurrent)); | |
| this.dispatchEvent(_changeEvent); | |
| const self = this; | |
| this._animationId = window.requestAnimationFrame(function(t) { | |
| self.onRotationAnim(t, rotationAxis, w0); | |
| }); | |
| } else { | |
| this._animationId = -1; | |
| this._timeStart = -1; | |
| this.updateTbState(STATE.IDLE, false); | |
| this.activateGizmos(false); | |
| this.dispatchEvent(_changeEvent); | |
| } | |
| } else { | |
| this._animationId = -1; | |
| this._timeStart = -1; | |
| if (this._state != STATE.ROTATE) { | |
| this.activateGizmos(false); | |
| this.dispatchEvent(_changeEvent); | |
| } | |
| } | |
| }); | |
| /** | |
| * Perform pan operation moving camera between two points | |
| * @param {Vector3} p0 Initial point | |
| * @param {Vector3} p1 Ending point | |
| * @param {Boolean} adjust If movement should be adjusted considering camera distance (Perspective only) | |
| */ | |
| __publicField(this, "pan", (p0, p1, adjust = false) => { | |
| if (this.camera) { | |
| const movement = p0.clone().sub(p1); | |
| if (this.camera instanceof OrthographicCamera) { | |
| movement.multiplyScalar(1 / this.camera.zoom); | |
| } | |
| if (this.camera instanceof PerspectiveCamera && adjust) { | |
| this._v3_1.setFromMatrixPosition(this._cameraMatrixState0); | |
| this._v3_2.setFromMatrixPosition(this._gizmoMatrixState0); | |
| const distanceFactor = this._v3_1.distanceTo(this._v3_2) / this.camera.position.distanceTo(this._gizmos.position); | |
| movement.multiplyScalar(1 / distanceFactor); | |
| } | |
| this._v3_1.set(movement.x, movement.y, 0).applyQuaternion(this.camera.quaternion); | |
| this._m4_1.makeTranslation(this._v3_1.x, this._v3_1.y, this._v3_1.z); | |
| this.setTransformationMatrices(this._m4_1, this._m4_1); | |
| } | |
| return _transformation; | |
| }); | |
| /** | |
| * Reset trackball | |
| */ | |
| __publicField(this, "reset", () => { | |
| if (this.camera) { | |
| this.camera.zoom = this._zoom0; | |
| if (this.camera instanceof PerspectiveCamera) { | |
| this.camera.fov = this._fov0; | |
| } | |
| this.camera.near = this._nearPos; | |
| this.camera.far = this._farPos; | |
| this._cameraMatrixState.copy(this._cameraMatrixState0); | |
| this._cameraMatrixState.decompose(this.camera.position, this.camera.quaternion, this.camera.scale); | |
| this.camera.up.copy(this._up0); | |
| this.camera.updateMatrix(); | |
| this.camera.updateProjectionMatrix(); | |
| this._gizmoMatrixState.copy(this._gizmoMatrixState0); | |
| this._gizmoMatrixState0.decompose(this._gizmos.position, this._gizmos.quaternion, this._gizmos.scale); | |
| this._gizmos.updateMatrix(); | |
| const tbRadius = this.calculateTbRadius(this.camera); | |
| if (tbRadius !== void 0) { | |
| this._tbRadius = tbRadius; | |
| } | |
| this.makeGizmos(this._gizmos.position, this._tbRadius); | |
| this.camera.lookAt(this._gizmos.position); | |
| this.updateTbState(STATE.IDLE, false); | |
| this.dispatchEvent(_changeEvent); | |
| } | |
| }); | |
| /** | |
| * Rotate the camera around an axis passing by trackball's center | |
| * @param {Vector3} axis Rotation axis | |
| * @param {number} angle Angle in radians | |
| * @returns {Object} Object with 'camera' field containing transformation matrix resulting from the operation to be applied to the camera | |
| */ | |
| __publicField(this, "rotate", (axis, angle) => { | |
| const point = this._gizmos.position; | |
| this._translationMatrix.makeTranslation(-point.x, -point.y, -point.z); | |
| this._rotationMatrix.makeRotationAxis(axis, -angle); | |
| this._m4_1.makeTranslation(point.x, point.y, point.z); | |
| this._m4_1.multiply(this._rotationMatrix); | |
| this._m4_1.multiply(this._translationMatrix); | |
| this.setTransformationMatrices(this._m4_1); | |
| return _transformation; | |
| }); | |
| __publicField(this, "copyState", () => { | |
| if (this.camera) { | |
| const state = JSON.stringify( | |
| this.camera instanceof OrthographicCamera ? { | |
| arcballState: { | |
| cameraFar: this.camera.far, | |
| cameraMatrix: this.camera.matrix, | |
| cameraNear: this.camera.near, | |
| cameraUp: this.camera.up, | |
| cameraZoom: this.camera.zoom, | |
| gizmoMatrix: this._gizmos.matrix | |
| } | |
| } : { | |
| arcballState: { | |
| cameraFar: this.camera.far, | |
| cameraFov: this.camera.fov, | |
| cameraMatrix: this.camera.matrix, | |
| cameraNear: this.camera.near, | |
| cameraUp: this.camera.up, | |
| cameraZoom: this.camera.zoom, | |
| gizmoMatrix: this._gizmos.matrix | |
| } | |
| } | |
| ); | |
| navigator.clipboard.writeText(state); | |
| } | |
| }); | |
| __publicField(this, "pasteState", () => { | |
| const self = this; | |
| navigator.clipboard.readText().then(function resolved(value) { | |
| self.setStateFromJSON(value); | |
| }); | |
| }); | |
| /** | |
| * Save the current state of the control. This can later be recovered with .reset | |
| */ | |
| __publicField(this, "saveState", () => { | |
| if (!this.camera) | |
| return; | |
| this._cameraMatrixState0.copy(this.camera.matrix); | |
| this._gizmoMatrixState0.copy(this._gizmos.matrix); | |
| this._nearPos = this.camera.near; | |
| this._farPos = this.camera.far; | |
| this._zoom0 = this.camera.zoom; | |
| this._up0.copy(this.camera.up); | |
| if (this.camera instanceof PerspectiveCamera) { | |
| this._fov0 = this.camera.fov; | |
| } | |
| }); | |
| /** | |
| * Perform uniform scale operation around a given point | |
| * @param {Number} size Scale factor | |
| * @param {Vector3} point Point around which scale | |
| * @param {Boolean} scaleGizmos If gizmos should be scaled (Perspective only) | |
| * @returns {Object} Object with 'camera' and 'gizmo' fields containing transformation matrices resulting from the operation to be applied to the camera and gizmos | |
| */ | |
| __publicField(this, "applyScale", (size, point, scaleGizmos = true) => { | |
| if (!this.camera) | |
| return; | |
| const scalePoint = point.clone(); | |
| let sizeInverse = 1 / size; | |
| if (this.camera instanceof OrthographicCamera) { | |
| this.camera.zoom = this._zoomState; | |
| this.camera.zoom *= size; | |
| if (this.camera.zoom > this.maxZoom) { | |
| this.camera.zoom = this.maxZoom; | |
| sizeInverse = this._zoomState / this.maxZoom; | |
| } else if (this.camera.zoom < this.minZoom) { | |
| this.camera.zoom = this.minZoom; | |
| sizeInverse = this._zoomState / this.minZoom; | |
| } | |
| this.camera.updateProjectionMatrix(); | |
| this._v3_1.setFromMatrixPosition(this._gizmoMatrixState); | |
| this._scaleMatrix.makeScale(sizeInverse, sizeInverse, sizeInverse); | |
| this._translationMatrix.makeTranslation(-this._v3_1.x, -this._v3_1.y, -this._v3_1.z); | |
| this._m4_2.makeTranslation(this._v3_1.x, this._v3_1.y, this._v3_1.z).multiply(this._scaleMatrix); | |
| this._m4_2.multiply(this._translationMatrix); | |
| scalePoint.sub(this._v3_1); | |
| const amount = scalePoint.clone().multiplyScalar(sizeInverse); | |
| scalePoint.sub(amount); | |
| this._m4_1.makeTranslation(scalePoint.x, scalePoint.y, scalePoint.z); | |
| this._m4_2.premultiply(this._m4_1); | |
| this.setTransformationMatrices(this._m4_1, this._m4_2); | |
| return _transformation; | |
| } | |
| if (this.camera instanceof PerspectiveCamera) { | |
| this._v3_1.setFromMatrixPosition(this._cameraMatrixState); | |
| this._v3_2.setFromMatrixPosition(this._gizmoMatrixState); | |
| let distance = this._v3_1.distanceTo(scalePoint); | |
| let amount = distance - distance * sizeInverse; | |
| const newDistance = distance - amount; | |
| if (newDistance < this.minDistance) { | |
| sizeInverse = this.minDistance / distance; | |
| amount = distance - distance * sizeInverse; | |
| } else if (newDistance > this.maxDistance) { | |
| sizeInverse = this.maxDistance / distance; | |
| amount = distance - distance * sizeInverse; | |
| } | |
| let direction = scalePoint.clone().sub(this._v3_1).normalize().multiplyScalar(amount); | |
| this._m4_1.makeTranslation(direction.x, direction.y, direction.z); | |
| if (scaleGizmos) { | |
| const pos = this._v3_2; | |
| distance = pos.distanceTo(scalePoint); | |
| amount = distance - distance * sizeInverse; | |
| direction = scalePoint.clone().sub(this._v3_2).normalize().multiplyScalar(amount); | |
| this._translationMatrix.makeTranslation(pos.x, pos.y, pos.z); | |
| this._scaleMatrix.makeScale(sizeInverse, sizeInverse, sizeInverse); | |
| this._m4_2.makeTranslation(direction.x, direction.y, direction.z).multiply(this._translationMatrix); | |
| this._m4_2.multiply(this._scaleMatrix); | |
| this._translationMatrix.makeTranslation(-pos.x, -pos.y, -pos.z); | |
| this._m4_2.multiply(this._translationMatrix); | |
| this.setTransformationMatrices(this._m4_1, this._m4_2); | |
| } else { | |
| this.setTransformationMatrices(this._m4_1); | |
| } | |
| return _transformation; | |
| } | |
| }); | |
| /** | |
| * Set camera fov | |
| * @param {Number} value fov to be setted | |
| */ | |
| __publicField(this, "setFov", (value) => { | |
| if (this.camera instanceof PerspectiveCamera) { | |
| this.camera.fov = MathUtils.clamp(value, this.minFov, this.maxFov); | |
| this.camera.updateProjectionMatrix(); | |
| } | |
| }); | |
| /** | |
| * Set the trackball's center point | |
| * @param {Number} x X coordinate | |
| * @param {Number} y Y coordinate | |
| * @param {Number} z Z coordinate | |
| */ | |
| __publicField(this, "setTarget", (x, y, z) => { | |
| if (this.camera) { | |
| this.target.set(x, y, z); | |
| this._gizmos.position.set(x, y, z); | |
| const tbRadius = this.calculateTbRadius(this.camera); | |
| if (tbRadius !== void 0) { | |
| this._tbRadius = tbRadius; | |
| } | |
| this.makeGizmos(this.target, this._tbRadius); | |
| this.camera.lookAt(this.target); | |
| } | |
| }); | |
| /** | |
| * Rotate camera around its direction axis passing by a given point by a given angle | |
| * @param {Vector3} point The point where the rotation axis is passing trough | |
| * @param {Number} angle Angle in radians | |
| * @returns The computed transormation matix | |
| */ | |
| __publicField(this, "zRotate", (point, angle) => { | |
| this._rotationMatrix.makeRotationAxis(this._rotationAxis, angle); | |
| this._translationMatrix.makeTranslation(-point.x, -point.y, -point.z); | |
| this._m4_1.makeTranslation(point.x, point.y, point.z); | |
| this._m4_1.multiply(this._rotationMatrix); | |
| this._m4_1.multiply(this._translationMatrix); | |
| this._v3_1.setFromMatrixPosition(this._gizmoMatrixState).sub(point); | |
| this._v3_2.copy(this._v3_1).applyAxisAngle(this._rotationAxis, angle); | |
| this._v3_2.sub(this._v3_1); | |
| this._m4_2.makeTranslation(this._v3_2.x, this._v3_2.y, this._v3_2.z); | |
| this.setTransformationMatrices(this._m4_1, this._m4_2); | |
| return _transformation; | |
| }); | |
| /** | |
| * Unproject the cursor on the 3D object surface | |
| * @param {Vector2} cursor Cursor coordinates in NDC | |
| * @param {Camera} camera Virtual camera | |
| * @returns {Vector3} The point of intersection with the model, if exist, null otherwise | |
| */ | |
| __publicField(this, "unprojectOnObj", (cursor, camera) => { | |
| if (!this.scene) | |
| return null; | |
| const raycaster = new Raycaster(); | |
| raycaster.near = camera.near; | |
| raycaster.far = camera.far; | |
| raycaster.setFromCamera(cursor, camera); | |
| const intersect = raycaster.intersectObjects(this.scene.children, true); | |
| for (let i = 0; i < intersect.length; i++) { | |
| if (intersect[i].object.uuid != this._gizmos.uuid && intersect[i].face) { | |
| return intersect[i].point.clone(); | |
| } | |
| } | |
| return null; | |
| }); | |
| /** | |
| * Unproject the cursor on the trackball surface | |
| * @param {Camera} camera The virtual camera | |
| * @param {Number} cursorX Cursor horizontal coordinate on screen | |
| * @param {Number} cursorY Cursor vertical coordinate on screen | |
| * @param {HTMLElement} canvas The canvas where the renderer draws its output | |
| * @param {number} tbRadius The trackball radius | |
| * @returns {Vector3} The unprojected point on the trackball surface | |
| */ | |
| __publicField(this, "unprojectOnTbSurface", (camera, cursorX, cursorY, canvas, tbRadius) => { | |
| if (camera instanceof OrthographicCamera) { | |
| this._v2_1.copy(this.getCursorPosition(cursorX, cursorY, canvas)); | |
| this._v3_1.set(this._v2_1.x, this._v2_1.y, 0); | |
| const x2 = Math.pow(this._v2_1.x, 2); | |
| const y2 = Math.pow(this._v2_1.y, 2); | |
| const r2 = Math.pow(this._tbRadius, 2); | |
| if (x2 + y2 <= r2 * 0.5) { | |
| this._v3_1.setZ(Math.sqrt(r2 - (x2 + y2))); | |
| } else { | |
| this._v3_1.setZ(r2 * 0.5 / Math.sqrt(x2 + y2)); | |
| } | |
| return this._v3_1; | |
| } | |
| if (camera instanceof PerspectiveCamera) { | |
| this._v2_1.copy(this.getCursorNDC(cursorX, cursorY, canvas)); | |
| this._v3_1.set(this._v2_1.x, this._v2_1.y, -1); | |
| this._v3_1.applyMatrix4(camera.projectionMatrixInverse); | |
| const rayDir = this._v3_1.clone().normalize(); | |
| const cameraGizmoDistance = camera.position.distanceTo(this._gizmos.position); | |
| const radius2 = Math.pow(tbRadius, 2); | |
| const h = this._v3_1.z; | |
| const l = Math.sqrt(Math.pow(this._v3_1.x, 2) + Math.pow(this._v3_1.y, 2)); | |
| if (l == 0) { | |
| rayDir.set(this._v3_1.x, this._v3_1.y, tbRadius); | |
| return rayDir; | |
| } | |
| const m = h / l; | |
| const q = cameraGizmoDistance; | |
| let a = Math.pow(m, 2) + 1; | |
| let b = 2 * m * q; | |
| let c = Math.pow(q, 2) - radius2; | |
| let delta = Math.pow(b, 2) - 4 * a * c; | |
| if (delta >= 0) { | |
| this._v2_1.setX((-b - Math.sqrt(delta)) / (2 * a)); | |
| this._v2_1.setY(m * this._v2_1.x + q); | |
| const angle = MathUtils.RAD2DEG * this._v2_1.angle(); | |
| if (angle >= 45) { | |
| const rayLength2 = Math.sqrt(Math.pow(this._v2_1.x, 2) + Math.pow(cameraGizmoDistance - this._v2_1.y, 2)); | |
| rayDir.multiplyScalar(rayLength2); | |
| rayDir.z += cameraGizmoDistance; | |
| return rayDir; | |
| } | |
| } | |
| a = m; | |
| b = q; | |
| c = -radius2 * 0.5; | |
| delta = Math.pow(b, 2) - 4 * a * c; | |
| this._v2_1.setX((-b - Math.sqrt(delta)) / (2 * a)); | |
| this._v2_1.setY(m * this._v2_1.x + q); | |
| const rayLength = Math.sqrt(Math.pow(this._v2_1.x, 2) + Math.pow(cameraGizmoDistance - this._v2_1.y, 2)); | |
| rayDir.multiplyScalar(rayLength); | |
| rayDir.z += cameraGizmoDistance; | |
| return rayDir; | |
| } | |
| }); | |
| /** | |
| * Unproject the cursor on the plane passing through the center of the trackball orthogonal to the camera | |
| * @param {Camera} camera The virtual camera | |
| * @param {Number} cursorX Cursor horizontal coordinate on screen | |
| * @param {Number} cursorY Cursor vertical coordinate on screen | |
| * @param {HTMLElement} canvas The canvas where the renderer draws its output | |
| * @param {Boolean} initialDistance If initial distance between camera and gizmos should be used for calculations instead of current (Perspective only) | |
| * @returns {Vector3} The unprojected point on the trackball plane | |
| */ | |
| __publicField(this, "unprojectOnTbPlane", (camera, cursorX, cursorY, canvas, initialDistance = false) => { | |
| if (camera instanceof OrthographicCamera) { | |
| this._v2_1.copy(this.getCursorPosition(cursorX, cursorY, canvas)); | |
| this._v3_1.set(this._v2_1.x, this._v2_1.y, 0); | |
| return this._v3_1.clone(); | |
| } | |
| if (camera instanceof PerspectiveCamera) { | |
| this._v2_1.copy(this.getCursorNDC(cursorX, cursorY, canvas)); | |
| this._v3_1.set(this._v2_1.x, this._v2_1.y, -1); | |
| this._v3_1.applyMatrix4(camera.projectionMatrixInverse); | |
| const rayDir = this._v3_1.clone().normalize(); | |
| const h = this._v3_1.z; | |
| const l = Math.sqrt(Math.pow(this._v3_1.x, 2) + Math.pow(this._v3_1.y, 2)); | |
| let cameraGizmoDistance; | |
| if (initialDistance) { | |
| cameraGizmoDistance = this._v3_1.setFromMatrixPosition(this._cameraMatrixState0).distanceTo(this._v3_2.setFromMatrixPosition(this._gizmoMatrixState0)); | |
| } else { | |
| cameraGizmoDistance = camera.position.distanceTo(this._gizmos.position); | |
| } | |
| if (l == 0) { | |
| rayDir.set(0, 0, 0); | |
| return rayDir; | |
| } | |
| const m = h / l; | |
| const q = cameraGizmoDistance; | |
| const x = -q / m; | |
| const rayLength = Math.sqrt(Math.pow(q, 2) + Math.pow(x, 2)); | |
| rayDir.multiplyScalar(rayLength); | |
| rayDir.z = 0; | |
| return rayDir; | |
| } | |
| }); | |
| /** | |
| * Update camera and gizmos state | |
| */ | |
| __publicField(this, "updateMatrixState", () => { | |
| if (!this.camera) | |
| return; | |
| this._cameraMatrixState.copy(this.camera.matrix); | |
| this._gizmoMatrixState.copy(this._gizmos.matrix); | |
| if (this.camera instanceof OrthographicCamera) { | |
| this._cameraProjectionState.copy(this.camera.projectionMatrix); | |
| this.camera.updateProjectionMatrix(); | |
| this._zoomState = this.camera.zoom; | |
| } | |
| if (this.camera instanceof PerspectiveCamera) { | |
| this._fovState = this.camera.fov; | |
| } | |
| }); | |
| /** | |
| * Update the trackball FSA | |
| * @param {STATE} newState New state of the FSA | |
| * @param {Boolean} updateMatrices If matriices state should be updated | |
| */ | |
| __publicField(this, "updateTbState", (newState, updateMatrices) => { | |
| this._state = newState; | |
| if (updateMatrices) { | |
| this.updateMatrixState(); | |
| } | |
| }); | |
| __publicField(this, "update", () => { | |
| const EPS = 1e-6; | |
| if (!this.target.equals(this._currentTarget) && this.camera) { | |
| this._gizmos.position.set(this.target.x, this.target.y, this.target.z); | |
| const tbRadius = this.calculateTbRadius(this.camera); | |
| if (tbRadius !== void 0) { | |
| this._tbRadius = tbRadius; | |
| } | |
| this.makeGizmos(this.target, this._tbRadius); | |
| this._currentTarget.copy(this.target); | |
| } | |
| if (!this.camera) | |
| return; | |
| if (this.camera instanceof OrthographicCamera) { | |
| if (this.camera.zoom > this.maxZoom || this.camera.zoom < this.minZoom) { | |
| const newZoom = MathUtils.clamp(this.camera.zoom, this.minZoom, this.maxZoom); | |
| this.applyTransformMatrix(this.applyScale(newZoom / this.camera.zoom, this._gizmos.position, true)); | |
| } | |
| } | |
| if (this.camera instanceof PerspectiveCamera) { | |
| const distance = this.camera.position.distanceTo(this._gizmos.position); | |
| if (distance > this.maxDistance + EPS || distance < this.minDistance - EPS) { | |
| const newDistance = MathUtils.clamp(distance, this.minDistance, this.maxDistance); | |
| this.applyTransformMatrix(this.applyScale(newDistance / distance, this._gizmos.position)); | |
| this.updateMatrixState(); | |
| } | |
| if (this.camera.fov < this.minFov || this.camera.fov > this.maxFov) { | |
| this.camera.fov = MathUtils.clamp(this.camera.fov, this.minFov, this.maxFov); | |
| this.camera.updateProjectionMatrix(); | |
| } | |
| const oldRadius = this._tbRadius; | |
| const tbRadius = this.calculateTbRadius(this.camera); | |
| if (tbRadius !== void 0) { | |
| this._tbRadius = tbRadius; | |
| } | |
| if (oldRadius < this._tbRadius - EPS || oldRadius > this._tbRadius + EPS) { | |
| const scale = (this._gizmos.scale.x + this._gizmos.scale.y + this._gizmos.scale.z) / 3; | |
| const newRadius = this._tbRadius / scale; | |
| const curve = new EllipseCurve(0, 0, newRadius, newRadius); | |
| const points = curve.getPoints(this._curvePts); | |
| const curveGeometry = new BufferGeometry().setFromPoints(points); | |
| for (const gizmo in this._gizmos.children) { | |
| const child = this._gizmos.children[gizmo]; | |
| child.geometry = curveGeometry; | |
| } | |
| } | |
| } | |
| this.camera.lookAt(this._gizmos.position); | |
| }); | |
| __publicField(this, "setStateFromJSON", (json) => { | |
| const state = JSON.parse(json); | |
| if (state.arcballState && this.camera) { | |
| this._cameraMatrixState.fromArray(state.arcballState.cameraMatrix.elements); | |
| this._cameraMatrixState.decompose(this.camera.position, this.camera.quaternion, this.camera.scale); | |
| this.camera.up.copy(state.arcballState.cameraUp); | |
| this.camera.near = state.arcballState.cameraNear; | |
| this.camera.far = state.arcballState.cameraFar; | |
| this.camera.zoom = state.arcballState.cameraZoom; | |
| if (this.camera instanceof PerspectiveCamera) { | |
| this.camera.fov = state.arcballState.cameraFov; | |
| } | |
| this._gizmoMatrixState.fromArray(state.arcballState.gizmoMatrix.elements); | |
| this._gizmoMatrixState.decompose(this._gizmos.position, this._gizmos.quaternion, this._gizmos.scale); | |
| this.camera.updateMatrix(); | |
| this.camera.updateProjectionMatrix(); | |
| this._gizmos.updateMatrix(); | |
| const tbRadius = this.calculateTbRadius(this.camera); | |
| if (tbRadius !== void 0) { | |
| this._tbRadius = tbRadius; | |
| } | |
| const gizmoTmp = new Matrix4().copy(this._gizmoMatrixState0); | |
| this.makeGizmos(this._gizmos.position, this._tbRadius); | |
| this._gizmoMatrixState0.copy(gizmoTmp); | |
| this.camera.lookAt(this._gizmos.position); | |
| this.updateTbState(STATE.IDLE, false); | |
| this.dispatchEvent(_changeEvent); | |
| } | |
| }); | |
| this.camera = null; | |
| this.domElement = domElement; | |
| this.scene = scene; | |
| this.mouseActions = []; | |
| this._mouseOp = null; | |
| this._v2_1 = new Vector2(); | |
| this._v3_1 = new Vector3(); | |
| this._v3_2 = new Vector3(); | |
| this._m4_1 = new Matrix4(); | |
| this._m4_2 = new Matrix4(); | |
| this._quat = new Quaternion(); | |
| this._translationMatrix = new Matrix4(); | |
| this._rotationMatrix = new Matrix4(); | |
| this._scaleMatrix = new Matrix4(); | |
| this._rotationAxis = new Vector3(); | |
| this._cameraMatrixState = new Matrix4(); | |
| this._cameraProjectionState = new Matrix4(); | |
| this._fovState = 1; | |
| this._upState = new Vector3(); | |
| this._zoomState = 1; | |
| this._nearPos = 0; | |
| this._farPos = 0; | |
| this._gizmoMatrixState = new Matrix4(); | |
| this._up0 = new Vector3(); | |
| this._zoom0 = 1; | |
| this._fov0 = 0; | |
| this._initialNear = 0; | |
| this._nearPos0 = 0; | |
| this._initialFar = 0; | |
| this._farPos0 = 0; | |
| this._cameraMatrixState0 = new Matrix4(); | |
| this._gizmoMatrixState0 = new Matrix4(); | |
| this._button = -1; | |
| this._touchStart = []; | |
| this._touchCurrent = []; | |
| this._input = INPUT.NONE; | |
| this._switchSensibility = 32; | |
| this._startFingerDistance = 0; | |
| this._currentFingerDistance = 0; | |
| this._startFingerRotation = 0; | |
| this._currentFingerRotation = 0; | |
| this._devPxRatio = 0; | |
| this._downValid = true; | |
| this._nclicks = 0; | |
| this._downEvents = []; | |
| this._clickStart = 0; | |
| this._maxDownTime = 250; | |
| this._maxInterval = 300; | |
| this._posThreshold = 24; | |
| this._movementThreshold = 24; | |
| this._currentCursorPosition = new Vector3(); | |
| this._startCursorPosition = new Vector3(); | |
| this._grid = null; | |
| this._gridPosition = new Vector3(); | |
| this._gizmos = new Group(); | |
| this._curvePts = 128; | |
| this._timeStart = -1; | |
| this._animationId = -1; | |
| this.focusAnimationTime = 500; | |
| this._timePrev = 0; | |
| this._timeCurrent = 0; | |
| this._anglePrev = 0; | |
| this._angleCurrent = 0; | |
| this._cursorPosPrev = new Vector3(); | |
| this._cursorPosCurr = new Vector3(); | |
| this._wPrev = 0; | |
| this._wCurr = 0; | |
| this.adjustNearFar = false; | |
| this.scaleFactor = 1.1; | |
| this.dampingFactor = 25; | |
| this.wMax = 20; | |
| this.enableAnimations = true; | |
| this.enableGrid = false; | |
| this.cursorZoom = false; | |
| this.minFov = 5; | |
| this.maxFov = 90; | |
| this.enabled = true; | |
| this.enablePan = true; | |
| this.enableRotate = true; | |
| this.enableZoom = true; | |
| this.minDistance = 0; | |
| this.maxDistance = Infinity; | |
| this.minZoom = 0; | |
| this.maxZoom = Infinity; | |
| this.target = new Vector3(0, 0, 0); | |
| this._currentTarget = new Vector3(0, 0, 0); | |
| this._tbRadius = 1; | |
| this._state = STATE.IDLE; | |
| this.setCamera(camera); | |
| if (this.scene) { | |
| this.scene.add(this._gizmos); | |
| } | |
| this._devPxRatio = window.devicePixelRatio; | |
| this.initializeMouseActions(); | |
| if (this.domElement) | |
| this.connect(this.domElement); | |
| window.addEventListener("resize", this.onWindowResize); | |
| } | |
| /** | |
| * Apply a transformation matrix, to the camera and gizmos | |
| * @param {Object} transformation Object containing matrices to apply to camera and gizmos | |
| */ | |
| applyTransformMatrix(transformation) { | |
| if ((transformation == null ? void 0 : transformation.camera) && this.camera) { | |
| this._m4_1.copy(this._cameraMatrixState).premultiply(transformation.camera); | |
| this._m4_1.decompose(this.camera.position, this.camera.quaternion, this.camera.scale); | |
| this.camera.updateMatrix(); | |
| if (this._state == STATE.ROTATE || this._state == STATE.ZROTATE || this._state == STATE.ANIMATION_ROTATE) { | |
| this.camera.up.copy(this._upState).applyQuaternion(this.camera.quaternion); | |
| } | |
| } | |
| if (transformation == null ? void 0 : transformation.gizmos) { | |
| this._m4_1.copy(this._gizmoMatrixState).premultiply(transformation.gizmos); | |
| this._m4_1.decompose(this._gizmos.position, this._gizmos.quaternion, this._gizmos.scale); | |
| this._gizmos.updateMatrix(); | |
| } | |
| if ((this._state == STATE.SCALE || this._state == STATE.FOCUS || this._state == STATE.ANIMATION_FOCUS) && this.camera) { | |
| const tbRadius = this.calculateTbRadius(this.camera); | |
| if (tbRadius !== void 0) { | |
| this._tbRadius = tbRadius; | |
| } | |
| if (this.adjustNearFar) { | |
| const cameraDistance = this.camera.position.distanceTo(this._gizmos.position); | |
| const bb = new Box3(); | |
| bb.setFromObject(this._gizmos); | |
| const sphere = new Sphere(); | |
| bb.getBoundingSphere(sphere); | |
| const adjustedNearPosition = Math.max(this._nearPos0, sphere.radius + sphere.center.length()); | |
| const regularNearPosition = cameraDistance - this._initialNear; | |
| const minNearPos = Math.min(adjustedNearPosition, regularNearPosition); | |
| this.camera.near = cameraDistance - minNearPos; | |
| const adjustedFarPosition = Math.min(this._farPos0, -sphere.radius + sphere.center.length()); | |
| const regularFarPosition = cameraDistance - this._initialFar; | |
| const minFarPos = Math.min(adjustedFarPosition, regularFarPosition); | |
| this.camera.far = cameraDistance - minFarPos; | |
| this.camera.updateProjectionMatrix(); | |
| } else { | |
| let update = false; | |
| if (this.camera.near != this._initialNear) { | |
| this.camera.near = this._initialNear; | |
| update = true; | |
| } | |
| if (this.camera.far != this._initialFar) { | |
| this.camera.far = this._initialFar; | |
| update = true; | |
| } | |
| if (update) { | |
| this.camera.updateProjectionMatrix(); | |
| } | |
| } | |
| } | |
| } | |
| /** | |
| * Set gizmos visibility | |
| * @param {Boolean} value Value of gizmos visibility | |
| */ | |
| setGizmosVisible(value) { | |
| this._gizmos.visible = value; | |
| this.dispatchEvent(_changeEvent); | |
| } | |
| /** | |
| * Set values in transformation object | |
| * @param {Matrix4} camera Transformation to be applied to the camera | |
| * @param {Matrix4} gizmos Transformation to be applied to gizmos | |
| */ | |
| setTransformationMatrices(camera = null, gizmos = null) { | |
| if (camera) { | |
| if (_transformation.camera) { | |
| _transformation.camera.copy(camera); | |
| } else { | |
| _transformation.camera = camera.clone(); | |
| } | |
| } else { | |
| _transformation.camera = null; | |
| } | |
| if (gizmos) { | |
| if (_transformation.gizmos) { | |
| _transformation.gizmos.copy(gizmos); | |
| } else { | |
| _transformation.gizmos = gizmos.clone(); | |
| } | |
| } else { | |
| _transformation.gizmos = null; | |
| } | |
| } | |
| } | |
| export { | |
| ArcballControls | |
| }; | |
| //# sourceMappingURL=ArcballControls.js.map | |
Xet Storage Details
- Size:
- 86.7 kB
- Xet hash:
- 7ebc3ec5240cf6632f697379288b9dd0c56d34dbfca9b0e51119abd8024c5cd7
·
Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.