three-stdlib
Version:
stand-alone library of threejs examples
1,174 lines (1,173 loc) • 86.7 kB
JavaScript
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);