@luxonis/visualizer-protobuf 2.22.0 → 2.23.0

package/dist/{index-DzyYicoH.js → index-DMmaMUCD.js}

@@ -3,7 +3,7 @@ import React__default, { useReducer, useRef, useCallback, useLayoutEffect, Compo
 import ReactDOM__default from 'react-dom';
 import { S as isSymbol, U as toString, V as keys, W as getSymbols$1, X as stubArray, Y as arrayPush, Z as baseGetAllKeys, g as getTag, $ as getAllKeys, k as baseGet, c as baseIteratee, j as castPath, t as toKey, a0 as arrayMap$1, a1 as baseUniq, b as baseFlatten, a2 as useMustNotChange, a3 as useCurrentLayoutActions, a4 as useCurrentLayoutSelector, r as reportError, A as AppError, L as Logger, u as useGuaranteedContext, a5 as usePanelMosaicId, a6 as useSelectedPanels, a7 as PANEL_TITLE_CONFIG_KEY, a8 as noop$4, o as getPanelTypeFromId, M as useShallowMemo, T as TAB_PANEL_TYPE, J as filterMap, d as dist$3, a9 as useAppConfiguration, aa as useValueChangedDebugLog, ab as useJsonTreeTheme } from './tslib.es6-C73eoP_E.js';
 import { createStore, useStore } from 'zustand';
-import { g as generateUtilityClass, c as createAggregator, f as flatRest, b as baseSet, A as AnalyticsContext, P as PropTypes, E as ErrorDisplay, S as Stack$1, m as makeStyles$1, _ as _extends$1, W as WorkspaceContext, u as useAnalytics, a as AppEvent, L as LeftSidebarItemKeys, R as RightSidebarItemKeys, d as useTranslation, e as usePanelCatalog, h as EmptyState, i as isEmpty, j as PanelContext, k as PanelCatalogContext, l as usePanelStateStore, n as useDefaultPanelTitle, o as useWorkspaceStore, p as WorkspaceStoreSelectors, q as difference, r as usePanelContext, s as useMessagePipeline, v as v4, t as useHoverValue, w as useSetHoverValue, x as useClearHoverValue, y as useMessagePipelineGetter, z as usePanelSettingsTreeUpdate, B as PlayerCapabilities, C as assertNever, D as PlayerPresence, F as isEqual, G as isDesktopApp, H as createTheme, I as propTypesExports } from './index-Dcus_L6F.js';
+import { g as generateUtilityClass, c as createAggregator, f as flatRest, b as baseSet, A as AnalyticsContext, P as PropTypes, E as ErrorDisplay, S as Stack$1, m as makeStyles$1, _ as _extends$1, W as WorkspaceContext, u as useAnalytics, a as AppEvent, L as LeftSidebarItemKeys, R as RightSidebarItemKeys, d as useTranslation, e as usePanelCatalog, h as EmptyState, i as isEmpty, j as PanelContext, k as PanelCatalogContext, l as usePanelStateStore, n as useDefaultPanelTitle, o as useWorkspaceStore, p as WorkspaceStoreSelectors, q as difference, r as usePanelContext, s as useMessagePipeline, v as v4, t as useHoverValue, w as useSetHoverValue, x as useClearHoverValue, y as useMessagePipelineGetter, z as usePanelSettingsTreeUpdate, B as PlayerCapabilities, C as assertNever, D as PlayerPresence, F as isEqual, G as isDesktopApp, H as createTheme, I as propTypesExports } from './index-DWgnF3_o.js';
 import { MosaicDragType, MosaicContext, MosaicWindowContext, getOtherBranch, getNodeAtPath } from 'react-mosaic-component';
 import { t as typescript } from './useMessageReducer-jNx5e6JW.js';
 import { g as getDefaultExportFromCjs, c as commonjsGlobal, a as getAugmentedNamespace } from './_commonjsHelpers-E-ZsRS8r.js';
@@ -17,15 +17,15 @@ import MoreVertIcon from '@mui/icons-material/MoreVert';
 import CancelIcon from '@mui/icons-material/Cancel';
 import SearchIcon from '@mui/icons-material/Search';
 import { useDrag, useDrop } from 'react-dnd';
-import { B as Box3, V as Vector3, I as InstancedBufferGeometry, F as Float32BufferAttribute, a as InstancedInterleavedBuffer, b as InterleavedBufferAttribute, W as WireframeGeometry, S as Sphere, U as UniformsLib, c as Vector2, e as ShaderLib, f as UniformsUtils, g as ShaderMaterial, h as Vector4, M as Matrix4, L as Line3, i as Mesh, j as MathUtils, O as Object3D, C as Color, r as rgbToThreeColor, s as stringToRgba, m as makeRgba, k as MeshStandardMaterial, R as ReplaceStencilOp, N as NotEqualStencilFunc, D as DoubleSide, P as PointsMaterial, l as rgbaToCssString, n as colorModeSettingsFields, o as autoSelectColorSettings, p as PlaneGeometry, q as DataTexture, t as UVMapping, u as ClampToEdgeWrapping, v as NearestFilter, w as LinearFilter, x as FS_SRGB_TO_LINEAR, y as SRGBColorSpace, z as LinearSRGBColorSpace, A as rgbaToLinear, E as RedFormat, G as RGBAFormat, H as getColorConverter, J as FloatType, K as UnsignedByteType, Q as NEEDS_MIN_MAX$1, T as InstancedMesh, X as CylinderGeometry, Y as ConeGeometry, Z as DataTextureLoader, _ as LinearMipmapLinearFilter, $ as Loader, a0 as LoaderUtils, a1 as FileLoader, a2 as MeshBasicMaterial, a3 as Scene, a4 as TextureLoader, a5 as AnimationClip, a6 as VectorKeyframeTrack, a7 as QuaternionKeyframeTrack, a8 as MeshLambertMaterial, a9 as MeshPhongMaterial, aa as FrontSide, ab as PerspectiveCamera, ac as OrthographicCamera, ad as AmbientLight, ae as SpotLight, af as PointLight, ag as DirectionalLight, ah as BufferGeometry, ai as Group, aj as Quaternion, ak as Bone, al as LineBasicMaterial, am as SkinnedMesh, an as Line, ao as LineSegments, ap as RepeatWrapping, aq as Skeleton, ar as BufferAttribute, as as TrianglesDrawMode, at as TriangleFanDrawMode, au as TriangleStripDrawMode, av as MeshPhysicalMaterial, aw as ImageBitmapLoader, ax as InterleavedBuffer, ay as Material, az as PropertyBinding, aA as LineLoop, aB as Points, aC as InterpolateLinear, aD as ColorManagement, aE as NearestMipmapNearestFilter, aF as LinearMipmapNearestFilter, aG as NearestMipmapLinearFilter, aH as MirroredRepeatWrapping, aI as InterpolateDiscrete, aJ as Texture, aK as NumberKeyframeTrack, aL as Interpolant, aM as EdgesGeometry, aN as LoadingManager, aO as stringToRgb, aP as getLuminance, aQ as Euler, aR as vec3TupleApproxEquals, aS as decodeCompressedImageToBitmap, aT as CanvasTexture, aU as Shape, aV as SRGBToLinear, aW as ShapeGeometry, aX as DynamicDrawUsage, aY as ShaderChunk, aZ as IMAGE_DEFAULT_COLOR_MODE_SETTINGS, a_ as colorHasTransparency, a$ as StaticDrawUsage, b0 as RawShaderMaterial, b1 as GLSL3, b2 as colorFieldComputedPrefix, b3 as getRotationTo, b4 as SphereGeometry, b5 as rgbaGradient, b6 as InstancedBufferAttribute, b7 as BoxGeometry, b8 as DARK_OUTLINE, b9 as LIGHT_OUTLINE, ba as CircleGeometry, bb as LineDashedMaterial, bc as GreaterDepth, bd as EventDispatcher, be as Plane, bf as Raycaster, bg as WebGLRenderTarget, bh as Ray, bi as MOUSE, bj as TOUCH, bk as Spherical, bl as WebGLRenderer, bm as NoToneMapping, bn as VSMShadowMap, bo as HemisphereLight } from './decodeImage-C8kB6T3V.js';
+import { B as Box3, V as Vector3, I as InstancedBufferGeometry, F as Float32BufferAttribute, a as InstancedInterleavedBuffer, b as InterleavedBufferAttribute, W as WireframeGeometry, S as Sphere, U as UniformsLib, c as Vector2, e as ShaderLib, f as UniformsUtils, g as ShaderMaterial, h as Vector4, M as Matrix4, L as Line3, i as Mesh, j as MathUtils, O as Object3D, C as Color, r as rgbToThreeColor, s as stringToRgba, m as makeRgba, k as MeshStandardMaterial, R as ReplaceStencilOp, N as NotEqualStencilFunc, D as DoubleSide, P as PointsMaterial, l as rgbaToCssString, n as colorModeSettingsFields, o as autoSelectColorSettings, p as PlaneGeometry, q as DataTexture, t as UVMapping, u as ClampToEdgeWrapping, v as NearestFilter, w as LinearFilter, x as FS_SRGB_TO_LINEAR, y as SRGBColorSpace, z as LinearSRGBColorSpace, A as rgbaToLinear, E as RedFormat, G as RGBAFormat, H as getColorConverter, J as FloatType, K as UnsignedByteType, Q as NEEDS_MIN_MAX$1, T as InstancedMesh, X as CylinderGeometry, Y as ConeGeometry, Z as DataTextureLoader, _ as LinearMipmapLinearFilter, $ as Loader, a0 as LoaderUtils, a1 as FileLoader, a2 as MeshBasicMaterial, a3 as Scene, a4 as TextureLoader, a5 as AnimationClip, a6 as VectorKeyframeTrack, a7 as QuaternionKeyframeTrack, a8 as MeshLambertMaterial, a9 as MeshPhongMaterial, aa as FrontSide, ab as PerspectiveCamera, ac as OrthographicCamera, ad as AmbientLight, ae as SpotLight, af as PointLight, ag as DirectionalLight, ah as BufferGeometry, ai as Group, aj as Quaternion, ak as Bone, al as LineBasicMaterial, am as SkinnedMesh, an as Line, ao as LineSegments, ap as RepeatWrapping, aq as Skeleton, ar as BufferAttribute, as as TrianglesDrawMode, at as TriangleFanDrawMode, au as TriangleStripDrawMode, av as MeshPhysicalMaterial, aw as ImageBitmapLoader, ax as InterleavedBuffer, ay as Material, az as PropertyBinding, aA as LineLoop, aB as Points, aC as InterpolateLinear, aD as ColorManagement, aE as NearestMipmapNearestFilter, aF as LinearMipmapNearestFilter, aG as NearestMipmapLinearFilter, aH as MirroredRepeatWrapping, aI as InterpolateDiscrete, aJ as Texture, aK as NumberKeyframeTrack, aL as Interpolant, aM as EdgesGeometry, aN as LoadingManager, aO as stringToRgb, aP as getLuminance, aQ as Euler, aR as vec3TupleApproxEquals, aS as decodeCompressedImageToBitmap, aT as CanvasTexture, aU as Shape, aV as SRGBToLinear, aW as ShapeGeometry, aX as DynamicDrawUsage, aY as ShaderChunk, aZ as IMAGE_DEFAULT_COLOR_MODE_SETTINGS, a_ as colorHasTransparency, a$ as StaticDrawUsage, b0 as RawShaderMaterial, b1 as GLSL3, b2 as colorFieldComputedPrefix, b3 as getRotationTo, b4 as SphereGeometry, b5 as rgbaGradient, b6 as InstancedBufferAttribute, b7 as BoxGeometry, b8 as DARK_OUTLINE, b9 as LIGHT_OUTLINE, ba as CircleGeometry, bb as LineDashedMaterial, bc as GreaterDepth, bd as EventDispatcher$1, be as Plane, bf as Raycaster, bg as WebGLRenderTarget, bh as THREE$1, bi as Spherical, bj as WebGLRenderer, bk as NoToneMapping, bl as VSMShadowMap, bm as HemisphereLight } from './decodeImage-CxUhz2gE.js';
 import { CacheProvider } from '@emotion/react';
 import '@mui/material/styles/createTypography';
 import { E as EventEmitter } from './FoxgloveServer-C39Uooyk.js';
 import require$$1$3 from 'color';
 import require$$2$1 from 'lodash.curry';
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
-import './utils-Cmsz3FxA.js';
 import './comlink-DHMAu6X7.js';
+import './utils-Hzt3wxhG.js';
 import './foxglove-protocol-CYoMweAY.js';
 import 'react-dnd-html5-backend';
 import 'object-assign';
@@ -12404,10 +12404,10 @@ const _line = new Line3();
 const _closestPoint = new Vector3();
 
 const _box = new Box3();
-const _sphere = new Sphere();
+const _sphere$1 = new Sphere();
 const _clipToWorldVector = new Vector4();
 
-let _ray$1, _lineWidth;
+let _ray, _lineWidth;
 
 // Returns the margin required to expand by in world space given the distance from the camera,
 // line width, resolution, and camera projection
@@ -12445,7 +12445,7 @@ function raycastWorldUnits( lineSegments, intersects ) {
 		const pointOnLine = new Vector3();
 		const point = new Vector3();
 
-		_ray$1.distanceSqToSegment( _line.start, _line.end, point, pointOnLine );
+		_ray.distanceSqToSegment( _line.start, _line.end, point, pointOnLine );
 		const isInside = point.distanceTo( pointOnLine ) < _lineWidth * 0.5;
 
 		if ( isInside ) {
@@ -12453,7 +12453,7 @@ function raycastWorldUnits( lineSegments, intersects ) {
 			intersects.push( {
 				point,
 				pointOnLine,
-				distance: _ray$1.origin.distanceTo( point ),
+				distance: _ray.origin.distanceTo( point ),
 				object: lineSegments,
 				face: null,
 				faceIndex: i,
@@ -12486,7 +12486,7 @@ function raycastScreenSpace( lineSegments, camera, intersects ) {
 	// pick a point 1 unit out along the ray to avoid the ray origin
 	// sitting at the camera origin which will cause "w" to be 0 when
 	// applying the projection matrix.
-	_ray$1.at( 1, _ssOrigin );
+	_ray.at( 1, _ssOrigin );
 
 	// ndc space [ - 1.0, 1.0 ]
 	_ssOrigin.w = 1;
@@ -12581,12 +12581,12 @@ function raycastScreenSpace( lineSegments, camera, intersects ) {
 			const pointOnLine = new Vector3();
 			const point = new Vector3();
 
-			_ray$1.distanceSqToSegment( _line.start, _line.end, point, pointOnLine );
+			_ray.distanceSqToSegment( _line.start, _line.end, point, pointOnLine );
 
 			intersects.push( {
 				point: point,
 				pointOnLine: pointOnLine,
-				distance: _ray$1.origin.distanceTo( point ),
+				distance: _ray.origin.distanceTo( point ),
 				object: lineSegments,
 				face: null,
 				faceIndex: i,
@@ -12654,7 +12654,7 @@ class LineSegments2 extends Mesh {
 
 		const threshold = ( raycaster.params.Line2 !== undefined ) ? raycaster.params.Line2.threshold || 0 : 0;
 
-		_ray$1 = raycaster.ray;
+		_ray = raycaster.ray;
 
 		const matrixWorld = this.matrixWorld;
 		const geometry = this.geometry;
@@ -12669,7 +12669,7 @@ class LineSegments2 extends Mesh {
 
 		}
 
-		_sphere.copy( geometry.boundingSphere ).applyMatrix4( matrixWorld );
+		_sphere$1.copy( geometry.boundingSphere ).applyMatrix4( matrixWorld );
 
 		// increase the sphere bounds by the worst case line screen space width
 		let sphereMargin;
@@ -12679,14 +12679,14 @@ class LineSegments2 extends Mesh {
 
 		} else {
 
-			const distanceToSphere = Math.max( camera.near, _sphere.distanceToPoint( _ray$1.origin ) );
+			const distanceToSphere = Math.max( camera.near, _sphere$1.distanceToPoint( _ray.origin ) );
 			sphereMargin = getWorldSpaceHalfWidth( camera, distanceToSphere, material.resolution );
 
 		}
 
-		_sphere.radius += sphereMargin;
+		_sphere$1.radius += sphereMargin;
 
-		if ( _ray$1.intersectsSphere( _sphere ) === false ) {
+		if ( _ray.intersectsSphere( _sphere$1 ) === false ) {
 
 			return;
 
@@ -12709,14 +12709,14 @@ class LineSegments2 extends Mesh {
 
 		} else {
 
-			const distanceToBox = Math.max( camera.near, _box.distanceToPoint( _ray$1.origin ) );
+			const distanceToBox = Math.max( camera.near, _box.distanceToPoint( _ray.origin ) );
 			boxMargin = getWorldSpaceHalfWidth( camera, distanceToBox, material.resolution );
 
 		}
 
 		_box.expandByScalar( boxMargin );
 
-		if ( _ray$1.intersectsBox( _box ) === false ) {
+		if ( _ray.intersectsBox( _box ) === false ) {
 
 			return;
 
@@ -14143,7 +14143,7 @@ function multiplyScalar(vec, scalar) {
  * @module glMatrix
  */
 // Configuration Constants
-var EPSILON = 0.000001;
+var EPSILON$1 = 0.000001;
 var ARRAY_TYPE = typeof Float32Array !== 'undefined' ? Float32Array : Array;
 if (!Math.hypot) Math.hypot = function () {
   var y = 0,
@@ -14883,7 +14883,7 @@ function slerp(out, a, b, t) {
   } // calculate coefficients
 
 
-  if (1.0 - cosom > EPSILON) {
+  if (1.0 - cosom > EPSILON$1) {
     // standard case (slerp)
     omega = Math.acos(cosom);
     sinom = Math.sin(omega);
@@ -15352,7 +15352,7 @@ function interpolate(start, end, fraction) {
 const MAX_DURATION = 4_294_967_295n * BigInt(1e9);
 // Number of transforms evicted is this * max capacity
 const MAX_CAPACITY_EVICT_PORTION = 0.25;
-const DEG2RAD$1 = Math.PI / 180;
+const DEG2RAD$2 = Math.PI / 180;
 const tempLower$1 = [0n, Transform.Identity()];
 const tempUpper$1 = [0n, Transform.Identity()];
 const tempVec4 = [0, 0, 0, 0];
@@ -15812,9 +15812,9 @@ function copyPose(out, pose) {
 // Compute a quaternion from XYZ Euler angles in degrees. This method is adapted
 // from THREE.js Quaternionr#setFromEuler()
 function quaternionFromEuler(out, euler) {
-  const x = euler[0] * DEG2RAD$1;
-  const y = euler[1] * DEG2RAD$1;
-  const z = euler[2] * DEG2RAD$1;
+  const x = euler[0] * DEG2RAD$2;
+  const y = euler[1] * DEG2RAD$2;
+  const z = euler[2] * DEG2RAD$2;
   const c1 = Math.cos(x / 2);
   const c2 = Math.cos(y / 2);
   const c3 = Math.cos(z / 2);
@@ -30194,7 +30194,7 @@ const tempVecB = new Vector3();
 const tempLower = [0n, Transform.Identity()];
 const tempUpper = [0n, Transform.Identity()];
 const tempQuaternion$1 = new Quaternion();
-const tempEuler$3 = new Euler();
+const tempEuler$2 = new Euler();
 const tempTfPath = ["transforms", ""];
 class FrameAxes extends SceneExtension {
   static extensionId = "foxglove.FrameAxes";
@@ -30605,8 +30605,8 @@ function buildSettingsFields(frame, currentTime, config) {
       const q = transform.rotation();
       xyzValue = [round$1(p[0], 3), round$1(p[1], 3), round$1(p[2], 3)];
       tempQuaternion$1.set(q[0], q[1], q[2], q[3]);
-      tempEuler$3.setFromQuaternion(tempQuaternion$1, "XYZ");
-      rpyValue = [round$1(MathUtils.radToDeg(tempEuler$3.x), 3), round$1(MathUtils.radToDeg(tempEuler$3.y), 3), round$1(MathUtils.radToDeg(tempEuler$3.z), 3)];
+      tempEuler$2.setFromQuaternion(tempQuaternion$1, "XYZ");
+      rpyValue = [round$1(MathUtils.radToDeg(tempEuler$2.x), 3), round$1(MathUtils.radToDeg(tempEuler$2.y), 3), round$1(MathUtils.radToDeg(tempEuler$2.z), 3)];
     }
   }
   const fields = {
@@ -31477,7 +31477,7 @@ class WorkerImageDecoder {
   //#reusableBuffer: SharedArrayBuffer | null = null;
 
   constructor() {
-    this.#worker = new Worker(new URL("WorkerImageDecoder.worker-tkX9-IYo.js", import.meta.url), {
+    this.#worker = new Worker(new URL("WorkerImageDecoder.worker-C3ZBQ2Wk.js", import.meta.url), {
       type: "module"
     });
   }
@@ -39157,7 +39157,7 @@ function normalizePolygonStamped(polygon) {
   };
 }
 
-function clamp$1( value, min, max ) {
+function clamp$2( value, min, max ) {
 
 	return Math.max( min, Math.min( max, value ) );
 
@@ -39172,7 +39172,7 @@ const SHAFT_DIAMETER = 1.0;
 const HEAD_LENGTH = 0.23;
 const HEAD_DIAMETER = 2.0;
 const HEAD_LENGTH_PROPORTION = 0.23;
-const UNIT_X$2 = new Vector3(1, 0, 0);
+const UNIT_X$1 = new Vector3(1, 0, 0);
 const tempStart = new Vector3();
 const tempEnd = new Vector3();
 const tempDirection = new Vector3();
@@ -39244,7 +39244,7 @@ class RenderableArrow extends RenderableMarker {
       let headLength = HEAD_LENGTH_PROPORTION * distance;
       if (marker.scale.z !== 0) {
         const length = marker.scale.z;
-        headLength = clamp$1(length, 0, distance);
+        headLength = clamp$2(length, 0, distance);
       }
       const shaftLength = distance - headLength;
       const shaftDiameter = marker.scale.x;
@@ -39256,7 +39256,7 @@ class RenderableArrow extends RenderableMarker {
       this.shaftMesh.position.addScaledVector(tempDirection, 0.5 * (shaftLength / distance));
       this.headMesh.position.set(pointB.x, pointB.y, pointB.z);
       this.headMesh.position.addScaledVector(tempDirection, -0.5 * (headLength / distance));
-      const rotation = getRotationTo(UNIT_X$2, tempDirection);
+      const rotation = getRotationTo(UNIT_X$1, tempDirection);
       this.shaftMesh.setRotationFromQuaternion(rotation);
       this.headMesh.rotation.copy(this.shaftMesh.rotation);
     } else {
@@ -45874,7 +45874,7 @@ const PARAM_DISPLAY_NAME = "/robot_description (parameter)";
 const VALID_SRC_ERR = "ValidSrc";
 const FETCH_URDF_ERR = "FetchUrdf";
 const PARSE_URDF_ERR = "ParseUrdf";
-const DEG2RAD = Math.PI / 180;
+const DEG2RAD$1 = Math.PI / 180;
 const RAD2DEG = 180 / Math.PI;
 const DEFAULT_COLOR_STR = "#ffffff";
 const DEFAULT_COLOR = stringToRgba(makeRgba(), DEFAULT_COLOR_STR);
@@ -45913,7 +45913,7 @@ const tempVec3a = new Vector3();
 const tempVec3b = new Vector3();
 const tempQuaternion1 = new Quaternion();
 const tempQuaternion2 = new Quaternion();
-const tempEuler$2 = new Euler();
+const tempEuler$1 = new Euler();
 var EmbeddedMaterialUsage = /*#__PURE__*/function (EmbeddedMaterialUsage) {
   EmbeddedMaterialUsage[EmbeddedMaterialUsage["Use"] = 0] = "Use";
   EmbeddedMaterialUsage[EmbeddedMaterialUsage["Ignore"] = 1] = "Ignore";
@@ -46297,8 +46297,8 @@ class Urdfs extends SceneExtension {
       const axis = tempVec3a.set(joint.axis.x, joint.axis.y, joint.axis.z);
       if (isAngular) {
         const degrees = action.payload.value;
-        const quaternion = tempQuaternion1.setFromAxisAngle(axis, degrees * DEG2RAD);
-        const euler = tempEuler$2.setFromQuaternion(quaternion);
+        const quaternion = tempQuaternion1.setFromAxisAngle(axis, degrees * DEG2RAD$1);
+        const euler = tempEuler$1.setFromQuaternion(quaternion);
         frame.offsetEulerDegrees = [euler.x * RAD2DEG, euler.y * RAD2DEG, euler.z * RAD2DEG];
         this.saveSetting(["transforms", frameKey, "rpyCoefficient"], frame.offsetEulerDegrees);
       } else {
@@ -47169,8 +47169,8 @@ function urdfChildren(transforms, transformTree, jointStates) {
   return children;
 }
 function eulerDegreesToQuaternion(eulerDegrees) {
-  tempEuler$2.set(eulerDegrees[0] * DEG2RAD, eulerDegrees[1] * DEG2RAD, eulerDegrees[2] * DEG2RAD);
-  return tempQuaternion1.setFromEuler(tempEuler$2);
+  tempEuler$1.set(eulerDegrees[0] * DEG2RAD$1, eulerDegrees[1] * DEG2RAD$1, eulerDegrees[2] * DEG2RAD$1);
+  return tempQuaternion1.setFromEuler(tempEuler$1);
 }
 function signedDistanceAlongAxis(position, axis) {
   const p = tempVec3a.set(position[0], position[1], position[2]);
@@ -53136,7 +53136,7 @@ function distanceInRange(distance, min, max) {
     return distance >= min && distance <= max;
 }
 // Clamp a value in the range of [min..max]
-function clamp(value, min, max) {
+function clamp$1(value, min, max) {
     return value <= min ? min : value >= max ? max : value;
 }
 // Return the default [min, max] range of valid distances for a given hardware model
@@ -53241,7 +53241,7 @@ function computeIntensity(rawIntensity, rawDistance, corrections) {
     const maxIntensity = corrections.maxIntensity;
     const focalOffset = 256 * (1 - corrections.focalDistance / 13100) * (1 - corrections.focalDistance / 13100);
     const focalSlope = corrections.focalSlope;
-    return clamp(rawIntensity + focalSlope * Math.abs(focalOffset - 256 * sqr(1 - rawDistance / 65535)), minIntensity, maxIntensity);
+    return clamp$1(rawIntensity + focalSlope * Math.abs(focalOffset - 256 * sqr(1 - rawDistance / 65535)), minIntensity, maxIntensity);
 }
 
 (function (exports) {
@@ -53762,7 +53762,7 @@ class MeasurementTool extends SceneExtension {
 // License, v2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/
 
-const UNIT_X$1 = new Vector3(1, 0, 0);
+const UNIT_X = new Vector3(1, 0, 0);
 const tempVec3$2 = new Vector3();
 function makeArrowMarker(type) {
   return {
@@ -53942,7 +53942,7 @@ class PublishClickTool extends SceneExtension {
         this.#point2 = worldSpaceCursorCoords.clone();
         if (this.#point1 && this.publishClickType !== "point") {
           const p = this.#point1.clone();
-          const q = new Quaternion().setFromUnitVectors(UNIT_X$1, tempVec3$2.subVectors(this.#point2, this.#point1).normalize());
+          const q = new Quaternion().setFromUnitVectors(UNIT_X, tempVec3$2.subVectors(this.#point2, this.#point1).normalize());
           this.dispatchEvent({
             type: "foxglove.publish-submit",
             publishClickType: this.publishClickType,
@@ -53981,7 +53981,7 @@ class PublishClickTool extends SceneExtension {
         this.#arrow.visible = true;
         this.#arrow.position.copy(this.#point1);
         if (this.#point2) {
-          this.#arrow.quaternion.setFromUnitVectors(UNIT_X$1, tempVec3$2.subVectors(this.#point2, this.#point1).normalize());
+          this.#arrow.quaternion.setFromUnitVectors(UNIT_X, tempVec3$2.subVectors(this.#point2, this.#point1).normalize());
         } else {
           this.#arrow.quaternion.set(0, 0, 0, 1);
         }
@@ -55980,7 +55980,7 @@ const REPLACEMENT_CHARACTER = "\uFFFD";
  * Manages the creation of a Signed Distance Field (SDF) font atlas, and performs text layout to
  * generate attributes for rendering text using the atlas.
  */
-class FontManager extends EventDispatcher {
+class FontManager extends EventDispatcher$1 {
     options;
     alphabet = "";
     atlasData = {
@@ -56194,7 +56194,9 @@ out vec4 outColor;
 
 ${
                 // for LinearTosRGB()
-                ShaderChunk.colorspace_pars_fragment }
+                ShaderChunk.colorspace_pars_fragment ??
+                    // for backward compatibility with three@<154
+                    ShaderChunk.encodings_pars_fragment}
 
 // From https://github.com/Jam3/three-bmfont-text/blob/e17efbe4e9392a83d4c5ee35c67eca5a11a13395/shaders/sdf.js
 float aastep(float threshold, float value) {
@@ -56421,7 +56423,7 @@ class Label extends Object3D {
         this.pickingMaterial.uniforms.uScale.value = scale;
     }
 }
-class LabelPool extends EventDispatcher {
+class LabelPool extends EventDispatcher$1 {
     atlasTexture;
     availableLabels = [];
     disposed = false;
@@ -57439,1447 +57441,2607 @@ class SharedGeometry {
   }
 }
 
-// OrbitControls performs orbiting, dollying (zooming), and panning.
-// Unlike TrackballControls, it maintains the "up" direction object.up (+Y by default).
-//
-//    Orbit - left mouse / touch: one-finger move
-//    Zoom - middle mouse, or mousewheel / touch: two-finger spread or squish
-//    Pan - right mouse, or left mouse + ctrl/meta/shiftKey, or arrow keys / touch: two-finger move
-
-const _changeEvent = { type: 'change' };
-const _startEvent = { type: 'start' };
-const _endEvent = { type: 'end' };
-const _ray = new Ray();
-const _plane = new Plane();
-const TILT_LIMIT = Math.cos( 70 * MathUtils.DEG2RAD );
-
-class OrbitControls extends EventDispatcher {
-
-	constructor( object, domElement ) {
-
-		super();
-
-		this.object = object;
-		this.domElement = domElement;
-		this.domElement.style.touchAction = 'none'; // disable touch scroll
-
-		// Set to false to disable this control
-		this.enabled = true;
-
-		// "target" sets the location of focus, where the object orbits around
-		this.target = new Vector3();
-
-		// How far you can dolly in and out ( PerspectiveCamera only )
-		this.minDistance = 0;
-		this.maxDistance = Infinity;
-
-		// How far you can zoom in and out ( OrthographicCamera only )
-		this.minZoom = 0;
-		this.maxZoom = Infinity;
-
-		// How far you can orbit vertically, upper and lower limits.
-		// Range is 0 to Math.PI radians.
-		this.minPolarAngle = 0; // radians
-		this.maxPolarAngle = Math.PI; // radians
-
-		// How far you can orbit horizontally, upper and lower limits.
-		// If set, the interval [ min, max ] must be a sub-interval of [ - 2 PI, 2 PI ], with ( max - min < 2 PI )
-		this.minAzimuthAngle = - Infinity; // radians
-		this.maxAzimuthAngle = Infinity; // radians
-
-		// Set to true to enable damping (inertia)
-		// If damping is enabled, you must call controls.update() in your animation loop
-		this.enableDamping = false;
-		this.dampingFactor = 0.05;
-
-		// This option actually enables dollying in and out; left as "zoom" for backwards compatibility.
-		// Set to false to disable zooming
-		this.enableZoom = true;
-		this.zoomSpeed = 1.0;
-
-		// Set to false to disable rotating
-		this.enableRotate = true;
-		this.rotateSpeed = 1.0;
-
-		// Set to false to disable panning
-		this.enablePan = true;
-		this.panSpeed = 1.0;
-		this.screenSpacePanning = true; // if false, pan orthogonal to world-space direction camera.up
-		this.keyPanSpeed = 7.0;	// pixels moved per arrow key push
-		this.zoomToCursor = false;
-
-		// Set to true to automatically rotate around the target
-		// If auto-rotate is enabled, you must call controls.update() in your animation loop
-		this.autoRotate = false;
-		this.autoRotateSpeed = 2.0; // 30 seconds per orbit when fps is 60
+/*!
+ * camera-controls
+ * https://github.com/yomotsu/camera-controls
+ * (c) 2017 @yomotsu
+ * Released under the MIT License.
+ */
+// see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons#value
+const MOUSE_BUTTON = {
+    LEFT: 1,
+    RIGHT: 2,
+    MIDDLE: 4,
+};
+const ACTION = Object.freeze({
+    NONE: 0b0,
+    ROTATE: 0b1,
+    TRUCK: 0b10,
+    SCREEN_PAN: 0b100,
+    OFFSET: 0b1000,
+    DOLLY: 0b10000,
+    ZOOM: 0b100000,
+    TOUCH_ROTATE: 0b1000000,
+    TOUCH_TRUCK: 0b10000000,
+    TOUCH_SCREEN_PAN: 0b100000000,
+    TOUCH_OFFSET: 0b1000000000,
+    TOUCH_DOLLY: 0b10000000000,
+    TOUCH_ZOOM: 0b100000000000,
+    TOUCH_DOLLY_TRUCK: 0b1000000000000,
+    TOUCH_DOLLY_SCREEN_PAN: 0b10000000000000,
+    TOUCH_DOLLY_OFFSET: 0b100000000000000,
+    TOUCH_DOLLY_ROTATE: 0b1000000000000000,
+    TOUCH_ZOOM_TRUCK: 0b10000000000000000,
+    TOUCH_ZOOM_OFFSET: 0b100000000000000000,
+    TOUCH_ZOOM_SCREEN_PAN: 0b1000000000000000000,
+    TOUCH_ZOOM_ROTATE: 0b10000000000000000000,
+});
+const DOLLY_DIRECTION = {
+    NONE: 0,
+    IN: 1,
+    OUT: -1,
+};
+function isPerspectiveCamera(camera) {
+    return camera.isPerspectiveCamera;
+}
+function isOrthographicCamera(camera) {
+    return camera.isOrthographicCamera;
+}
 
-		// The four arrow keys
-		this.keys = { LEFT: 'ArrowLeft', UP: 'ArrowUp', RIGHT: 'ArrowRight', BOTTOM: 'ArrowDown' };
+const PI_2 = Math.PI * 2;
+const PI_HALF = Math.PI / 2;
 
-		// Mouse buttons
-		this.mouseButtons = { LEFT: MOUSE.ROTATE, MIDDLE: MOUSE.DOLLY, RIGHT: MOUSE.PAN };
+const EPSILON = 1e-5;
+const DEG2RAD = Math.PI / 180;
+function clamp(value, min, max) {
+    return Math.max(min, Math.min(max, value));
+}
+function approxZero(number, error = EPSILON) {
+    return Math.abs(number) < error;
+}
+function approxEquals(a, b, error = EPSILON) {
+    return approxZero(a - b, error);
+}
+function roundToStep(value, step) {
+    return Math.round(value / step) * step;
+}
+function infinityToMaxNumber(value) {
+    if (isFinite(value))
+        return value;
+    if (value < 0)
+        return -Number.MAX_VALUE;
+    return Number.MAX_VALUE;
+}
+function maxNumberToInfinity(value) {
+    if (Math.abs(value) < Number.MAX_VALUE)
+        return value;
+    return value * Infinity;
+}
+// https://docs.unity3d.com/ScriptReference/Mathf.SmoothDamp.html
+// https://github.com/Unity-Technologies/UnityCsReference/blob/a2bdfe9b3c4cd4476f44bf52f848063bfaf7b6b9/Runtime/Export/Math/Mathf.cs#L308
+function smoothDamp(current, target, currentVelocityRef, smoothTime, maxSpeed = Infinity, deltaTime) {
+    // Based on Game Programming Gems 4 Chapter 1.10
+    smoothTime = Math.max(0.0001, smoothTime);
+    const omega = 2 / smoothTime;
+    const x = omega * deltaTime;
+    const exp = 1 / (1 + x + 0.48 * x * x + 0.235 * x * x * x);
+    let change = current - target;
+    const originalTo = target;
+    // Clamp maximum speed
+    const maxChange = maxSpeed * smoothTime;
+    change = clamp(change, -maxChange, maxChange);
+    target = current - change;
+    const temp = (currentVelocityRef.value + omega * change) * deltaTime;
+    currentVelocityRef.value = (currentVelocityRef.value - omega * temp) * exp;
+    let output = target + (change + temp) * exp;
+    // Prevent overshooting
+    if (originalTo - current > 0.0 === output > originalTo) {
+        output = originalTo;
+        currentVelocityRef.value = (output - originalTo) / deltaTime;
+    }
+    return output;
+}
+// https://docs.unity3d.com/ScriptReference/Vector3.SmoothDamp.html
+// https://github.com/Unity-Technologies/UnityCsReference/blob/a2bdfe9b3c4cd4476f44bf52f848063bfaf7b6b9/Runtime/Export/Math/Vector3.cs#L97
+function smoothDampVec3(current, target, currentVelocityRef, smoothTime, maxSpeed = Infinity, deltaTime, out) {
+    // Based on Game Programming Gems 4 Chapter 1.10
+    smoothTime = Math.max(0.0001, smoothTime);
+    const omega = 2 / smoothTime;
+    const x = omega * deltaTime;
+    const exp = 1 / (1 + x + 0.48 * x * x + 0.235 * x * x * x);
+    let targetX = target.x;
+    let targetY = target.y;
+    let targetZ = target.z;
+    let changeX = current.x - targetX;
+    let changeY = current.y - targetY;
+    let changeZ = current.z - targetZ;
+    const originalToX = targetX;
+    const originalToY = targetY;
+    const originalToZ = targetZ;
+    // Clamp maximum speed
+    const maxChange = maxSpeed * smoothTime;
+    const maxChangeSq = maxChange * maxChange;
+    const magnitudeSq = changeX * changeX + changeY * changeY + changeZ * changeZ;
+    if (magnitudeSq > maxChangeSq) {
+        const magnitude = Math.sqrt(magnitudeSq);
+        changeX = changeX / magnitude * maxChange;
+        changeY = changeY / magnitude * maxChange;
+        changeZ = changeZ / magnitude * maxChange;
+    }
+    targetX = current.x - changeX;
+    targetY = current.y - changeY;
+    targetZ = current.z - changeZ;
+    const tempX = (currentVelocityRef.x + omega * changeX) * deltaTime;
+    const tempY = (currentVelocityRef.y + omega * changeY) * deltaTime;
+    const tempZ = (currentVelocityRef.z + omega * changeZ) * deltaTime;
+    currentVelocityRef.x = (currentVelocityRef.x - omega * tempX) * exp;
+    currentVelocityRef.y = (currentVelocityRef.y - omega * tempY) * exp;
+    currentVelocityRef.z = (currentVelocityRef.z - omega * tempZ) * exp;
+    out.x = targetX + (changeX + tempX) * exp;
+    out.y = targetY + (changeY + tempY) * exp;
+    out.z = targetZ + (changeZ + tempZ) * exp;
+    // Prevent overshooting
+    const origMinusCurrentX = originalToX - current.x;
+    const origMinusCurrentY = originalToY - current.y;
+    const origMinusCurrentZ = originalToZ - current.z;
+    const outMinusOrigX = out.x - originalToX;
+    const outMinusOrigY = out.y - originalToY;
+    const outMinusOrigZ = out.z - originalToZ;
+    if (origMinusCurrentX * outMinusOrigX + origMinusCurrentY * outMinusOrigY + origMinusCurrentZ * outMinusOrigZ > 0) {
+        out.x = originalToX;
+        out.y = originalToY;
+        out.z = originalToZ;
+        currentVelocityRef.x = (out.x - originalToX) / deltaTime;
+        currentVelocityRef.y = (out.y - originalToY) / deltaTime;
+        currentVelocityRef.z = (out.z - originalToZ) / deltaTime;
+    }
+    return out;
+}
 
-		// Touch fingers
-		this.touches = { ONE: TOUCH.ROTATE, TWO: TOUCH.DOLLY_PAN };
+function extractClientCoordFromEvent(pointers, out) {
+    out.set(0, 0);
+    pointers.forEach((pointer) => {
+        out.x += pointer.clientX;
+        out.y += pointer.clientY;
+    });
+    out.x /= pointers.length;
+    out.y /= pointers.length;
+}
 
-		// for reset
-		this.target0 = this.target.clone();
-		this.position0 = this.object.position.clone();
-		this.zoom0 = this.object.zoom;
+function notSupportedInOrthographicCamera(camera, message) {
+    if (isOrthographicCamera(camera)) {
+        console.warn(`${message} is not supported in OrthographicCamera`);
+        return true;
+    }
+    return false;
+}
 
-		// the target DOM element for key events
-		this._domElementKeyEvents = null;
+class EventDispatcher {
+    constructor() {
+        this._listeners = {};
+    }
+    /**
+     * Adds the specified event listener.
+     * @param type event name
+     * @param listener handler function
+     * @category Methods
+     */
+    addEventListener(type, listener) {
+        const listeners = this._listeners;
+        if (listeners[type] === undefined)
+            listeners[type] = [];
+        if (listeners[type].indexOf(listener) === -1)
+            listeners[type].push(listener);
+    }
+    /**
+     * Presence of the specified event listener.
+     * @param type event name
+     * @param listener handler function
+     * @category Methods
+     */
+    hasEventListener(type, listener) {
+        const listeners = this._listeners;
+        return listeners[type] !== undefined && listeners[type].indexOf(listener) !== -1;
+    }
+    /**
+     * Removes the specified event listener
+     * @param type event name
+     * @param listener handler function
+     * @category Methods
+     */
+    removeEventListener(type, listener) {
+        const listeners = this._listeners;
+        const listenerArray = listeners[type];
+        if (listenerArray !== undefined) {
+            const index = listenerArray.indexOf(listener);
+            if (index !== -1)
+                listenerArray.splice(index, 1);
+        }
+    }
+    /**
+     * Removes all event listeners
+     * @param type event name
+     * @category Methods
+     */
+    removeAllEventListeners(type) {
+        if (!type) {
+            this._listeners = {};
+            return;
+        }
+        if (Array.isArray(this._listeners[type]))
+            this._listeners[type].length = 0;
+    }
+    /**
+     * Fire an event type.
+     * @param event DispatcherEvent
+     * @category Methods
+     */
+    dispatchEvent(event) {
+        const listeners = this._listeners;
+        const listenerArray = listeners[event.type];
+        if (listenerArray !== undefined) {
+            event.target = this;
+            const array = listenerArray.slice(0);
+            for (let i = 0, l = array.length; i < l; i++) {
+                array[i].call(this, event);
+            }
+        }
+    }
+}
 
-		//
-		// public methods
-		//
+var _a;
+const VERSION = '2.10.0'; // will be replaced with `version` in package.json during the build process.
+const TOUCH_DOLLY_FACTOR = 1 / 8;
+const isMac = /Mac/.test((_a = globalThis === null || globalThis === void 0 ? void 0 : globalThis.navigator) === null || _a === void 0 ? void 0 : _a.platform);
+let THREE;
+let _ORIGIN;
+let _AXIS_Y;
+let _AXIS_Z;
+let _v2;
+let _v3A;
+let _v3B;
+let _v3C;
+let _cameraDirection;
+let _xColumn;
+let _yColumn;
+let _zColumn;
+let _deltaTarget;
+let _deltaOffset;
+let _sphericalA;
+let _sphericalB;
+let _box3A;
+let _box3B;
+let _sphere;
+let _quaternionA;
+let _quaternionB;
+let _rotationMatrix;
+let _raycaster;
+class CameraControls extends EventDispatcher {
+    /**
+     * Injects THREE as the dependency. You can then proceed to use CameraControls.
+     *
+     * e.g
+     * ```javascript
+     * CameraControls.install( { THREE: THREE } );
+     * ```
+     *
+     * Note: If you do not wish to use enter three.js to reduce file size(tree-shaking for example), make a subset to install.
+     *
+     * ```js
+     * import {
+     * 	Vector2,
+     * 	Vector3,
+     * 	Vector4,
+     * 	Quaternion,
+     * 	Matrix4,
+     * 	Spherical,
+     * 	Box3,
+     * 	Sphere,
+     * 	Raycaster,
+     * 	MathUtils,
+     * } from 'three';
+     *
+     * const subsetOfTHREE = {
+     * 	Vector2   : Vector2,
+     * 	Vector3   : Vector3,
+     * 	Vector4   : Vector4,
+     * 	Quaternion: Quaternion,
+     * 	Matrix4   : Matrix4,
+     * 	Spherical : Spherical,
+     * 	Box3      : Box3,
+     * 	Sphere    : Sphere,
+     * 	Raycaster : Raycaster,
+     * };
+
+     * CameraControls.install( { THREE: subsetOfTHREE } );
+     * ```
+     * @category Statics
+     */
+    static install(libs) {
+        THREE = libs.THREE;
+        _ORIGIN = Object.freeze(new THREE.Vector3(0, 0, 0));
+        _AXIS_Y = Object.freeze(new THREE.Vector3(0, 1, 0));
+        _AXIS_Z = Object.freeze(new THREE.Vector3(0, 0, 1));
+        _v2 = new THREE.Vector2();
+        _v3A = new THREE.Vector3();
+        _v3B = new THREE.Vector3();
+        _v3C = new THREE.Vector3();
+        _cameraDirection = new THREE.Vector3();
+        _xColumn = new THREE.Vector3();
+        _yColumn = new THREE.Vector3();
+        _zColumn = new THREE.Vector3();
+        _deltaTarget = new THREE.Vector3();
+        _deltaOffset = new THREE.Vector3();
+        _sphericalA = new THREE.Spherical();
+        _sphericalB = new THREE.Spherical();
+        _box3A = new THREE.Box3();
+        _box3B = new THREE.Box3();
+        _sphere = new THREE.Sphere();
+        _quaternionA = new THREE.Quaternion();
+        _quaternionB = new THREE.Quaternion();
+        _rotationMatrix = new THREE.Matrix4();
+        _raycaster = new THREE.Raycaster();
+    }
+    /**
+     * list all ACTIONs
+     * @category Statics
+     */
+    static get ACTION() {
+        return ACTION;
+    }
+    /**
+     * Creates a `CameraControls` instance.
+     *
+     * Note:
+     * You **must install** three.js before using camera-controls. see [#install](#install)
+     * Not doing so will lead to runtime errors (`undefined` references to THREE).
+     *
+     * e.g.
+     * ```
+     * CameraControls.install( { THREE } );
+     * const cameraControls = new CameraControls( camera, domElement );
+     * ```
+     *
+     * @param camera A `THREE.PerspectiveCamera` or `THREE.OrthographicCamera` to be controlled.
+     * @param domElement A `HTMLElement` for the draggable area, usually `renderer.domElement`.
+     * @category Constructor
+     */
+    constructor(camera, domElement) {
+        super();
+        /**
+         * Minimum vertical angle in radians.
+         * The angle has to be between `0` and `.maxPolarAngle` inclusive.
+         * The default value is `0`.
+         *
+         * e.g.
+         * ```
+         * cameraControls.maxPolarAngle = 0;
+         * ```
+         * @category Properties
+         */
+        this.minPolarAngle = 0; // radians
+        /**
+         * Maximum vertical angle in radians.
+         * The angle has to be between `.maxPolarAngle` and `Math.PI` inclusive.
+         * The default value is `Math.PI`.
+         *
+         * e.g.
+         * ```
+         * cameraControls.maxPolarAngle = Math.PI;
+         * ```
+         * @category Properties
+         */
+        this.maxPolarAngle = Math.PI; // radians
+        /**
+         * Minimum horizontal angle in radians.
+         * The angle has to be less than `.maxAzimuthAngle`.
+         * The default value is `- Infinity`.
+         *
+         * e.g.
+         * ```
+         * cameraControls.minAzimuthAngle = - Infinity;
+         * ```
+         * @category Properties
+         */
+        this.minAzimuthAngle = -Infinity; // radians
+        /**
+         * Maximum horizontal angle in radians.
+         * The angle has to be greater than `.minAzimuthAngle`.
+         * The default value is `Infinity`.
+         *
+         * e.g.
+         * ```
+         * cameraControls.maxAzimuthAngle = Infinity;
+         * ```
+         * @category Properties
+         */
+        this.maxAzimuthAngle = Infinity; // radians
+        // How far you can dolly in and out ( PerspectiveCamera only )
+        /**
+         * Minimum distance for dolly. The value must be higher than `0`. Default is `Number.EPSILON`.
+         * PerspectiveCamera only.
+         * @category Properties
+         */
+        this.minDistance = Number.EPSILON;
+        /**
+         * Maximum distance for dolly. The value must be higher than `minDistance`. Default is `Infinity`.
+         * PerspectiveCamera only.
+         * @category Properties
+         */
+        this.maxDistance = Infinity;
+        /**
+         * `true` to enable Infinity Dolly for wheel and pinch. Use this with `minDistance` and `maxDistance`
+         * If the Dolly distance is less (or over) than the `minDistance` (or `maxDistance`), `infinityDolly` will keep the distance and pushes the target position instead.
+         * @category Properties
+         */
+        this.infinityDolly = false;
+        /**
+         * Minimum camera zoom.
+         * @category Properties
+         */
+        this.minZoom = 0.01;
+        /**
+         * Maximum camera zoom.
+         * @category Properties
+         */
+        this.maxZoom = Infinity;
+        /**
+         * Approximate time in seconds to reach the target. A smaller value will reach the target faster.
+         * @category Properties
+         */
+        this.smoothTime = 0.25;
+        /**
+         * the smoothTime while dragging
+         * @category Properties
+         */
+        this.draggingSmoothTime = 0.125;
+        /**
+         * Max transition speed in unit-per-seconds
+         * @category Properties
+         */
+        this.maxSpeed = Infinity;
+        /**
+         * Speed of azimuth (horizontal) rotation.
+         * @category Properties
+         */
+        this.azimuthRotateSpeed = 1.0;
+        /**
+         * Speed of polar (vertical) rotation.
+         * @category Properties
+         */
+        this.polarRotateSpeed = 1.0;
+        /**
+         * Speed of mouse-wheel dollying.
+         * @category Properties
+         */
+        this.dollySpeed = 1.0;
+        /**
+         * `true` to invert direction when dollying or zooming via drag
+         * @category Properties
+         */
+        this.dollyDragInverted = false;
+        /**
+         * Speed of drag for truck and pedestal.
+         * @category Properties
+         */
+        this.truckSpeed = 2.0;
+        /**
+         * `true` to enable Dolly-in to the mouse cursor coords.
+         * @category Properties
+         */
+        this.dollyToCursor = false;
+        /**
+         * @category Properties
+         */
+        this.dragToOffset = false;
+        /**
+         * Friction ratio of the boundary.
+         * @category Properties
+         */
+        this.boundaryFriction = 0.0;
+        /**
+         * Controls how soon the `rest` event fires as the camera slows.
+         * @category Properties
+         */
+        this.restThreshold = 0.01;
+        /**
+         * An array of Meshes to collide with camera.
+         * Be aware colliderMeshes may decrease performance. The collision test uses 4 raycasters from the camera since the near plane has 4 corners.
+         * @category Properties
+         */
+        this.colliderMeshes = [];
+        /**
+         * Force cancel user dragging.
+         * @category Methods
+         */
+        // cancel will be overwritten in the constructor.
+        this.cancel = () => { };
+        this._enabled = true;
+        this._state = ACTION.NONE;
+        this._viewport = null;
+        this._changedDolly = 0;
+        this._changedZoom = 0;
+        this._hasRested = true;
+        this._boundaryEnclosesCamera = false;
+        this._needsUpdate = true;
+        this._updatedLastTime = false;
+        this._elementRect = new DOMRect();
+        this._isDragging = false;
+        this._dragNeedsUpdate = true;
+        this._activePointers = [];
+        this._lockedPointer = null;
+        this._interactiveArea = new DOMRect(0, 0, 1, 1);
+        // Use draggingSmoothTime over smoothTime while true.
+        // set automatically true on user-dragging start.
+        // set automatically false on programmable methods call.
+        this._isUserControllingRotate = false;
+        this._isUserControllingDolly = false;
+        this._isUserControllingTruck = false;
+        this._isUserControllingOffset = false;
+        this._isUserControllingZoom = false;
+        this._lastDollyDirection = DOLLY_DIRECTION.NONE;
+        // velocities for smoothDamp
+        this._thetaVelocity = { value: 0 };
+        this._phiVelocity = { value: 0 };
+        this._radiusVelocity = { value: 0 };
+        this._targetVelocity = new THREE.Vector3();
+        this._focalOffsetVelocity = new THREE.Vector3();
+        this._zoomVelocity = { value: 0 };
+        this._truckInternal = (deltaX, deltaY, dragToOffset, screenSpacePanning) => {
+            let truckX;
+            let pedestalY;
+            if (isPerspectiveCamera(this._camera)) {
+                const offset = _v3A.copy(this._camera.position).sub(this._target);
+                // half of the fov is center to top of screen
+                const fov = this._camera.getEffectiveFOV() * DEG2RAD;
+                const targetDistance = offset.length() * Math.tan(fov * 0.5);
+                truckX = (this.truckSpeed * deltaX * targetDistance / this._elementRect.height);
+                pedestalY = (this.truckSpeed * deltaY * targetDistance / this._elementRect.height);
+            }
+            else if (isOrthographicCamera(this._camera)) {
+                const camera = this._camera;
+                truckX = this.truckSpeed * deltaX * (camera.right - camera.left) / camera.zoom / this._elementRect.width;
+                pedestalY = this.truckSpeed * deltaY * (camera.top - camera.bottom) / camera.zoom / this._elementRect.height;
+            }
+            else {
+                return;
+            }
+            if (screenSpacePanning) {
+                dragToOffset ?
+                    this.setFocalOffset(this._focalOffsetEnd.x + truckX, this._focalOffsetEnd.y, this._focalOffsetEnd.z, true) :
+                    this.truck(truckX, 0, true);
+                this.forward(-pedestalY, true);
+            }
+            else {
+                dragToOffset ?
+                    this.setFocalOffset(this._focalOffsetEnd.x + truckX, this._focalOffsetEnd.y + pedestalY, this._focalOffsetEnd.z, true) :
+                    this.truck(truckX, pedestalY, true);
+            }
+        };
+        this._rotateInternal = (deltaX, deltaY) => {
+            const theta = PI_2 * this.azimuthRotateSpeed * deltaX / this._elementRect.height; // divide by *height* to refer the resolution
+            const phi = PI_2 * this.polarRotateSpeed * deltaY / this._elementRect.height;
+            this.rotate(theta, phi, true);
+        };
+        this._dollyInternal = (delta, x, y) => {
+            const dollyScale = Math.pow(0.95, -delta * this.dollySpeed);
+            const lastDistance = this._sphericalEnd.radius;
+            const distance = this._sphericalEnd.radius * dollyScale;
+            const clampedDistance = clamp(distance, this.minDistance, this.maxDistance);
+            const overflowedDistance = clampedDistance - distance;
+            if (this.infinityDolly && this.dollyToCursor) {
+                this._dollyToNoClamp(distance, true);
+            }
+            else if (this.infinityDolly && !this.dollyToCursor) {
+                this.dollyInFixed(overflowedDistance, true);
+                this._dollyToNoClamp(clampedDistance, true);
+            }
+            else {
+                this._dollyToNoClamp(clampedDistance, true);
+            }
+            if (this.dollyToCursor) {
+                this._changedDolly += (this.infinityDolly ? distance : clampedDistance) - lastDistance;
+                this._dollyControlCoord.set(x, y);
+            }
+            this._lastDollyDirection = Math.sign(-delta);
+        };
+        this._zoomInternal = (delta, x, y) => {
+            const zoomScale = Math.pow(0.95, delta * this.dollySpeed);
+            const lastZoom = this._zoom;
+            const zoom = this._zoom * zoomScale;
+            // for both PerspectiveCamera and OrthographicCamera
+            this.zoomTo(zoom, true);
+            if (this.dollyToCursor) {
+                this._changedZoom += zoom - lastZoom;
+                this._dollyControlCoord.set(x, y);
+            }
+        };
+        // Check if the user has installed THREE
+        if (typeof THREE === 'undefined') {
+            console.error('camera-controls: `THREE` is undefined. You must first run `CameraControls.install( { THREE: THREE } )`. Check the docs for further information.');
+        }
+        this._camera = camera;
+        this._yAxisUpSpace = new THREE.Quaternion().setFromUnitVectors(this._camera.up, _AXIS_Y);
+        this._yAxisUpSpaceInverse = this._yAxisUpSpace.clone().invert();
+        this._state = ACTION.NONE;
+        // the location
+        this._target = new THREE.Vector3();
+        this._targetEnd = this._target.clone();
+        this._focalOffset = new THREE.Vector3();
+        this._focalOffsetEnd = this._focalOffset.clone();
+        // rotation
+        this._spherical = new THREE.Spherical().setFromVector3(_v3A.copy(this._camera.position).applyQuaternion(this._yAxisUpSpace));
+        this._sphericalEnd = this._spherical.clone();
+        this._lastDistance = this._spherical.radius;
+        this._zoom = this._camera.zoom;
+        this._zoomEnd = this._zoom;
+        this._lastZoom = this._zoom;
+        // collisionTest uses nearPlane.s
+        this._nearPlaneCorners = [
+            new THREE.Vector3(),
+            new THREE.Vector3(),
+            new THREE.Vector3(),
+            new THREE.Vector3(),
+        ];
+        this._updateNearPlaneCorners();
+        // Target cannot move outside of this box
+        this._boundary = new THREE.Box3(new THREE.Vector3(-Infinity, -Infinity, -Infinity), new THREE.Vector3(Infinity, Infinity, Infinity));
+        // reset
+        this._cameraUp0 = this._camera.up.clone();
+        this._target0 = this._target.clone();
+        this._position0 = this._camera.position.clone();
+        this._zoom0 = this._zoom;
+        this._focalOffset0 = this._focalOffset.clone();
+        this._dollyControlCoord = new THREE.Vector2();
+        // configs
+        this.mouseButtons = {
+            left: ACTION.ROTATE,
+            middle: ACTION.DOLLY,
+            right: ACTION.TRUCK,
+            wheel: isPerspectiveCamera(this._camera) ? ACTION.DOLLY :
+                isOrthographicCamera(this._camera) ? ACTION.ZOOM :
+                    ACTION.NONE,
+        };
+        this.touches = {
+            one: ACTION.TOUCH_ROTATE,
+            two: isPerspectiveCamera(this._camera) ? ACTION.TOUCH_DOLLY_TRUCK :
+                isOrthographicCamera(this._camera) ? ACTION.TOUCH_ZOOM_TRUCK :
+                    ACTION.NONE,
+            three: ACTION.TOUCH_TRUCK,
+        };
+        const dragStartPosition = new THREE.Vector2();
+        const lastDragPosition = new THREE.Vector2();
+        const dollyStart = new THREE.Vector2();
+        const onPointerDown = (event) => {
+            if (!this._enabled || !this._domElement)
+                return;
+            if (this._interactiveArea.left !== 0 ||
+                this._interactiveArea.top !== 0 ||
+                this._interactiveArea.width !== 1 ||
+                this._interactiveArea.height !== 1) {
+                const elRect = this._domElement.getBoundingClientRect();
+                const left = event.clientX / elRect.width;
+                const top = event.clientY / elRect.height;
+                // check if the interactiveArea contains the drag start position.
+                if (left < this._interactiveArea.left ||
+                    left > this._interactiveArea.right ||
+                    top < this._interactiveArea.top ||
+                    top > this._interactiveArea.bottom)
+                    return;
+            }
+            // Don't call `event.preventDefault()` on the pointerdown event
+            // to keep receiving pointermove evens outside dragging iframe
+            // https://taye.me/blog/tips/2015/11/16/mouse-drag-outside-iframe/
+            const mouseButton = event.pointerType !== 'mouse' ? null :
+                (event.buttons & MOUSE_BUTTON.LEFT) === MOUSE_BUTTON.LEFT ? MOUSE_BUTTON.LEFT :
+                    (event.buttons & MOUSE_BUTTON.MIDDLE) === MOUSE_BUTTON.MIDDLE ? MOUSE_BUTTON.MIDDLE :
+                        (event.buttons & MOUSE_BUTTON.RIGHT) === MOUSE_BUTTON.RIGHT ? MOUSE_BUTTON.RIGHT :
+                            null;
+            if (mouseButton !== null) {
+                const zombiePointer = this._findPointerByMouseButton(mouseButton);
+                zombiePointer && this._disposePointer(zombiePointer);
+            }
+            if ((event.buttons & MOUSE_BUTTON.LEFT) === MOUSE_BUTTON.LEFT && this._lockedPointer)
+                return;
+            const pointer = {
+                pointerId: event.pointerId,
+                clientX: event.clientX,
+                clientY: event.clientY,
+                deltaX: 0,
+                deltaY: 0,
+                mouseButton,
+            };
+            this._activePointers.push(pointer);
+            // eslint-disable-next-line no-undef
+            this._domElement.ownerDocument.removeEventListener('pointermove', onPointerMove, { passive: false });
+            this._domElement.ownerDocument.removeEventListener('pointerup', onPointerUp);
+            this._domElement.ownerDocument.addEventListener('pointermove', onPointerMove, { passive: false });
+            this._domElement.ownerDocument.addEventListener('pointerup', onPointerUp);
+            this._isDragging = true;
+            startDragging(event);
+        };
+        const onPointerMove = (event) => {
+            if (event.cancelable)
+                event.preventDefault();
+            const pointerId = event.pointerId;
+            const pointer = this._lockedPointer || this._findPointerById(pointerId);
+            if (!pointer)
+                return;
+            pointer.clientX = event.clientX;
+            pointer.clientY = event.clientY;
+            pointer.deltaX = event.movementX;
+            pointer.deltaY = event.movementY;
+            this._state = 0;
+            if (event.pointerType === 'touch') {
+                switch (this._activePointers.length) {
+                    case 1:
+                        this._state = this.touches.one;
+                        break;
+                    case 2:
+                        this._state = this.touches.two;
+                        break;
+                    case 3:
+                        this._state = this.touches.three;
+                        break;
+                }
+            }
+            else {
+                if ((!this._isDragging && this._lockedPointer) ||
+                    this._isDragging && (event.buttons & MOUSE_BUTTON.LEFT) === MOUSE_BUTTON.LEFT) {
+                    this._state = this._state | this.mouseButtons.left;
+                }
+                if (this._isDragging && (event.buttons & MOUSE_BUTTON.MIDDLE) === MOUSE_BUTTON.MIDDLE) {
+                    this._state = this._state | this.mouseButtons.middle;
+                }
+                if (this._isDragging && (event.buttons & MOUSE_BUTTON.RIGHT) === MOUSE_BUTTON.RIGHT) {
+                    this._state = this._state | this.mouseButtons.right;
+                }
+            }
+            dragging();
+        };
+        const onPointerUp = (event) => {
+            const pointer = this._findPointerById(event.pointerId);
+            if (pointer && pointer === this._lockedPointer)
+                return;
+            pointer && this._disposePointer(pointer);
+            if (event.pointerType === 'touch') {
+                switch (this._activePointers.length) {
+                    case 0:
+                        this._state = ACTION.NONE;
+                        break;
+                    case 1:
+                        this._state = this.touches.one;
+                        break;
+                    case 2:
+                        this._state = this.touches.two;
+                        break;
+                    case 3:
+                        this._state = this.touches.three;
+                        break;
+                }
+            }
+            else {
+                this._state = ACTION.NONE;
+            }
+            endDragging();
+        };
+        let lastScrollTimeStamp = -1;
+        const onMouseWheel = (event) => {
+            if (!this._domElement)
+                return;
+            if (!this._enabled || this.mouseButtons.wheel === ACTION.NONE)
+                return;
+            if (this._interactiveArea.left !== 0 ||
+                this._interactiveArea.top !== 0 ||
+                this._interactiveArea.width !== 1 ||
+                this._interactiveArea.height !== 1) {
+                const elRect = this._domElement.getBoundingClientRect();
+                const left = event.clientX / elRect.width;
+                const top = event.clientY / elRect.height;
+                // check if the interactiveArea contains the drag start position.
+                if (left < this._interactiveArea.left ||
+                    left > this._interactiveArea.right ||
+                    top < this._interactiveArea.top ||
+                    top > this._interactiveArea.bottom)
+                    return;
+            }
+            event.preventDefault();
+            if (this.dollyToCursor ||
+                this.mouseButtons.wheel === ACTION.ROTATE ||
+                this.mouseButtons.wheel === ACTION.TRUCK) {
+                const now = performance.now();
+                // only need to fire this at scroll start.
+                if (lastScrollTimeStamp - now < 1000)
+                    this._getClientRect(this._elementRect);
+                lastScrollTimeStamp = now;
+            }
+            // Ref: https://github.com/cedricpinson/osgjs/blob/00e5a7e9d9206c06fdde0436e1d62ab7cb5ce853/sources/osgViewer/input/source/InputSourceMouse.js#L89-L103
+            const deltaYFactor = isMac ? -1 : -3;
+            const delta = (event.deltaMode === 1) ? event.deltaY / deltaYFactor : event.deltaY / (deltaYFactor * 10);
+            const x = this.dollyToCursor ? (event.clientX - this._elementRect.x) / this._elementRect.width * 2 - 1 : 0;
+            const y = this.dollyToCursor ? (event.clientY - this._elementRect.y) / this._elementRect.height * -2 + 1 : 0;
+            switch (this.mouseButtons.wheel) {
+                case ACTION.ROTATE: {
+                    this._rotateInternal(event.deltaX, event.deltaY);
+                    this._isUserControllingRotate = true;
+                    break;
+                }
+                case ACTION.TRUCK: {
+                    this._truckInternal(event.deltaX, event.deltaY, false, false);
+                    this._isUserControllingTruck = true;
+                    break;
+                }
+                case ACTION.SCREEN_PAN: {
+                    this._truckInternal(event.deltaX, event.deltaY, false, true);
+                    this._isUserControllingTruck = true;
+                    break;
+                }
+                case ACTION.OFFSET: {
+                    this._truckInternal(event.deltaX, event.deltaY, true, false);
+                    this._isUserControllingOffset = true;
+                    break;
+                }
+                case ACTION.DOLLY: {
+                    this._dollyInternal(-delta, x, y);
+                    this._isUserControllingDolly = true;
+                    break;
+                }
+                case ACTION.ZOOM: {
+                    this._zoomInternal(-delta, x, y);
+                    this._isUserControllingZoom = true;
+                    break;
+                }
+            }
+            this.dispatchEvent({ type: 'control' });
+        };
+        const onContextMenu = (event) => {
+            if (!this._domElement || !this._enabled)
+                return;
+            // contextmenu event is fired right after pointerdown
+            // remove attached handlers and active pointer, if interrupted by contextmenu.
+            if (this.mouseButtons.right === CameraControls.ACTION.NONE) {
+                const pointerId = event instanceof PointerEvent ? event.pointerId : 0;
+                const pointer = this._findPointerById(pointerId);
+                pointer && this._disposePointer(pointer);
+                // eslint-disable-next-line no-undef
+                this._domElement.ownerDocument.removeEventListener('pointermove', onPointerMove, { passive: false });
+                this._domElement.ownerDocument.removeEventListener('pointerup', onPointerUp);
+                return;
+            }
+            event.preventDefault();
+        };
+        const startDragging = (event) => {
+            if (!this._enabled)
+                return;
+            extractClientCoordFromEvent(this._activePointers, _v2);
+            this._getClientRect(this._elementRect);
+            dragStartPosition.copy(_v2);
+            lastDragPosition.copy(_v2);
+            const isMultiTouch = this._activePointers.length >= 2;
+            if (isMultiTouch) {
+                // 2 finger pinch
+                const dx = _v2.x - this._activePointers[1].clientX;
+                const dy = _v2.y - this._activePointers[1].clientY;
+                const distance = Math.sqrt(dx * dx + dy * dy);
+                dollyStart.set(0, distance);
+                // center coords of 2 finger truck
+                const x = (this._activePointers[0].clientX + this._activePointers[1].clientX) * 0.5;
+                const y = (this._activePointers[0].clientY + this._activePointers[1].clientY) * 0.5;
+                lastDragPosition.set(x, y);
+            }
+            this._state = 0;
+            if (!event) {
+                if (this._lockedPointer)
+                    this._state = this._state | this.mouseButtons.left;
+            }
+            else if ('pointerType' in event && event.pointerType === 'touch') {
+                switch (this._activePointers.length) {
+                    case 1:
+                        this._state = this.touches.one;
+                        break;
+                    case 2:
+                        this._state = this.touches.two;
+                        break;
+                    case 3:
+                        this._state = this.touches.three;
+                        break;
+                }
+            }
+            else {
+                if (!this._lockedPointer && (event.buttons & MOUSE_BUTTON.LEFT) === MOUSE_BUTTON.LEFT) {
+                    this._state = this._state | this.mouseButtons.left;
+                }
+                if ((event.buttons & MOUSE_BUTTON.MIDDLE) === MOUSE_BUTTON.MIDDLE) {
+                    this._state = this._state | this.mouseButtons.middle;
+                }
+                if ((event.buttons & MOUSE_BUTTON.RIGHT) === MOUSE_BUTTON.RIGHT) {
+                    this._state = this._state | this.mouseButtons.right;
+                }
+            }
+            // stop current movement on drag start
+            // - rotate
+            if ((this._state & ACTION.ROTATE) === ACTION.ROTATE ||
+                (this._state & ACTION.TOUCH_ROTATE) === ACTION.TOUCH_ROTATE ||
+                (this._state & ACTION.TOUCH_DOLLY_ROTATE) === ACTION.TOUCH_DOLLY_ROTATE ||
+                (this._state & ACTION.TOUCH_ZOOM_ROTATE) === ACTION.TOUCH_ZOOM_ROTATE) {
+                this._sphericalEnd.theta = this._spherical.theta;
+                this._sphericalEnd.phi = this._spherical.phi;
+                this._thetaVelocity.value = 0;
+                this._phiVelocity.value = 0;
+            }
+            // - truck and screen-pan
+            if ((this._state & ACTION.TRUCK) === ACTION.TRUCK ||
+                (this._state & ACTION.SCREEN_PAN) === ACTION.SCREEN_PAN ||
+                (this._state & ACTION.TOUCH_TRUCK) === ACTION.TOUCH_TRUCK ||
+                (this._state & ACTION.TOUCH_SCREEN_PAN) === ACTION.TOUCH_SCREEN_PAN ||
+                (this._state & ACTION.TOUCH_DOLLY_TRUCK) === ACTION.TOUCH_DOLLY_TRUCK ||
+                (this._state & ACTION.TOUCH_DOLLY_SCREEN_PAN) === ACTION.TOUCH_DOLLY_SCREEN_PAN ||
+                (this._state & ACTION.TOUCH_ZOOM_TRUCK) === ACTION.TOUCH_ZOOM_TRUCK ||
+                (this._state & ACTION.TOUCH_ZOOM_SCREEN_PAN) === ACTION.TOUCH_DOLLY_SCREEN_PAN) {
+                this._targetEnd.copy(this._target);
+                this._targetVelocity.set(0, 0, 0);
+            }
+            // - dolly
+            if ((this._state & ACTION.DOLLY) === ACTION.DOLLY ||
+                (this._state & ACTION.TOUCH_DOLLY) === ACTION.TOUCH_DOLLY ||
+                (this._state & ACTION.TOUCH_DOLLY_TRUCK) === ACTION.TOUCH_DOLLY_TRUCK ||
+                (this._state & ACTION.TOUCH_DOLLY_SCREEN_PAN) === ACTION.TOUCH_DOLLY_SCREEN_PAN ||
+                (this._state & ACTION.TOUCH_DOLLY_OFFSET) === ACTION.TOUCH_DOLLY_OFFSET ||
+                (this._state & ACTION.TOUCH_DOLLY_ROTATE) === ACTION.TOUCH_DOLLY_ROTATE) {
+                this._sphericalEnd.radius = this._spherical.radius;
+                this._radiusVelocity.value = 0;
+            }
+            // - zoom
+            if ((this._state & ACTION.ZOOM) === ACTION.ZOOM ||
+                (this._state & ACTION.TOUCH_ZOOM) === ACTION.TOUCH_ZOOM ||
+                (this._state & ACTION.TOUCH_ZOOM_TRUCK) === ACTION.TOUCH_ZOOM_TRUCK ||
+                (this._state & ACTION.TOUCH_ZOOM_SCREEN_PAN) === ACTION.TOUCH_ZOOM_SCREEN_PAN ||
+                (this._state & ACTION.TOUCH_ZOOM_OFFSET) === ACTION.TOUCH_ZOOM_OFFSET ||
+                (this._state & ACTION.TOUCH_ZOOM_ROTATE) === ACTION.TOUCH_ZOOM_ROTATE) {
+                this._zoomEnd = this._zoom;
+                this._zoomVelocity.value = 0;
+            }
+            // - offset
+            if ((this._state & ACTION.OFFSET) === ACTION.OFFSET ||
+                (this._state & ACTION.TOUCH_OFFSET) === ACTION.TOUCH_OFFSET ||
+                (this._state & ACTION.TOUCH_DOLLY_OFFSET) === ACTION.TOUCH_DOLLY_OFFSET ||
+                (this._state & ACTION.TOUCH_ZOOM_OFFSET) === ACTION.TOUCH_ZOOM_OFFSET) {
+                this._focalOffsetEnd.copy(this._focalOffset);
+                this._focalOffsetVelocity.set(0, 0, 0);
+            }
+            this.dispatchEvent({ type: 'controlstart' });
+        };
+        const dragging = () => {
+            if (!this._enabled || !this._dragNeedsUpdate)
+                return;
+            this._dragNeedsUpdate = false;
+            extractClientCoordFromEvent(this._activePointers, _v2);
+            // When pointer lock is enabled clientX, clientY, screenX, and screenY remain 0.
+            // If pointer lock is enabled, use the Delta directory, and assume active-pointer is not multiple.
+            const isPointerLockActive = this._domElement && this._domElement.ownerDocument.pointerLockElement === this._domElement;
+            const lockedPointer = isPointerLockActive ? this._lockedPointer || this._activePointers[0] : null;
+            const deltaX = lockedPointer ? -lockedPointer.deltaX : lastDragPosition.x - _v2.x;
+            const deltaY = lockedPointer ? -lockedPointer.deltaY : lastDragPosition.y - _v2.y;
+            lastDragPosition.copy(_v2);
+            // rotate
+            if ((this._state & ACTION.ROTATE) === ACTION.ROTATE ||
+                (this._state & ACTION.TOUCH_ROTATE) === ACTION.TOUCH_ROTATE ||
+                (this._state & ACTION.TOUCH_DOLLY_ROTATE) === ACTION.TOUCH_DOLLY_ROTATE ||
+                (this._state & ACTION.TOUCH_ZOOM_ROTATE) === ACTION.TOUCH_ZOOM_ROTATE) {
+                this._rotateInternal(deltaX, deltaY);
+                this._isUserControllingRotate = true;
+            }
+            // mouse dolly or zoom
+            if ((this._state & ACTION.DOLLY) === ACTION.DOLLY ||
+                (this._state & ACTION.ZOOM) === ACTION.ZOOM) {
+                const dollyX = this.dollyToCursor ? (dragStartPosition.x - this._elementRect.x) / this._elementRect.width * 2 - 1 : 0;
+                const dollyY = this.dollyToCursor ? (dragStartPosition.y - this._elementRect.y) / this._elementRect.height * -2 + 1 : 0;
+                const dollyDirection = this.dollyDragInverted ? -1 : 1;
+                if ((this._state & ACTION.DOLLY) === ACTION.DOLLY) {
+                    this._dollyInternal(dollyDirection * deltaY * TOUCH_DOLLY_FACTOR, dollyX, dollyY);
+                    this._isUserControllingDolly = true;
+                }
+                else {
+                    this._zoomInternal(dollyDirection * deltaY * TOUCH_DOLLY_FACTOR, dollyX, dollyY);
+                    this._isUserControllingZoom = true;
+                }
+            }
+            // touch dolly or zoom
+            if ((this._state & ACTION.TOUCH_DOLLY) === ACTION.TOUCH_DOLLY ||
+                (this._state & ACTION.TOUCH_ZOOM) === ACTION.TOUCH_ZOOM ||
+                (this._state & ACTION.TOUCH_DOLLY_TRUCK) === ACTION.TOUCH_DOLLY_TRUCK ||
+                (this._state & ACTION.TOUCH_ZOOM_TRUCK) === ACTION.TOUCH_ZOOM_TRUCK ||
+                (this._state & ACTION.TOUCH_DOLLY_SCREEN_PAN) === ACTION.TOUCH_DOLLY_SCREEN_PAN ||
+                (this._state & ACTION.TOUCH_ZOOM_SCREEN_PAN) === ACTION.TOUCH_ZOOM_SCREEN_PAN ||
+                (this._state & ACTION.TOUCH_DOLLY_OFFSET) === ACTION.TOUCH_DOLLY_OFFSET ||
+                (this._state & ACTION.TOUCH_ZOOM_OFFSET) === ACTION.TOUCH_ZOOM_OFFSET ||
+                (this._state & ACTION.TOUCH_DOLLY_ROTATE) === ACTION.TOUCH_DOLLY_ROTATE ||
+                (this._state & ACTION.TOUCH_ZOOM_ROTATE) === ACTION.TOUCH_ZOOM_ROTATE) {
+                const dx = _v2.x - this._activePointers[1].clientX;
+                const dy = _v2.y - this._activePointers[1].clientY;
+                const distance = Math.sqrt(dx * dx + dy * dy);
+                const dollyDelta = dollyStart.y - distance;
+                dollyStart.set(0, distance);
+                const dollyX = this.dollyToCursor ? (lastDragPosition.x - this._elementRect.x) / this._elementRect.width * 2 - 1 : 0;
+                const dollyY = this.dollyToCursor ? (lastDragPosition.y - this._elementRect.y) / this._elementRect.height * -2 + 1 : 0;
+                if ((this._state & ACTION.TOUCH_DOLLY) === ACTION.TOUCH_DOLLY ||
+                    (this._state & ACTION.TOUCH_DOLLY_ROTATE) === ACTION.TOUCH_DOLLY_ROTATE ||
+                    (this._state & ACTION.TOUCH_DOLLY_TRUCK) === ACTION.TOUCH_DOLLY_TRUCK ||
+                    (this._state & ACTION.TOUCH_DOLLY_SCREEN_PAN) === ACTION.TOUCH_DOLLY_SCREEN_PAN ||
+                    (this._state & ACTION.TOUCH_DOLLY_OFFSET) === ACTION.TOUCH_DOLLY_OFFSET) {
+                    this._dollyInternal(dollyDelta * TOUCH_DOLLY_FACTOR, dollyX, dollyY);
+                    this._isUserControllingDolly = true;
+                }
+                else {
+                    this._zoomInternal(dollyDelta * TOUCH_DOLLY_FACTOR, dollyX, dollyY);
+                    this._isUserControllingZoom = true;
+                }
+            }
+            // truck
+            if ((this._state & ACTION.TRUCK) === ACTION.TRUCK ||
+                (this._state & ACTION.TOUCH_TRUCK) === ACTION.TOUCH_TRUCK ||
+                (this._state & ACTION.TOUCH_DOLLY_TRUCK) === ACTION.TOUCH_DOLLY_TRUCK ||
+                (this._state & ACTION.TOUCH_ZOOM_TRUCK) === ACTION.TOUCH_ZOOM_TRUCK) {
+                this._truckInternal(deltaX, deltaY, false, false);
+                this._isUserControllingTruck = true;
+            }
+            // screen-pan
+            if ((this._state & ACTION.SCREEN_PAN) === ACTION.SCREEN_PAN ||
+                (this._state & ACTION.TOUCH_SCREEN_PAN) === ACTION.TOUCH_SCREEN_PAN ||
+                (this._state & ACTION.TOUCH_DOLLY_SCREEN_PAN) === ACTION.TOUCH_DOLLY_SCREEN_PAN ||
+                (this._state & ACTION.TOUCH_ZOOM_SCREEN_PAN) === ACTION.TOUCH_ZOOM_SCREEN_PAN) {
+                this._truckInternal(deltaX, deltaY, false, true);
+                this._isUserControllingTruck = true;
+            }
+            // offset
+            if ((this._state & ACTION.OFFSET) === ACTION.OFFSET ||
+                (this._state & ACTION.TOUCH_OFFSET) === ACTION.TOUCH_OFFSET ||
+                (this._state & ACTION.TOUCH_DOLLY_OFFSET) === ACTION.TOUCH_DOLLY_OFFSET ||
+                (this._state & ACTION.TOUCH_ZOOM_OFFSET) === ACTION.TOUCH_ZOOM_OFFSET) {
+                this._truckInternal(deltaX, deltaY, true, false);
+                this._isUserControllingOffset = true;
+            }
+            this.dispatchEvent({ type: 'control' });
+        };
+        const endDragging = () => {
+            extractClientCoordFromEvent(this._activePointers, _v2);
+            lastDragPosition.copy(_v2);
+            this._dragNeedsUpdate = false;
+            if (this._activePointers.length === 0 ||
+                (this._activePointers.length === 1 && this._activePointers[0] === this._lockedPointer)) {
+                this._isDragging = false;
+            }
+            if (this._activePointers.length === 0 && this._domElement) {
+                // eslint-disable-next-line no-undef
+                this._domElement.ownerDocument.removeEventListener('pointermove', onPointerMove, { passive: false });
+                this._domElement.ownerDocument.removeEventListener('pointerup', onPointerUp);
+                this.dispatchEvent({ type: 'controlend' });
+            }
+        };
+        this.lockPointer = () => {
+            if (!this._enabled || !this._domElement)
+                return;
+            this.cancel();
+            // Element.requestPointerLock is allowed to happen without any pointer active - create a faux one for compatibility with controls
+            this._lockedPointer = {
+                pointerId: -1,
+                clientX: 0,
+                clientY: 0,
+                deltaX: 0,
+                deltaY: 0,
+                mouseButton: null,
+            };
+            this._activePointers.push(this._lockedPointer);
+            // eslint-disable-next-line no-undef
+            this._domElement.ownerDocument.removeEventListener('pointermove', onPointerMove, { passive: false });
+            this._domElement.ownerDocument.removeEventListener('pointerup', onPointerUp);
+            this._domElement.requestPointerLock();
+            this._domElement.ownerDocument.addEventListener('pointerlockchange', onPointerLockChange);
+            this._domElement.ownerDocument.addEventListener('pointerlockerror', onPointerLockError);
+            this._domElement.ownerDocument.addEventListener('pointermove', onPointerMove, { passive: false });
+            this._domElement.ownerDocument.addEventListener('pointerup', onPointerUp);
+            startDragging();
+        };
+        this.unlockPointer = () => {
+            var _a, _b, _c;
+            if (this._lockedPointer !== null) {
+                this._disposePointer(this._lockedPointer);
+                this._lockedPointer = null;
+            }
+            (_a = this._domElement) === null || _a === void 0 ? void 0 : _a.ownerDocument.exitPointerLock();
+            (_b = this._domElement) === null || _b === void 0 ? void 0 : _b.ownerDocument.removeEventListener('pointerlockchange', onPointerLockChange);
+            (_c = this._domElement) === null || _c === void 0 ? void 0 : _c.ownerDocument.removeEventListener('pointerlockerror', onPointerLockError);
+            this.cancel();
+        };
+        const onPointerLockChange = () => {
+            const isPointerLockActive = this._domElement && this._domElement.ownerDocument.pointerLockElement === this._domElement;
+            if (!isPointerLockActive)
+                this.unlockPointer();
+        };
+        const onPointerLockError = () => {
+            this.unlockPointer();
+        };
+        this._addAllEventListeners = (domElement) => {
+            this._domElement = domElement;
+            this._domElement.style.touchAction = 'none';
+            this._domElement.style.userSelect = 'none';
+            this._domElement.style.webkitUserSelect = 'none';
+            this._domElement.addEventListener('pointerdown', onPointerDown);
+            this._domElement.addEventListener('pointercancel', onPointerUp);
+            this._domElement.addEventListener('wheel', onMouseWheel, { passive: false });
+            this._domElement.addEventListener('contextmenu', onContextMenu);
+        };
+        this._removeAllEventListeners = () => {
+            if (!this._domElement)
+                return;
+            this._domElement.style.touchAction = '';
+            this._domElement.style.userSelect = '';
+            this._domElement.style.webkitUserSelect = '';
+            this._domElement.removeEventListener('pointerdown', onPointerDown);
+            this._domElement.removeEventListener('pointercancel', onPointerUp);
+            // https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener#matching_event_listeners_for_removal
+            // > it's probably wise to use the same values used for the call to `addEventListener()` when calling `removeEventListener()`
+            // see https://github.com/microsoft/TypeScript/issues/32912#issuecomment-522142969
+            // eslint-disable-next-line no-undef
+            this._domElement.removeEventListener('wheel', onMouseWheel, { passive: false });
+            this._domElement.removeEventListener('contextmenu', onContextMenu);
+            // eslint-disable-next-line no-undef
+            this._domElement.ownerDocument.removeEventListener('pointermove', onPointerMove, { passive: false });
+            this._domElement.ownerDocument.removeEventListener('pointerup', onPointerUp);
+            this._domElement.ownerDocument.removeEventListener('pointerlockchange', onPointerLockChange);
+            this._domElement.ownerDocument.removeEventListener('pointerlockerror', onPointerLockError);
+        };
+        this.cancel = () => {
+            if (this._state === ACTION.NONE)
+                return;
+            this._state = ACTION.NONE;
+            this._activePointers.length = 0;
+            endDragging();
+        };
+        if (domElement)
+            this.connect(domElement);
+        this.update(0);
+    }
+    /**
+     * The camera to be controlled
+     * @category Properties
+     */
+    get camera() {
+        return this._camera;
+    }
+    set camera(camera) {
+        this._camera = camera;
+        this.updateCameraUp();
+        this._camera.updateProjectionMatrix();
+        this._updateNearPlaneCorners();
+        this._needsUpdate = true;
+    }
+    /**
+     * Whether or not the controls are enabled.
+     * `false` to disable user dragging/touch-move, but all methods works.
+     * @category Properties
+     */
+    get enabled() {
+        return this._enabled;
+    }
+    set enabled(enabled) {
+        this._enabled = enabled;
+        if (!this._domElement)
+            return;
+        if (enabled) {
+            this._domElement.style.touchAction = 'none';
+            this._domElement.style.userSelect = 'none';
+            this._domElement.style.webkitUserSelect = 'none';
+        }
+        else {
+            this.cancel();
+            this._domElement.style.touchAction = '';
+            this._domElement.style.userSelect = '';
+            this._domElement.style.webkitUserSelect = '';
+        }
+    }
+    /**
+     * Returns `true` if the controls are active updating.
+     * readonly value.
+     * @category Properties
+     */
+    get active() {
+        return !this._hasRested;
+    }
+    /**
+     * Getter for the current `ACTION`.
+     * readonly value.
+     * @category Properties
+     */
+    get currentAction() {
+        return this._state;
+    }
+    /**
+     * get/set Current distance.
+     * @category Properties
+     */
+    get distance() {
+        return this._spherical.radius;
+    }
+    set distance(distance) {
+        if (this._spherical.radius === distance &&
+            this._sphericalEnd.radius === distance)
+            return;
+        this._spherical.radius = distance;
+        this._sphericalEnd.radius = distance;
+        this._needsUpdate = true;
+    }
+    // horizontal angle
+    /**
+     * get/set the azimuth angle (horizontal) in radians.
+     * Every 360 degrees turn is added to `.azimuthAngle` value, which is accumulative.
+     * @category Properties
+     */
+    get azimuthAngle() {
+        return this._spherical.theta;
+    }
+    set azimuthAngle(azimuthAngle) {
+        if (this._spherical.theta === azimuthAngle &&
+            this._sphericalEnd.theta === azimuthAngle)
+            return;
+        this._spherical.theta = azimuthAngle;
+        this._sphericalEnd.theta = azimuthAngle;
+        this._needsUpdate = true;
+    }
+    // vertical angle
+    /**
+     * get/set the polar angle (vertical) in radians.
+     * @category Properties
+     */
+    get polarAngle() {
+        return this._spherical.phi;
+    }
+    set polarAngle(polarAngle) {
+        if (this._spherical.phi === polarAngle &&
+            this._sphericalEnd.phi === polarAngle)
+            return;
+        this._spherical.phi = polarAngle;
+        this._sphericalEnd.phi = polarAngle;
+        this._needsUpdate = true;
+    }
+    /**
+     * Whether camera position should be enclosed in the boundary or not.
+     * @category Properties
+     */
+    get boundaryEnclosesCamera() {
+        return this._boundaryEnclosesCamera;
+    }
+    set boundaryEnclosesCamera(boundaryEnclosesCamera) {
+        this._boundaryEnclosesCamera = boundaryEnclosesCamera;
+        this._needsUpdate = true;
+    }
+    /**
+     * Set drag-start, touches and wheel enable area in the domElement.
+     * each values are between `0` and `1` inclusive, where `0` is left/top and `1` is right/bottom of the screen.
+     * e.g. `{ x: 0, y: 0, width: 1, height: 1 }` for entire area.
+     * @category Properties
+     */
+    set interactiveArea(interactiveArea) {
+        this._interactiveArea.width = clamp(interactiveArea.width, 0, 1);
+        this._interactiveArea.height = clamp(interactiveArea.height, 0, 1);
+        this._interactiveArea.x = clamp(interactiveArea.x, 0, 1 - this._interactiveArea.width);
+        this._interactiveArea.y = clamp(interactiveArea.y, 0, 1 - this._interactiveArea.height);
+    }
+    /**
+     * Adds the specified event listener.
+     * Applicable event types (which is `K`) are:
+     * | Event name          | Timing |
+     * | ------------------- | ------ |
+     * | `'controlstart'`    | When the user starts to control the camera via mouse / touches. ¹ |
+     * | `'control'`         | When the user controls the camera (dragging). |
+     * | `'controlend'`      | When the user ends to control the camera. ¹ |
+     * | `'transitionstart'` | When any kind of transition starts, either user control or using a method with `enableTransition = true` |
+     * | `'update'`          | When the camera position is updated. |
+     * | `'wake'`            | When the camera starts moving. |
+     * | `'rest'`            | When the camera movement is below `.restThreshold` ². |
+     * | `'sleep'`           | When the camera end moving. |
+     *
+     * 1. `mouseButtons.wheel` (Mouse wheel control) does not emit `'controlstart'` and `'controlend'`. `mouseButtons.wheel` uses scroll-event internally, and scroll-event happens intermittently. That means "start" and "end" cannot be detected.
+     * 2. Due to damping, `sleep` will usually fire a few seconds after the camera _appears_ to have stopped moving. If you want to do something (e.g. enable UI, perform another transition) at the point when the camera has stopped, you probably want the `rest` event. This can be fine tuned using the `.restThreshold` parameter. See the [Rest and Sleep Example](https://yomotsu.github.io/camera-controls/examples/rest-and-sleep.html).
+     *
+     * e.g.
+     * ```
+     * cameraControl.addEventListener( 'controlstart', myCallbackFunction );
+     * ```
+     * @param type event name
+     * @param listener handler function
+     * @category Methods
+     */
+    addEventListener(type, listener) {
+        super.addEventListener(type, listener);
+    }
+    /**
+     * Removes the specified event listener
+     * e.g.
+     * ```
+     * cameraControl.addEventListener( 'controlstart', myCallbackFunction );
+     * ```
+     * @param type event name
+     * @param listener handler function
+     * @category Methods
+     */
+    removeEventListener(type, listener) {
+        super.removeEventListener(type, listener);
+    }
+    /**
+     * Rotate azimuthal angle(horizontal) and polar angle(vertical).
+     * Every value is added to the current value.
+     * @param azimuthAngle Azimuth rotate angle. In radian.
+     * @param polarAngle Polar rotate angle. In radian.
+     * @param enableTransition Whether to move smoothly or immediately
+     * @category Methods
+     */
+    rotate(azimuthAngle, polarAngle, enableTransition = false) {
+        return this.rotateTo(this._sphericalEnd.theta + azimuthAngle, this._sphericalEnd.phi + polarAngle, enableTransition);
+    }
+    /**
+     * Rotate azimuthal angle(horizontal) to the given angle and keep the same polar angle(vertical) target.
+     *
+     * e.g.
+     * ```
+     * cameraControls.rotateAzimuthTo( 30 * THREE.MathUtils.DEG2RAD, true );
+     * ```
+     * @param azimuthAngle Azimuth rotate angle. In radian.
+     * @param enableTransition Whether to move smoothly or immediately
+     * @category Methods
+     */
+    rotateAzimuthTo(azimuthAngle, enableTransition = false) {
+        return this.rotateTo(azimuthAngle, this._sphericalEnd.phi, enableTransition);
+    }
+    /**
+     * Rotate polar angle(vertical) to the given angle and keep the same azimuthal angle(horizontal) target.
+     *
+     * e.g.
+     * ```
+     * cameraControls.rotatePolarTo( 30 * THREE.MathUtils.DEG2RAD, true );
+     * ```
+     * @param polarAngle Polar rotate angle. In radian.
+     * @param enableTransition Whether to move smoothly or immediately
+     * @category Methods
+     */
+    rotatePolarTo(polarAngle, enableTransition = false) {
+        return this.rotateTo(this._sphericalEnd.theta, polarAngle, enableTransition);
+    }
+    /**
+     * Rotate azimuthal angle(horizontal) and polar angle(vertical) to the given angle.
+     * Camera view will rotate over the orbit pivot absolutely:
+     *
+     * azimuthAngle
+     * ```
+     *       0º
+     *         \
+     * 90º -----+----- -90º
+     *           \
+     *           180º
+     * ```
+     * | direction | angle                  |
+     * | --------- | ---------------------- |
+     * | front     | 0º                     |
+     * | left      | 90º (`Math.PI / 2`)    |
+     * | right     | -90º (`- Math.PI / 2`) |
+     * | back      | 180º (`Math.PI`)       |
+     *
+     * polarAngle
+     * ```
+     *     180º
+     *      |
+     *      90º
+     *      |
+     *      0º
+     * ```
+     * | direction            | angle                  |
+     * | -------------------- | ---------------------- |
+     * | top/sky              | 180º (`Math.PI`)       |
+     * | horizontal from view | 90º (`Math.PI / 2`)    |
+     * | bottom/floor         | 0º                     |
+     *
+     * @param azimuthAngle Azimuth rotate angle to. In radian.
+     * @param polarAngle Polar rotate angle to. In radian.
+     * @param enableTransition  Whether to move smoothly or immediately
+     * @category Methods
+     */
+    rotateTo(azimuthAngle, polarAngle, enableTransition = false) {
+        this._isUserControllingRotate = false;
+        const theta = clamp(azimuthAngle, this.minAzimuthAngle, this.maxAzimuthAngle);
+        const phi = clamp(polarAngle, this.minPolarAngle, this.maxPolarAngle);
+        this._sphericalEnd.theta = theta;
+        this._sphericalEnd.phi = phi;
+        this._sphericalEnd.makeSafe();
+        this._needsUpdate = true;
+        if (!enableTransition) {
+            this._spherical.theta = this._sphericalEnd.theta;
+            this._spherical.phi = this._sphericalEnd.phi;
+        }
+        const resolveImmediately = !enableTransition ||
+            approxEquals(this._spherical.theta, this._sphericalEnd.theta, this.restThreshold) &&
+                approxEquals(this._spherical.phi, this._sphericalEnd.phi, this.restThreshold);
+        return this._createOnRestPromise(resolveImmediately);
+    }
+    /**
+     * Dolly in/out camera position.
+     * @param distance Distance of dollyIn. Negative number for dollyOut.
+     * @param enableTransition Whether to move smoothly or immediately.
+     * @category Methods
+     */
+    dolly(distance, enableTransition = false) {
+        return this.dollyTo(this._sphericalEnd.radius - distance, enableTransition);
+    }
+    /**
+     * Dolly in/out camera position to given distance.
+     * @param distance Distance of dolly.
+     * @param enableTransition Whether to move smoothly or immediately.
+     * @category Methods
+     */
+    dollyTo(distance, enableTransition = false) {
+        this._isUserControllingDolly = false;
+        this._lastDollyDirection = DOLLY_DIRECTION.NONE;
+        this._changedDolly = 0;
+        return this._dollyToNoClamp(clamp(distance, this.minDistance, this.maxDistance), enableTransition);
+    }
+    _dollyToNoClamp(distance, enableTransition = false) {
+        const lastRadius = this._sphericalEnd.radius;
+        const hasCollider = this.colliderMeshes.length >= 1;
+        if (hasCollider) {
+            const maxDistanceByCollisionTest = this._collisionTest();
+            const isCollided = approxEquals(maxDistanceByCollisionTest, this._spherical.radius);
+            const isDollyIn = lastRadius > distance;
+            if (!isDollyIn && isCollided)
+                return Promise.resolve();
+            this._sphericalEnd.radius = Math.min(distance, maxDistanceByCollisionTest);
+        }
+        else {
+            this._sphericalEnd.radius = distance;
+        }
+        this._needsUpdate = true;
+        if (!enableTransition) {
+            this._spherical.radius = this._sphericalEnd.radius;
+        }
+        const resolveImmediately = !enableTransition || approxEquals(this._spherical.radius, this._sphericalEnd.radius, this.restThreshold);
+        return this._createOnRestPromise(resolveImmediately);
+    }
+    /**
+     * Dolly in, but does not change the distance between the target and the camera, and moves the target position instead.
+     * Specify a negative value for dolly out.
+     * @param distance Distance of dolly.
+     * @param enableTransition Whether to move smoothly or immediately.
+     * @category Methods
+     */
+    dollyInFixed(distance, enableTransition = false) {
+        this._targetEnd.add(this._getCameraDirection(_cameraDirection).multiplyScalar(distance));
+        if (!enableTransition) {
+            this._target.copy(this._targetEnd);
+        }
+        const resolveImmediately = !enableTransition ||
+            approxEquals(this._target.x, this._targetEnd.x, this.restThreshold) &&
+                approxEquals(this._target.y, this._targetEnd.y, this.restThreshold) &&
+                approxEquals(this._target.z, this._targetEnd.z, this.restThreshold);
+        return this._createOnRestPromise(resolveImmediately);
+    }
+    /**
+     * Zoom in/out camera. The value is added to camera zoom.
+     * Limits set with `.minZoom` and `.maxZoom`
+     * @param zoomStep zoom scale
+     * @param enableTransition Whether to move smoothly or immediately
+     * @category Methods
+     */
+    zoom(zoomStep, enableTransition = false) {
+        return this.zoomTo(this._zoomEnd + zoomStep, enableTransition);
+    }
+    /**
+     * Zoom in/out camera to given scale. The value overwrites camera zoom.
+     * Limits set with .minZoom and .maxZoom
+     * @param zoom
+     * @param enableTransition
+     * @category Methods
+     */
+    zoomTo(zoom, enableTransition = false) {
+        this._isUserControllingZoom = false;
+        this._zoomEnd = clamp(zoom, this.minZoom, this.maxZoom);
+        this._needsUpdate = true;
+        if (!enableTransition) {
+            this._zoom = this._zoomEnd;
+        }
+        const resolveImmediately = !enableTransition || approxEquals(this._zoom, this._zoomEnd, this.restThreshold);
+        this._changedZoom = 0;
+        return this._createOnRestPromise(resolveImmediately);
+    }
+    /**
+     * @deprecated `pan()` has been renamed to `truck()`
+     * @category Methods
+     */
+    pan(x, y, enableTransition = false) {
+        console.warn('`pan` has been renamed to `truck`');
+        return this.truck(x, y, enableTransition);
+    }
+    /**
+     * Truck and pedestal camera using current azimuthal angle
+     * @param x Horizontal translate amount
+     * @param y Vertical translate amount
+     * @param enableTransition Whether to move smoothly or immediately
+     * @category Methods
+     */
+    truck(x, y, enableTransition = false) {
+        this._camera.updateMatrix();
+        _xColumn.setFromMatrixColumn(this._camera.matrix, 0);
+        _yColumn.setFromMatrixColumn(this._camera.matrix, 1);
+        _xColumn.multiplyScalar(x);
+        _yColumn.multiplyScalar(-y);
+        const offset = _v3A.copy(_xColumn).add(_yColumn);
+        const to = _v3B.copy(this._targetEnd).add(offset);
+        return this.moveTo(to.x, to.y, to.z, enableTransition);
+    }
+    /**
+     * Move forward / backward.
+     * @param distance Amount to move forward / backward. Negative value to move backward
+     * @param enableTransition Whether to move smoothly or immediately
+     * @category Methods
+     */
+    forward(distance, enableTransition = false) {
+        _v3A.setFromMatrixColumn(this._camera.matrix, 0);
+        _v3A.crossVectors(this._camera.up, _v3A);
+        _v3A.multiplyScalar(distance);
+        const to = _v3B.copy(this._targetEnd).add(_v3A);
+        return this.moveTo(to.x, to.y, to.z, enableTransition);
+    }
+    /**
+     * Move up / down.
+     * @param height Amount to move up / down. Negative value to move down
+     * @param enableTransition Whether to move smoothly or immediately
+     * @category Methods
+     */
+    elevate(height, enableTransition = false) {
+        _v3A.copy(this._camera.up).multiplyScalar(height);
+        return this.moveTo(this._targetEnd.x + _v3A.x, this._targetEnd.y + _v3A.y, this._targetEnd.z + _v3A.z, enableTransition);
+    }
+    /**
+     * Move target position to given point.
+     * @param x x coord to move center position
+     * @param y y coord to move center position
+     * @param z z coord to move center position
+     * @param enableTransition Whether to move smoothly or immediately
+     * @category Methods
+     */
+    moveTo(x, y, z, enableTransition = false) {
+        this._isUserControllingTruck = false;
+        const offset = _v3A.set(x, y, z).sub(this._targetEnd);
+        this._encloseToBoundary(this._targetEnd, offset, this.boundaryFriction);
+        this._needsUpdate = true;
+        if (!enableTransition) {
+            this._target.copy(this._targetEnd);
+        }
+        const resolveImmediately = !enableTransition ||
+            approxEquals(this._target.x, this._targetEnd.x, this.restThreshold) &&
+                approxEquals(this._target.y, this._targetEnd.y, this.restThreshold) &&
+                approxEquals(this._target.z, this._targetEnd.z, this.restThreshold);
+        return this._createOnRestPromise(resolveImmediately);
+    }
+    /**
+     * Look in the given point direction.
+     * @param x point x.
+     * @param y point y.
+     * @param z point z.
+     * @param enableTransition Whether to move smoothly or immediately.
+     * @returns Transition end promise
+     * @category Methods
+     */
+    lookInDirectionOf(x, y, z, enableTransition = false) {
+        const point = _v3A.set(x, y, z);
+        const direction = point.sub(this._targetEnd).normalize();
+        const position = direction.multiplyScalar(-this._sphericalEnd.radius).add(this._targetEnd);
+        return this.setPosition(position.x, position.y, position.z, enableTransition);
+    }
+    /**
+     * Fit the viewport to the box or the bounding box of the object, using the nearest axis. paddings are in unit.
+     * set `cover: true` to fill enter screen.
+     * e.g.
+     * ```
+     * cameraControls.fitToBox( myMesh );
+     * ```
+     * @param box3OrObject Axis aligned bounding box to fit the view.
+     * @param enableTransition Whether to move smoothly or immediately.
+     * @param options | `<object>` { cover: boolean, paddingTop: number, paddingLeft: number, paddingBottom: number, paddingRight: number }
+     * @returns Transition end promise
+     * @category Methods
+     */
+    fitToBox(box3OrObject, enableTransition, { cover = false, paddingLeft = 0, paddingRight = 0, paddingBottom = 0, paddingTop = 0 } = {}) {
+        const promises = [];
+        const aabb = box3OrObject.isBox3
+            ? _box3A.copy(box3OrObject)
+            : _box3A.setFromObject(box3OrObject);
+        if (aabb.isEmpty()) {
+            console.warn('camera-controls: fitTo() cannot be used with an empty box. Aborting');
+            Promise.resolve();
+        }
+        // round to closest axis ( forward | backward | right | left | top | bottom )
+        const theta = roundToStep(this._sphericalEnd.theta, PI_HALF);
+        const phi = roundToStep(this._sphericalEnd.phi, PI_HALF);
+        promises.push(this.rotateTo(theta, phi, enableTransition));
+        const normal = _v3A.setFromSpherical(this._sphericalEnd).normalize();
+        const rotation = _quaternionA.setFromUnitVectors(normal, _AXIS_Z);
+        const viewFromPolar = approxEquals(Math.abs(normal.y), 1);
+        if (viewFromPolar) {
+            rotation.multiply(_quaternionB.setFromAxisAngle(_AXIS_Y, theta));
+        }
+        rotation.multiply(this._yAxisUpSpaceInverse);
+        // make oriented bounding box
+        const bb = _box3B.makeEmpty();
+        // left bottom back corner
+        _v3B.copy(aabb.min).applyQuaternion(rotation);
+        bb.expandByPoint(_v3B);
+        // right bottom back corner
+        _v3B.copy(aabb.min).setX(aabb.max.x).applyQuaternion(rotation);
+        bb.expandByPoint(_v3B);
+        // left top back corner
+        _v3B.copy(aabb.min).setY(aabb.max.y).applyQuaternion(rotation);
+        bb.expandByPoint(_v3B);
+        // right top back corner
+        _v3B.copy(aabb.max).setZ(aabb.min.z).applyQuaternion(rotation);
+        bb.expandByPoint(_v3B);
+        // left bottom front corner
+        _v3B.copy(aabb.min).setZ(aabb.max.z).applyQuaternion(rotation);
+        bb.expandByPoint(_v3B);
+        // right bottom front corner
+        _v3B.copy(aabb.max).setY(aabb.min.y).applyQuaternion(rotation);
+        bb.expandByPoint(_v3B);
+        // left top front corner
+        _v3B.copy(aabb.max).setX(aabb.min.x).applyQuaternion(rotation);
+        bb.expandByPoint(_v3B);
+        // right top front corner
+        _v3B.copy(aabb.max).applyQuaternion(rotation);
+        bb.expandByPoint(_v3B);
+        // add padding
+        bb.min.x -= paddingLeft;
+        bb.min.y -= paddingBottom;
+        bb.max.x += paddingRight;
+        bb.max.y += paddingTop;
+        rotation.setFromUnitVectors(_AXIS_Z, normal);
+        if (viewFromPolar) {
+            rotation.premultiply(_quaternionB.invert());
+        }
+        rotation.premultiply(this._yAxisUpSpace);
+        const bbSize = bb.getSize(_v3A);
+        const center = bb.getCenter(_v3B).applyQuaternion(rotation);
+        if (isPerspectiveCamera(this._camera)) {
+            const distance = this.getDistanceToFitBox(bbSize.x, bbSize.y, bbSize.z, cover);
+            promises.push(this.moveTo(center.x, center.y, center.z, enableTransition));
+            promises.push(this.dollyTo(distance, enableTransition));
+            promises.push(this.setFocalOffset(0, 0, 0, enableTransition));
+        }
+        else if (isOrthographicCamera(this._camera)) {
+            const camera = this._camera;
+            const width = camera.right - camera.left;
+            const height = camera.top - camera.bottom;
+            const zoom = cover ? Math.max(width / bbSize.x, height / bbSize.y) : Math.min(width / bbSize.x, height / bbSize.y);
+            promises.push(this.moveTo(center.x, center.y, center.z, enableTransition));
+            promises.push(this.zoomTo(zoom, enableTransition));
+            promises.push(this.setFocalOffset(0, 0, 0, enableTransition));
+        }
+        return Promise.all(promises);
+    }
+    /**
+     * Fit the viewport to the sphere or the bounding sphere of the object.
+     * @param sphereOrMesh
+     * @param enableTransition
+     * @category Methods
+     */
+    fitToSphere(sphereOrMesh, enableTransition) {
+        const promises = [];
+        const isObject3D = 'isObject3D' in sphereOrMesh;
+        const boundingSphere = isObject3D ?
+            CameraControls.createBoundingSphere(sphereOrMesh, _sphere) :
+            _sphere.copy(sphereOrMesh);
+        promises.push(this.moveTo(boundingSphere.center.x, boundingSphere.center.y, boundingSphere.center.z, enableTransition));
+        if (isPerspectiveCamera(this._camera)) {
+            const distanceToFit = this.getDistanceToFitSphere(boundingSphere.radius);
+            promises.push(this.dollyTo(distanceToFit, enableTransition));
+        }
+        else if (isOrthographicCamera(this._camera)) {
+            const width = this._camera.right - this._camera.left;
+            const height = this._camera.top - this._camera.bottom;
+            const diameter = 2 * boundingSphere.radius;
+            const zoom = Math.min(width / diameter, height / diameter);
+            promises.push(this.zoomTo(zoom, enableTransition));
+        }
+        promises.push(this.setFocalOffset(0, 0, 0, enableTransition));
+        return Promise.all(promises);
+    }
+    /**
+     * Look at the `target` from the `position`.
+     * @param positionX
+     * @param positionY
+     * @param positionZ
+     * @param targetX
+     * @param targetY
+     * @param targetZ
+     * @param enableTransition
+     * @category Methods
+     */
+    setLookAt(positionX, positionY, positionZ, targetX, targetY, targetZ, enableTransition = false) {
+        this._isUserControllingRotate = false;
+        this._isUserControllingDolly = false;
+        this._isUserControllingTruck = false;
+        this._lastDollyDirection = DOLLY_DIRECTION.NONE;
+        this._changedDolly = 0;
+        const target = _v3B.set(targetX, targetY, targetZ);
+        const position = _v3A.set(positionX, positionY, positionZ);
+        this._targetEnd.copy(target);
+        this._sphericalEnd.setFromVector3(position.sub(target).applyQuaternion(this._yAxisUpSpace));
+        this.normalizeRotations();
+        this._needsUpdate = true;
+        if (!enableTransition) {
+            this._target.copy(this._targetEnd);
+            this._spherical.copy(this._sphericalEnd);
+        }
+        const resolveImmediately = !enableTransition ||
+            approxEquals(this._target.x, this._targetEnd.x, this.restThreshold) &&
+                approxEquals(this._target.y, this._targetEnd.y, this.restThreshold) &&
+                approxEquals(this._target.z, this._targetEnd.z, this.restThreshold) &&
+                approxEquals(this._spherical.theta, this._sphericalEnd.theta, this.restThreshold) &&
+                approxEquals(this._spherical.phi, this._sphericalEnd.phi, this.restThreshold) &&
+                approxEquals(this._spherical.radius, this._sphericalEnd.radius, this.restThreshold);
+        return this._createOnRestPromise(resolveImmediately);
+    }
+    /**
+     * Similar to setLookAt, but it interpolates between two states.
+     * @param positionAX
+     * @param positionAY
+     * @param positionAZ
+     * @param targetAX
+     * @param targetAY
+     * @param targetAZ
+     * @param positionBX
+     * @param positionBY
+     * @param positionBZ
+     * @param targetBX
+     * @param targetBY
+     * @param targetBZ
+     * @param t
+     * @param enableTransition
+     * @category Methods
+     */
+    lerpLookAt(positionAX, positionAY, positionAZ, targetAX, targetAY, targetAZ, positionBX, positionBY, positionBZ, targetBX, targetBY, targetBZ, t, enableTransition = false) {
+        this._isUserControllingRotate = false;
+        this._isUserControllingDolly = false;
+        this._isUserControllingTruck = false;
+        this._lastDollyDirection = DOLLY_DIRECTION.NONE;
+        this._changedDolly = 0;
+        const targetA = _v3A.set(targetAX, targetAY, targetAZ);
+        const positionA = _v3B.set(positionAX, positionAY, positionAZ);
+        _sphericalA.setFromVector3(positionA.sub(targetA).applyQuaternion(this._yAxisUpSpace));
+        const targetB = _v3C.set(targetBX, targetBY, targetBZ);
+        const positionB = _v3B.set(positionBX, positionBY, positionBZ);
+        _sphericalB.setFromVector3(positionB.sub(targetB).applyQuaternion(this._yAxisUpSpace));
+        this._targetEnd.copy(targetA.lerp(targetB, t)); // tricky
+        const deltaTheta = _sphericalB.theta - _sphericalA.theta;
+        const deltaPhi = _sphericalB.phi - _sphericalA.phi;
+        const deltaRadius = _sphericalB.radius - _sphericalA.radius;
+        this._sphericalEnd.set(_sphericalA.radius + deltaRadius * t, _sphericalA.phi + deltaPhi * t, _sphericalA.theta + deltaTheta * t);
+        this.normalizeRotations();
+        this._needsUpdate = true;
+        if (!enableTransition) {
+            this._target.copy(this._targetEnd);
+            this._spherical.copy(this._sphericalEnd);
+        }
+        const resolveImmediately = !enableTransition ||
+            approxEquals(this._target.x, this._targetEnd.x, this.restThreshold) &&
+                approxEquals(this._target.y, this._targetEnd.y, this.restThreshold) &&
+                approxEquals(this._target.z, this._targetEnd.z, this.restThreshold) &&
+                approxEquals(this._spherical.theta, this._sphericalEnd.theta, this.restThreshold) &&
+                approxEquals(this._spherical.phi, this._sphericalEnd.phi, this.restThreshold) &&
+                approxEquals(this._spherical.radius, this._sphericalEnd.radius, this.restThreshold);
+        return this._createOnRestPromise(resolveImmediately);
+    }
+    /**
+     * Set angle and distance by given position.
+     * An alias of `setLookAt()`, without target change. Thus keep gazing at the current target
+     * @param positionX
+     * @param positionY
+     * @param positionZ
+     * @param enableTransition
+     * @category Methods
+     */
+    setPosition(positionX, positionY, positionZ, enableTransition = false) {
+        return this.setLookAt(positionX, positionY, positionZ, this._targetEnd.x, this._targetEnd.y, this._targetEnd.z, enableTransition);
+    }
+    /**
+     * Set the target position where gaze at.
+     * An alias of `setLookAt()`, without position change. Thus keep the same position.
+     * @param targetX
+     * @param targetY
+     * @param targetZ
+     * @param enableTransition
+     * @category Methods
+     */
+    setTarget(targetX, targetY, targetZ, enableTransition = false) {
+        const pos = this.getPosition(_v3A);
+        const promise = this.setLookAt(pos.x, pos.y, pos.z, targetX, targetY, targetZ, enableTransition);
+        // see https://github.com/yomotsu/camera-controls/issues/335
+        this._sphericalEnd.phi = clamp(this._sphericalEnd.phi, this.minPolarAngle, this.maxPolarAngle);
+        return promise;
+    }
+    /**
+     * Set focal offset using the screen parallel coordinates. z doesn't affect in Orthographic as with Dolly.
+     * @param x
+     * @param y
+     * @param z
+     * @param enableTransition
+     * @category Methods
+     */
+    setFocalOffset(x, y, z, enableTransition = false) {
+        this._isUserControllingOffset = false;
+        this._focalOffsetEnd.set(x, y, z);
+        this._needsUpdate = true;
+        if (!enableTransition)
+            this._focalOffset.copy(this._focalOffsetEnd);
+        const resolveImmediately = !enableTransition ||
+            approxEquals(this._focalOffset.x, this._focalOffsetEnd.x, this.restThreshold) &&
+                approxEquals(this._focalOffset.y, this._focalOffsetEnd.y, this.restThreshold) &&
+                approxEquals(this._focalOffset.z, this._focalOffsetEnd.z, this.restThreshold);
+        return this._createOnRestPromise(resolveImmediately);
+    }
+    /**
+     * Set orbit point without moving the camera.
+     * SHOULD NOT RUN DURING ANIMATIONS. `setOrbitPoint()` will immediately fix the positions.
+     * @param targetX
+     * @param targetY
+     * @param targetZ
+     * @category Methods
+     */
+    setOrbitPoint(targetX, targetY, targetZ) {
+        this._camera.updateMatrixWorld();
+        _xColumn.setFromMatrixColumn(this._camera.matrixWorldInverse, 0);
+        _yColumn.setFromMatrixColumn(this._camera.matrixWorldInverse, 1);
+        _zColumn.setFromMatrixColumn(this._camera.matrixWorldInverse, 2);
+        const position = _v3A.set(targetX, targetY, targetZ);
+        const distance = position.distanceTo(this._camera.position);
+        const cameraToPoint = position.sub(this._camera.position);
+        _xColumn.multiplyScalar(cameraToPoint.x);
+        _yColumn.multiplyScalar(cameraToPoint.y);
+        _zColumn.multiplyScalar(cameraToPoint.z);
+        _v3A.copy(_xColumn).add(_yColumn).add(_zColumn);
+        _v3A.z = _v3A.z + distance;
+        this.dollyTo(distance, false);
+        this.setFocalOffset(-_v3A.x, _v3A.y, -_v3A.z, false);
+        this.moveTo(targetX, targetY, targetZ, false);
+    }
+    /**
+     * Set the boundary box that encloses the target of the camera. box3 is in THREE.Box3
+     * @param box3
+     * @category Methods
+     */
+    setBoundary(box3) {
+        if (!box3) {
+            this._boundary.min.set(-Infinity, -Infinity, -Infinity);
+            this._boundary.max.set(Infinity, Infinity, Infinity);
+            this._needsUpdate = true;
+            return;
+        }
+        this._boundary.copy(box3);
+        this._boundary.clampPoint(this._targetEnd, this._targetEnd);
+        this._needsUpdate = true;
+    }
+    /**
+     * Set (or unset) the current viewport.
+     * Set this when you want to use renderer viewport and .dollyToCursor feature at the same time.
+     * @param viewportOrX
+     * @param y
+     * @param width
+     * @param height
+     * @category Methods
+     */
+    setViewport(viewportOrX, y, width, height) {
+        if (viewportOrX === null) { // null
+            this._viewport = null;
+            return;
+        }
+        this._viewport = this._viewport || new THREE.Vector4();
+        if (typeof viewportOrX === 'number') { // number
+            this._viewport.set(viewportOrX, y, width, height);
+        }
+        else { // Vector4
+            this._viewport.copy(viewportOrX);
+        }
+    }
+    /**
+     * Calculate the distance to fit the box.
+     * @param width box width
+     * @param height box height
+     * @param depth box depth
+     * @returns distance
+     * @category Methods
+     */
+    getDistanceToFitBox(width, height, depth, cover = false) {
+        if (notSupportedInOrthographicCamera(this._camera, 'getDistanceToFitBox'))
+            return this._spherical.radius;
+        const boundingRectAspect = width / height;
+        const fov = this._camera.getEffectiveFOV() * DEG2RAD;
+        const aspect = this._camera.aspect;
+        const heightToFit = (cover ? boundingRectAspect > aspect : boundingRectAspect < aspect) ? height : width / aspect;
+        return heightToFit * 0.5 / Math.tan(fov * 0.5) + depth * 0.5;
+    }
+    /**
+     * Calculate the distance to fit the sphere.
+     * @param radius sphere radius
+     * @returns distance
+     * @category Methods
+     */
+    getDistanceToFitSphere(radius) {
+        if (notSupportedInOrthographicCamera(this._camera, 'getDistanceToFitSphere'))
+            return this._spherical.radius;
+        // https://stackoverflow.com/a/44849975
+        const vFOV = this._camera.getEffectiveFOV() * DEG2RAD;
+        const hFOV = Math.atan(Math.tan(vFOV * 0.5) * this._camera.aspect) * 2;
+        const fov = 1 < this._camera.aspect ? vFOV : hFOV;
+        return radius / (Math.sin(fov * 0.5));
+    }
+    /**
+     * Returns the orbit center position, where the camera looking at.
+     * @param out The receiving Vector3 instance to copy the result
+     * @param receiveEndValue Whether receive the transition end coords or current. default is `true`
+     * @category Methods
+     */
+    getTarget(out, receiveEndValue = true) {
+        const _out = !!out && out.isVector3 ? out : new THREE.Vector3();
+        return _out.copy(receiveEndValue ? this._targetEnd : this._target);
+    }
+    /**
+     * Returns the camera position.
+     * @param out The receiving Vector3 instance to copy the result
+     * @param receiveEndValue Whether receive the transition end coords or current. default is `true`
+     * @category Methods
+     */
+    getPosition(out, receiveEndValue = true) {
+        const _out = !!out && out.isVector3 ? out : new THREE.Vector3();
+        return _out.setFromSpherical(receiveEndValue ? this._sphericalEnd : this._spherical).applyQuaternion(this._yAxisUpSpaceInverse).add(receiveEndValue ? this._targetEnd : this._target);
+    }
+    /**
+     * Returns the spherical coordinates of the orbit.
+     * @param out The receiving Spherical instance to copy the result
+     * @param receiveEndValue Whether receive the transition end coords or current. default is `true`
+     * @category Methods
+     */
+    getSpherical(out, receiveEndValue = true) {
+        const _out = out || new THREE.Spherical();
+        return _out.copy(receiveEndValue ? this._sphericalEnd : this._spherical);
+    }
+    /**
+     * Returns the focal offset, which is how much the camera appears to be translated in screen parallel coordinates.
+     * @param out The receiving Vector3 instance to copy the result
+     * @param receiveEndValue Whether receive the transition end coords or current. default is `true`
+     * @category Methods
+     */
+    getFocalOffset(out, receiveEndValue = true) {
+        const _out = !!out && out.isVector3 ? out : new THREE.Vector3();
+        return _out.copy(receiveEndValue ? this._focalOffsetEnd : this._focalOffset);
+    }
+    /**
+     * Normalize camera azimuth angle rotation between 0 and 360 degrees.
+     * @category Methods
+     */
+    normalizeRotations() {
+        this._sphericalEnd.theta = this._sphericalEnd.theta % PI_2;
+        if (this._sphericalEnd.theta < 0)
+            this._sphericalEnd.theta += PI_2;
+        this._spherical.theta += PI_2 * Math.round((this._sphericalEnd.theta - this._spherical.theta) / PI_2);
+    }
+    /**
+     * stop all transitions.
+     */
+    stop() {
+        this._focalOffset.copy(this._focalOffsetEnd);
+        this._target.copy(this._targetEnd);
+        this._spherical.copy(this._sphericalEnd);
+        this._zoom = this._zoomEnd;
+    }
+    /**
+     * Reset all rotation and position to defaults.
+     * @param enableTransition
+     * @category Methods
+     */
+    reset(enableTransition = false) {
+        if (!approxEquals(this._camera.up.x, this._cameraUp0.x) ||
+            !approxEquals(this._camera.up.y, this._cameraUp0.y) ||
+            !approxEquals(this._camera.up.z, this._cameraUp0.z)) {
+            this._camera.up.copy(this._cameraUp0);
+            const position = this.getPosition(_v3A);
+            this.updateCameraUp();
+            this.setPosition(position.x, position.y, position.z);
+        }
+        const promises = [
+            this.setLookAt(this._position0.x, this._position0.y, this._position0.z, this._target0.x, this._target0.y, this._target0.z, enableTransition),
+            this.setFocalOffset(this._focalOffset0.x, this._focalOffset0.y, this._focalOffset0.z, enableTransition),
+            this.zoomTo(this._zoom0, enableTransition),
+        ];
+        return Promise.all(promises);
+    }
+    /**
+     * Set current camera position as the default position.
+     * @category Methods
+     */
+    saveState() {
+        this._cameraUp0.copy(this._camera.up);
+        this.getTarget(this._target0);
+        this.getPosition(this._position0);
+        this._zoom0 = this._zoom;
+        this._focalOffset0.copy(this._focalOffset);
+    }
+    /**
+     * Sync camera-up direction.
+     * When camera-up vector is changed, `.updateCameraUp()` must be called.
+     * @category Methods
+     */
+    updateCameraUp() {
+        this._yAxisUpSpace.setFromUnitVectors(this._camera.up, _AXIS_Y);
+        this._yAxisUpSpaceInverse.copy(this._yAxisUpSpace).invert();
+    }
+    /**
+     * Apply current camera-up direction to the camera.
+     * The orbit system will be re-initialized with the current position.
+     * @category Methods
+     */
+    applyCameraUp() {
+        const cameraDirection = _v3A.subVectors(this._target, this._camera.position).normalize();
+        // So first find the vector off to the side, orthogonal to both this.object.up and
+        // the "view" vector.
+        const side = _v3B.crossVectors(cameraDirection, this._camera.up);
+        // Then find the vector orthogonal to both this "side" vector and the "view" vector.
+        // This vector will be the new "up" vector.
+        this._camera.up.crossVectors(side, cameraDirection).normalize();
+        this._camera.updateMatrixWorld();
+        const position = this.getPosition(_v3A);
+        this.updateCameraUp();
+        this.setPosition(position.x, position.y, position.z);
+    }
+    /**
+     * Update camera position and directions.
+     * This should be called in your tick loop every time, and returns true if re-rendering is needed.
+     * @param delta
+     * @returns updated
+     * @category Methods
+     */
+    update(delta) {
+        const deltaTheta = this._sphericalEnd.theta - this._spherical.theta;
+        const deltaPhi = this._sphericalEnd.phi - this._spherical.phi;
+        const deltaRadius = this._sphericalEnd.radius - this._spherical.radius;
+        const deltaTarget = _deltaTarget.subVectors(this._targetEnd, this._target);
+        const deltaOffset = _deltaOffset.subVectors(this._focalOffsetEnd, this._focalOffset);
+        const deltaZoom = this._zoomEnd - this._zoom;
+        // update theta
+        if (approxZero(deltaTheta)) {
+            this._thetaVelocity.value = 0;
+            this._spherical.theta = this._sphericalEnd.theta;
+        }
+        else {
+            const smoothTime = this._isUserControllingRotate ? this.draggingSmoothTime : this.smoothTime;
+            this._spherical.theta = smoothDamp(this._spherical.theta, this._sphericalEnd.theta, this._thetaVelocity, smoothTime, Infinity, delta);
+            this._needsUpdate = true;
+        }
+        // update phi
+        if (approxZero(deltaPhi)) {
+            this._phiVelocity.value = 0;
+            this._spherical.phi = this._sphericalEnd.phi;
+        }
+        else {
+            const smoothTime = this._isUserControllingRotate ? this.draggingSmoothTime : this.smoothTime;
+            this._spherical.phi = smoothDamp(this._spherical.phi, this._sphericalEnd.phi, this._phiVelocity, smoothTime, Infinity, delta);
+            this._needsUpdate = true;
+        }
+        // update distance
+        if (approxZero(deltaRadius)) {
+            this._radiusVelocity.value = 0;
+            this._spherical.radius = this._sphericalEnd.radius;
+        }
+        else {
+            const smoothTime = this._isUserControllingDolly ? this.draggingSmoothTime : this.smoothTime;
+            this._spherical.radius = smoothDamp(this._spherical.radius, this._sphericalEnd.radius, this._radiusVelocity, smoothTime, this.maxSpeed, delta);
+            this._needsUpdate = true;
+        }
+        // update target position
+        if (approxZero(deltaTarget.x) && approxZero(deltaTarget.y) && approxZero(deltaTarget.z)) {
+            this._targetVelocity.set(0, 0, 0);
+            this._target.copy(this._targetEnd);
+        }
+        else {
+            const smoothTime = this._isUserControllingTruck ? this.draggingSmoothTime : this.smoothTime;
+            smoothDampVec3(this._target, this._targetEnd, this._targetVelocity, smoothTime, this.maxSpeed, delta, this._target);
+            this._needsUpdate = true;
+        }
+        // update focalOffset
+        if (approxZero(deltaOffset.x) && approxZero(deltaOffset.y) && approxZero(deltaOffset.z)) {
+            this._focalOffsetVelocity.set(0, 0, 0);
+            this._focalOffset.copy(this._focalOffsetEnd);
+        }
+        else {
+            const smoothTime = this._isUserControllingOffset ? this.draggingSmoothTime : this.smoothTime;
+            smoothDampVec3(this._focalOffset, this._focalOffsetEnd, this._focalOffsetVelocity, smoothTime, this.maxSpeed, delta, this._focalOffset);
+            this._needsUpdate = true;
+        }
+        // update zoom
+        if (approxZero(deltaZoom)) {
+            this._zoomVelocity.value = 0;
+            this._zoom = this._zoomEnd;
+        }
+        else {
+            const smoothTime = this._isUserControllingZoom ? this.draggingSmoothTime : this.smoothTime;
+            this._zoom = smoothDamp(this._zoom, this._zoomEnd, this._zoomVelocity, smoothTime, Infinity, delta);
+        }
+        if (this.dollyToCursor) {
+            if (isPerspectiveCamera(this._camera) && this._changedDolly !== 0) {
+                const dollyControlAmount = this._spherical.radius - this._lastDistance;
+                const camera = this._camera;
+                const cameraDirection = this._getCameraDirection(_cameraDirection);
+                const planeX = _v3A.copy(cameraDirection).cross(camera.up).normalize();
+                if (planeX.lengthSq() === 0)
+                    planeX.x = 1.0;
+                const planeY = _v3B.crossVectors(planeX, cameraDirection);
+                const worldToScreen = this._sphericalEnd.radius * Math.tan(camera.getEffectiveFOV() * DEG2RAD * 0.5);
+                const prevRadius = this._sphericalEnd.radius - dollyControlAmount;
+                const lerpRatio = (prevRadius - this._sphericalEnd.radius) / this._sphericalEnd.radius;
+                const cursor = _v3C.copy(this._targetEnd)
+                    .add(planeX.multiplyScalar(this._dollyControlCoord.x * worldToScreen * camera.aspect))
+                    .add(planeY.multiplyScalar(this._dollyControlCoord.y * worldToScreen));
+                const newTargetEnd = _v3A.copy(this._targetEnd).lerp(cursor, lerpRatio);
+                const isMin = this._lastDollyDirection === DOLLY_DIRECTION.IN && this._spherical.radius <= this.minDistance;
+                const isMax = this._lastDollyDirection === DOLLY_DIRECTION.OUT && this.maxDistance <= this._spherical.radius;
+                if (this.infinityDolly && (isMin || isMax)) {
+                    this._sphericalEnd.radius -= dollyControlAmount;
+                    this._spherical.radius -= dollyControlAmount;
+                    const dollyAmount = _v3B.copy(cameraDirection).multiplyScalar(-dollyControlAmount);
+                    newTargetEnd.add(dollyAmount);
+                }
+                // target position may be moved beyond boundary.
+                this._boundary.clampPoint(newTargetEnd, newTargetEnd);
+                const targetEndDiff = _v3B.subVectors(newTargetEnd, this._targetEnd);
+                this._targetEnd.copy(newTargetEnd);
+                this._target.add(targetEndDiff);
+                this._changedDolly -= dollyControlAmount;
+                if (approxZero(this._changedDolly))
+                    this._changedDolly = 0;
+            }
+            else if (isOrthographicCamera(this._camera) && this._changedZoom !== 0) {
+                const dollyControlAmount = this._zoom - this._lastZoom;
+                const camera = this._camera;
+                const worldCursorPosition = _v3A.set(this._dollyControlCoord.x, this._dollyControlCoord.y, (camera.near + camera.far) / (camera.near - camera.far)).unproject(camera);
+                const quaternion = _v3B.set(0, 0, -1).applyQuaternion(camera.quaternion);
+                const cursor = _v3C.copy(worldCursorPosition).add(quaternion.multiplyScalar(-worldCursorPosition.dot(camera.up)));
+                const prevZoom = this._zoom - dollyControlAmount;
+                const lerpRatio = -(prevZoom - this._zoom) / this._zoom;
+                // find the "distance" (aka plane constant in three.js) of Plane
+                // from a given position (this._targetEnd) and normal vector (cameraDirection)
+                // https://www.maplesoft.com/support/help/maple/view.aspx?path=MathApps%2FEquationOfAPlaneNormal#bkmrk0
+                const cameraDirection = this._getCameraDirection(_cameraDirection);
+                const prevPlaneConstant = this._targetEnd.dot(cameraDirection);
+                const newTargetEnd = _v3A.copy(this._targetEnd).lerp(cursor, lerpRatio);
+                const newPlaneConstant = newTargetEnd.dot(cameraDirection);
+                // Pull back the camera depth that has moved, to be the camera stationary as zoom
+                const pullBack = cameraDirection.multiplyScalar(newPlaneConstant - prevPlaneConstant);
+                newTargetEnd.sub(pullBack);
+                // target position may be moved beyond boundary.
+                this._boundary.clampPoint(newTargetEnd, newTargetEnd);
+                const targetEndDiff = _v3B.subVectors(newTargetEnd, this._targetEnd);
+                this._targetEnd.copy(newTargetEnd);
+                this._target.add(targetEndDiff);
+                // this._target.copy( this._targetEnd );
+                this._changedZoom -= dollyControlAmount;
+                if (approxZero(this._changedZoom))
+                    this._changedZoom = 0;
+            }
+        }
+        if (this._camera.zoom !== this._zoom) {
+            this._camera.zoom = this._zoom;
+            this._camera.updateProjectionMatrix();
+            this._updateNearPlaneCorners();
+            this._needsUpdate = true;
+        }
+        this._dragNeedsUpdate = true;
+        // collision detection
+        const maxDistance = this._collisionTest();
+        this._spherical.radius = Math.min(this._spherical.radius, maxDistance);
+        // decompose spherical to the camera position
+        this._spherical.makeSafe();
+        this._camera.position.setFromSpherical(this._spherical).applyQuaternion(this._yAxisUpSpaceInverse).add(this._target);
+        this._camera.lookAt(this._target);
+        // set offset after the orbit movement
+        const affectOffset = !approxZero(this._focalOffset.x) ||
+            !approxZero(this._focalOffset.y) ||
+            !approxZero(this._focalOffset.z);
+        if (affectOffset) {
+            _xColumn.setFromMatrixColumn(this._camera.matrix, 0);
+            _yColumn.setFromMatrixColumn(this._camera.matrix, 1);
+            _zColumn.setFromMatrixColumn(this._camera.matrix, 2);
+            _xColumn.multiplyScalar(this._focalOffset.x);
+            _yColumn.multiplyScalar(-this._focalOffset.y);
+            _zColumn.multiplyScalar(this._focalOffset.z); // notice: z-offset will not affect in Orthographic.
+            _v3A.copy(_xColumn).add(_yColumn).add(_zColumn);
+            this._camera.position.add(_v3A);
+            this._camera.updateMatrixWorld();
+        }
+        if (this._boundaryEnclosesCamera) {
+            this._encloseToBoundary(this._camera.position.copy(this._target), _v3A.setFromSpherical(this._spherical).applyQuaternion(this._yAxisUpSpaceInverse), 1.0);
+        }
+        const updated = this._needsUpdate;
+        if (updated && !this._updatedLastTime) {
+            this._hasRested = false;
+            this.dispatchEvent({ type: 'wake' });
+            this.dispatchEvent({ type: 'update' });
+        }
+        else if (updated) {
+            this.dispatchEvent({ type: 'update' });
+            if (approxZero(deltaTheta, this.restThreshold) &&
+                approxZero(deltaPhi, this.restThreshold) &&
+                approxZero(deltaRadius, this.restThreshold) &&
+                approxZero(deltaTarget.x, this.restThreshold) &&
+                approxZero(deltaTarget.y, this.restThreshold) &&
+                approxZero(deltaTarget.z, this.restThreshold) &&
+                approxZero(deltaOffset.x, this.restThreshold) &&
+                approxZero(deltaOffset.y, this.restThreshold) &&
+                approxZero(deltaOffset.z, this.restThreshold) &&
+                approxZero(deltaZoom, this.restThreshold) &&
+                !this._hasRested) {
+                this._hasRested = true;
+                this.dispatchEvent({ type: 'rest' });
+            }
+        }
+        else if (!updated && this._updatedLastTime) {
+            this.dispatchEvent({ type: 'sleep' });
+        }
+        this._lastDistance = this._spherical.radius;
+        this._lastZoom = this._zoom;
+        this._updatedLastTime = updated;
+        this._needsUpdate = false;
+        return updated;
+    }
+    /**
+     * Get all state in JSON string
+     * @category Methods
+     */
+    toJSON() {
+        return JSON.stringify({
+            enabled: this._enabled,
+            minDistance: this.minDistance,
+            maxDistance: infinityToMaxNumber(this.maxDistance),
+            minZoom: this.minZoom,
+            maxZoom: infinityToMaxNumber(this.maxZoom),
+            minPolarAngle: this.minPolarAngle,
+            maxPolarAngle: infinityToMaxNumber(this.maxPolarAngle),
+            minAzimuthAngle: infinityToMaxNumber(this.minAzimuthAngle),
+            maxAzimuthAngle: infinityToMaxNumber(this.maxAzimuthAngle),
+            smoothTime: this.smoothTime,
+            draggingSmoothTime: this.draggingSmoothTime,
+            dollySpeed: this.dollySpeed,
+            truckSpeed: this.truckSpeed,
+            dollyToCursor: this.dollyToCursor,
+            target: this._targetEnd.toArray(),
+            position: _v3A.setFromSpherical(this._sphericalEnd).add(this._targetEnd).toArray(),
+            zoom: this._zoomEnd,
+            focalOffset: this._focalOffsetEnd.toArray(),
+            target0: this._target0.toArray(),
+            position0: this._position0.toArray(),
+            zoom0: this._zoom0,
+            focalOffset0: this._focalOffset0.toArray(),
+        });
+    }
+    /**
+     * Reproduce the control state with JSON. enableTransition is where anim or not in a boolean.
+     * @param json
+     * @param enableTransition
+     * @category Methods
+     */
+    fromJSON(json, enableTransition = false) {
+        const obj = JSON.parse(json);
+        this.enabled = obj.enabled;
+        this.minDistance = obj.minDistance;
+        this.maxDistance = maxNumberToInfinity(obj.maxDistance);
+        this.minZoom = obj.minZoom;
+        this.maxZoom = maxNumberToInfinity(obj.maxZoom);
+        this.minPolarAngle = obj.minPolarAngle;
+        this.maxPolarAngle = maxNumberToInfinity(obj.maxPolarAngle);
+        this.minAzimuthAngle = maxNumberToInfinity(obj.minAzimuthAngle);
+        this.maxAzimuthAngle = maxNumberToInfinity(obj.maxAzimuthAngle);
+        this.smoothTime = obj.smoothTime;
+        this.draggingSmoothTime = obj.draggingSmoothTime;
+        this.dollySpeed = obj.dollySpeed;
+        this.truckSpeed = obj.truckSpeed;
+        this.dollyToCursor = obj.dollyToCursor;
+        this._target0.fromArray(obj.target0);
+        this._position0.fromArray(obj.position0);
+        this._zoom0 = obj.zoom0;
+        this._focalOffset0.fromArray(obj.focalOffset0);
+        this.moveTo(obj.target[0], obj.target[1], obj.target[2], enableTransition);
+        _sphericalA.setFromVector3(_v3A.fromArray(obj.position).sub(this._targetEnd).applyQuaternion(this._yAxisUpSpace));
+        this.rotateTo(_sphericalA.theta, _sphericalA.phi, enableTransition);
+        this.dollyTo(_sphericalA.radius, enableTransition);
+        this.zoomTo(obj.zoom, enableTransition);
+        this.setFocalOffset(obj.focalOffset[0], obj.focalOffset[1], obj.focalOffset[2], enableTransition);
+        this._needsUpdate = true;
+    }
+    /**
+     * Attach all internal event handlers to enable drag control.
+     * @category Methods
+     */
+    connect(domElement) {
+        if (this._domElement) {
+            console.warn('camera-controls is already connected.');
+            return;
+        }
+        domElement.setAttribute('data-camera-controls-version', VERSION);
+        this._addAllEventListeners(domElement);
+        this._getClientRect(this._elementRect);
+    }
+    /**
+     * Detach all internal event handlers to disable drag control.
+     */
+    disconnect() {
+        this.cancel();
+        this._removeAllEventListeners();
+        if (this._domElement) {
+            this._domElement.removeAttribute('data-camera-controls-version');
+            this._domElement = undefined;
+        }
+    }
+    /**
+     * Dispose the cameraControls instance itself, remove all eventListeners.
+     * @category Methods
+     */
+    dispose() {
+        // remove all user event listeners
+        this.removeAllEventListeners();
+        // remove all internal event listeners
+        this.disconnect();
+    }
+    // it's okay to expose public though
+    _getTargetDirection(out) {
+        // divide by distance to normalize, lighter than `Vector3.prototype.normalize()`
+        return out.setFromSpherical(this._spherical).divideScalar(this._spherical.radius).applyQuaternion(this._yAxisUpSpaceInverse);
+    }
+    // it's okay to expose public though
+    _getCameraDirection(out) {
+        return this._getTargetDirection(out).negate();
+    }
+    _findPointerById(pointerId) {
+        return this._activePointers.find((activePointer) => activePointer.pointerId === pointerId);
+    }
+    _findPointerByMouseButton(mouseButton) {
+        return this._activePointers.find((activePointer) => activePointer.mouseButton === mouseButton);
+    }
+    _disposePointer(pointer) {
+        this._activePointers.splice(this._activePointers.indexOf(pointer), 1);
+    }
+    _encloseToBoundary(position, offset, friction) {
+        const offsetLength2 = offset.lengthSq();
+        if (offsetLength2 === 0.0) { // sanity check
+            return position;
+        }
+        // See: https://twitter.com/FMS_Cat/status/1106508958640988161
+        const newTarget = _v3B.copy(offset).add(position); // target
+        const clampedTarget = this._boundary.clampPoint(newTarget, _v3C); // clamped target
+        const deltaClampedTarget = clampedTarget.sub(newTarget); // newTarget -> clampedTarget
+        const deltaClampedTargetLength2 = deltaClampedTarget.lengthSq(); // squared length of deltaClampedTarget
+        if (deltaClampedTargetLength2 === 0.0) { // when the position doesn't have to be clamped
+            return position.add(offset);
+        }
+        else if (deltaClampedTargetLength2 === offsetLength2) { // when the position is completely stuck
+            return position;
+        }
+        else if (friction === 0.0) {
+            return position.add(offset).add(deltaClampedTarget);
+        }
+        else {
+            const offsetFactor = 1.0 + friction * deltaClampedTargetLength2 / offset.dot(deltaClampedTarget);
+            return position
+                .add(_v3B.copy(offset).multiplyScalar(offsetFactor))
+                .add(deltaClampedTarget.multiplyScalar(1.0 - friction));
+        }
+    }
+    _updateNearPlaneCorners() {
+        if (isPerspectiveCamera(this._camera)) {
+            const camera = this._camera;
+            const near = camera.near;
+            const fov = camera.getEffectiveFOV() * DEG2RAD;
+            const heightHalf = Math.tan(fov * 0.5) * near; // near plain half height
+            const widthHalf = heightHalf * camera.aspect; // near plain half width
+            this._nearPlaneCorners[0].set(-widthHalf, -heightHalf, 0);
+            this._nearPlaneCorners[1].set(widthHalf, -heightHalf, 0);
+            this._nearPlaneCorners[2].set(widthHalf, heightHalf, 0);
+            this._nearPlaneCorners[3].set(-widthHalf, heightHalf, 0);
+        }
+        else if (isOrthographicCamera(this._camera)) {
+            const camera = this._camera;
+            const zoomInv = 1 / camera.zoom;
+            const left = camera.left * zoomInv;
+            const right = camera.right * zoomInv;
+            const top = camera.top * zoomInv;
+            const bottom = camera.bottom * zoomInv;
+            this._nearPlaneCorners[0].set(left, top, 0);
+            this._nearPlaneCorners[1].set(right, top, 0);
+            this._nearPlaneCorners[2].set(right, bottom, 0);
+            this._nearPlaneCorners[3].set(left, bottom, 0);
+        }
+    }
+    // lateUpdate
+    _collisionTest() {
+        let distance = Infinity;
+        const hasCollider = this.colliderMeshes.length >= 1;
+        if (!hasCollider)
+            return distance;
+        if (notSupportedInOrthographicCamera(this._camera, '_collisionTest'))
+            return distance;
+        const rayDirection = this._getTargetDirection(_cameraDirection);
+        _rotationMatrix.lookAt(_ORIGIN, rayDirection, this._camera.up);
+        for (let i = 0; i < 4; i++) {
+            const nearPlaneCorner = _v3B.copy(this._nearPlaneCorners[i]);
+            nearPlaneCorner.applyMatrix4(_rotationMatrix);
+            const origin = _v3C.addVectors(this._target, nearPlaneCorner);
+            _raycaster.set(origin, rayDirection);
+            _raycaster.far = this._spherical.radius + 1;
+            const intersects = _raycaster.intersectObjects(this.colliderMeshes);
+            if (intersects.length !== 0 && intersects[0].distance < distance) {
+                distance = intersects[0].distance;
+            }
+        }
+        return distance;
+    }
+    /**
+     * Get its client rect and package into given `DOMRect` .
+     */
+    _getClientRect(target) {
+        if (!this._domElement)
+            return;
+        const rect = this._domElement.getBoundingClientRect();
+        target.x = rect.left;
+        target.y = rect.top;
+        if (this._viewport) {
+            target.x += this._viewport.x;
+            target.y += rect.height - this._viewport.w - this._viewport.y;
+            target.width = this._viewport.z;
+            target.height = this._viewport.w;
+        }
+        else {
+            target.width = rect.width;
+            target.height = rect.height;
+        }
+        return target;
+    }
+    _createOnRestPromise(resolveImmediately) {
+        if (resolveImmediately)
+            return Promise.resolve();
+        this._hasRested = false;
+        this.dispatchEvent({ type: 'transitionstart' });
+        return new Promise((resolve) => {
+            const onResolve = () => {
+                this.removeEventListener('rest', onResolve);
+                resolve();
+            };
+            this.addEventListener('rest', onResolve);
+        });
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _addAllEventListeners(_domElement) { }
+    _removeAllEventListeners() { }
+    /**
+     * backward compatible
+     * @deprecated use smoothTime (in seconds) instead
+     * @category Properties
+     */
+    get dampingFactor() {
+        console.warn('.dampingFactor has been deprecated. use smoothTime (in seconds) instead.');
+        return 0;
+    }
+    /**
+     * backward compatible
+     * @deprecated use smoothTime (in seconds) instead
+     * @category Properties
+     */
+    set dampingFactor(_) {
+        console.warn('.dampingFactor has been deprecated. use smoothTime (in seconds) instead.');
+    }
+    /**
+     * backward compatible
+     * @deprecated use draggingSmoothTime (in seconds) instead
+     * @category Properties
+     */
+    get draggingDampingFactor() {
+        console.warn('.draggingDampingFactor has been deprecated. use draggingSmoothTime (in seconds) instead.');
+        return 0;
+    }
+    /**
+     * backward compatible
+     * @deprecated use draggingSmoothTime (in seconds) instead
+     * @category Properties
+     */
+    set draggingDampingFactor(_) {
+        console.warn('.draggingDampingFactor has been deprecated. use draggingSmoothTime (in seconds) instead.');
+    }
+    static createBoundingSphere(object3d, out = new THREE.Sphere()) {
+        const boundingSphere = out;
+        const center = boundingSphere.center;
+        _box3A.makeEmpty();
+        // find the center
+        object3d.traverseVisible((object) => {
+            if (!object.isMesh)
+                return;
+            _box3A.expandByObject(object);
+        });
+        _box3A.getCenter(center);
+        // find the radius
+        let maxRadiusSq = 0;
+        object3d.traverseVisible((object) => {
+            if (!object.isMesh)
+                return;
+            const mesh = object;
+            if (!mesh.geometry)
+                return;
+            const geometry = mesh.geometry.clone();
+            geometry.applyMatrix4(mesh.matrixWorld);
+            const bufferGeometry = geometry;
+            const position = bufferGeometry.attributes.position;
+            for (let i = 0, l = position.count; i < l; i++) {
+                _v3A.fromBufferAttribute(position, i);
+                maxRadiusSq = Math.max(maxRadiusSq, center.distanceToSquared(_v3A));
+            }
+        });
+        boundingSphere.radius = Math.sqrt(maxRadiusSq);
+        return boundingSphere;
+    }
+}
 
-		this.getPolarAngle = function () {
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/
 
-			return spherical.phi;
-
-		};
-
-		this.getAzimuthalAngle = function () {
-
-			return spherical.theta;
-
-		};
-
-		this.getDistance = function () {
-
-			return this.object.position.distanceTo( this.target );
-
-		};
-
-		this.listenToKeyEvents = function ( domElement ) {
-
-			domElement.addEventListener( 'keydown', onKeyDown );
-			this._domElementKeyEvents = domElement;
-
-		};
-
-		this.stopListenToKeyEvents = function () {
-
-			this._domElementKeyEvents.removeEventListener( 'keydown', onKeyDown );
-			this._domElementKeyEvents = null;
-
-		};
-
-		this.saveState = function () {
-
-			scope.target0.copy( scope.target );
-			scope.position0.copy( scope.object.position );
-			scope.zoom0 = scope.object.zoom;
-
-		};
-
-		this.reset = function () {
-
-			scope.target.copy( scope.target0 );
-			scope.object.position.copy( scope.position0 );
-			scope.object.zoom = scope.zoom0;
-
-			scope.object.updateProjectionMatrix();
-			scope.dispatchEvent( _changeEvent );
-
-			scope.update();
-
-			state = STATE.NONE;
-
-		};
-
-		// this method is exposed, but perhaps it would be better if we can make it private...
-		this.update = function () {
-
-			const offset = new Vector3();
-
-			// so camera.up is the orbit axis
-			const quat = new Quaternion().setFromUnitVectors( object.up, new Vector3( 0, 1, 0 ) );
-			const quatInverse = quat.clone().invert();
-
-			const lastPosition = new Vector3();
-			const lastQuaternion = new Quaternion();
-			const lastTargetPosition = new Vector3();
-
-			const twoPI = 2 * Math.PI;
-
-			return function update( deltaTime = null ) {
-
-				const position = scope.object.position;
-
-				offset.copy( position ).sub( scope.target );
-
-				// rotate offset to "y-axis-is-up" space
-				offset.applyQuaternion( quat );
-
-				// angle from z-axis around y-axis
-				spherical.setFromVector3( offset );
-
-				if ( scope.autoRotate && state === STATE.NONE ) {
-
-					rotateLeft( getAutoRotationAngle( deltaTime ) );
-
-				}
-
-				if ( scope.enableDamping ) {
-
-					spherical.theta += sphericalDelta.theta * scope.dampingFactor;
-					spherical.phi += sphericalDelta.phi * scope.dampingFactor;
-
-				} else {
-
-					spherical.theta += sphericalDelta.theta;
-					spherical.phi += sphericalDelta.phi;
-
-				}
-
-				// restrict theta to be between desired limits
-
-				let min = scope.minAzimuthAngle;
-				let max = scope.maxAzimuthAngle;
-
-				if ( isFinite( min ) && isFinite( max ) ) {
-
-					if ( min < - Math.PI ) min += twoPI; else if ( min > Math.PI ) min -= twoPI;
-
-					if ( max < - Math.PI ) max += twoPI; else if ( max > Math.PI ) max -= twoPI;
-
-					if ( min <= max ) {
-
-						spherical.theta = Math.max( min, Math.min( max, spherical.theta ) );
-
-					} else {
-
-						spherical.theta = ( spherical.theta > ( min + max ) / 2 ) ?
-							Math.max( min, spherical.theta ) :
-							Math.min( max, spherical.theta );
-
-					}
-
-				}
-
-				// restrict phi to be between desired limits
-				spherical.phi = Math.max( scope.minPolarAngle, Math.min( scope.maxPolarAngle, spherical.phi ) );
-
-				spherical.makeSafe();
-
-
-				// move target to panned location
-
-				if ( scope.enableDamping === true ) {
-
-					scope.target.addScaledVector( panOffset, scope.dampingFactor );
-
-				} else {
-
-					scope.target.add( panOffset );
-
-				}
-
-				// adjust the camera position based on zoom only if we're not zooming to the cursor or if it's an ortho camera
-				// we adjust zoom later in these cases
-				if ( scope.zoomToCursor && performCursorZoom || scope.object.isOrthographicCamera ) {
-
-					spherical.radius = clampDistance( spherical.radius );
-
-				} else {
-
-					spherical.radius = clampDistance( spherical.radius * scale );
-
-				}
-
-
-				offset.setFromSpherical( spherical );
-
-				// rotate offset back to "camera-up-vector-is-up" space
-				offset.applyQuaternion( quatInverse );
-
-				position.copy( scope.target ).add( offset );
-
-				scope.object.lookAt( scope.target );
-
-				if ( scope.enableDamping === true ) {
-
-					sphericalDelta.theta *= ( 1 - scope.dampingFactor );
-					sphericalDelta.phi *= ( 1 - scope.dampingFactor );
-
-					panOffset.multiplyScalar( 1 - scope.dampingFactor );
-
-				} else {
-
-					sphericalDelta.set( 0, 0, 0 );
-
-					panOffset.set( 0, 0, 0 );
-
-				}
-
-				// adjust camera position
-				let zoomChanged = false;
-				if ( scope.zoomToCursor && performCursorZoom ) {
-
-					let newRadius = null;
-					if ( scope.object.isPerspectiveCamera ) {
-
-						// move the camera down the pointer ray
-						// this method avoids floating point error
-						const prevRadius = offset.length();
-						newRadius = clampDistance( prevRadius * scale );
-
-						const radiusDelta = prevRadius - newRadius;
-						scope.object.position.addScaledVector( dollyDirection, radiusDelta );
-						scope.object.updateMatrixWorld();
-
-					} else if ( scope.object.isOrthographicCamera ) {
-
-						// adjust the ortho camera position based on zoom changes
-						const mouseBefore = new Vector3( mouse.x, mouse.y, 0 );
-						mouseBefore.unproject( scope.object );
-
-						scope.object.zoom = Math.max( scope.minZoom, Math.min( scope.maxZoom, scope.object.zoom / scale ) );
-						scope.object.updateProjectionMatrix();
-						zoomChanged = true;
-
-						const mouseAfter = new Vector3( mouse.x, mouse.y, 0 );
-						mouseAfter.unproject( scope.object );
-
-						scope.object.position.sub( mouseAfter ).add( mouseBefore );
-						scope.object.updateMatrixWorld();
-
-						newRadius = offset.length();
-
-					} else {
-
-						console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - zoom to cursor disabled.' );
-						scope.zoomToCursor = false;
-
-					}
-
-					// handle the placement of the target
-					if ( newRadius !== null ) {
-
-						if ( this.screenSpacePanning ) {
-
-							// position the orbit target in front of the new camera position
-							scope.target.set( 0, 0, - 1 )
-								.transformDirection( scope.object.matrix )
-								.multiplyScalar( newRadius )
-								.add( scope.object.position );
-
-						} else {
-
-							// get the ray and translation plane to compute target
-							_ray.origin.copy( scope.object.position );
-							_ray.direction.set( 0, 0, - 1 ).transformDirection( scope.object.matrix );
-
-							// if the camera is 20 degrees above the horizon then don't adjust the focus target to avoid
-							// extremely large values
-							if ( Math.abs( scope.object.up.dot( _ray.direction ) ) < TILT_LIMIT ) {
-
-								object.lookAt( scope.target );
-
-							} else {
-
-								_plane.setFromNormalAndCoplanarPoint( scope.object.up, scope.target );
-								_ray.intersectPlane( _plane, scope.target );
-
-							}
-
-						}
-
-					}
-
-				} else if ( scope.object.isOrthographicCamera ) {
-
-					scope.object.zoom = Math.max( scope.minZoom, Math.min( scope.maxZoom, scope.object.zoom / scale ) );
-					scope.object.updateProjectionMatrix();
-					zoomChanged = true;
-
-				}
-
-				scale = 1;
-				performCursorZoom = false;
-
-				// update condition is:
-				// min(camera displacement, camera rotation in radians)^2 > EPS
-				// using small-angle approximation cos(x/2) = 1 - x^2 / 8
-
-				if ( zoomChanged ||
-					lastPosition.distanceToSquared( scope.object.position ) > EPS ||
-					8 * ( 1 - lastQuaternion.dot( scope.object.quaternion ) ) > EPS ||
-					lastTargetPosition.distanceToSquared( scope.target ) > 0 ) {
-
-					scope.dispatchEvent( _changeEvent );
-
-					lastPosition.copy( scope.object.position );
-					lastQuaternion.copy( scope.object.quaternion );
-					lastTargetPosition.copy( scope.target );
-
-					zoomChanged = false;
-
-					return true;
-
-				}
-
-				return false;
-
-			};
-
-		}();
-
-		this.dispose = function () {
-
-			scope.domElement.removeEventListener( 'contextmenu', onContextMenu );
-
-			scope.domElement.removeEventListener( 'pointerdown', onPointerDown );
-			scope.domElement.removeEventListener( 'pointercancel', onPointerUp );
-			scope.domElement.removeEventListener( 'wheel', onMouseWheel );
-
-			scope.domElement.removeEventListener( 'pointermove', onPointerMove );
-			scope.domElement.removeEventListener( 'pointerup', onPointerUp );
-
-
-			if ( scope._domElementKeyEvents !== null ) {
-
-				scope._domElementKeyEvents.removeEventListener( 'keydown', onKeyDown );
-				scope._domElementKeyEvents = null;
-
-			}
-
-			//scope.dispatchEvent( { type: 'dispose' } ); // should this be added here?
-
-		};
-
-		//
-		// internals
-		//
-
-		const scope = this;
-
-		const STATE = {
-			NONE: - 1,
-			ROTATE: 0,
-			DOLLY: 1,
-			PAN: 2,
-			TOUCH_ROTATE: 3,
-			TOUCH_PAN: 4,
-			TOUCH_DOLLY_PAN: 5,
-			TOUCH_DOLLY_ROTATE: 6
-		};
-
-		let state = STATE.NONE;
-
-		const EPS = 0.000001;
-
-		// current position in spherical coordinates
-		const spherical = new Spherical();
-		const sphericalDelta = new Spherical();
-
-		let scale = 1;
-		const panOffset = new Vector3();
-
-		const rotateStart = new Vector2();
-		const rotateEnd = new Vector2();
-		const rotateDelta = new Vector2();
-
-		const panStart = new Vector2();
-		const panEnd = new Vector2();
-		const panDelta = new Vector2();
-
-		const dollyStart = new Vector2();
-		const dollyEnd = new Vector2();
-		const dollyDelta = new Vector2();
-
-		const dollyDirection = new Vector3();
-		const mouse = new Vector2();
-		let performCursorZoom = false;
-
-		const pointers = [];
-		const pointerPositions = {};
-
-		function getAutoRotationAngle( deltaTime ) {
-
-			if ( deltaTime !== null ) {
-
-				return ( 2 * Math.PI / 60 * scope.autoRotateSpeed ) * deltaTime;
-
-			} else {
-
-				return 2 * Math.PI / 60 / 60 * scope.autoRotateSpeed;
-
-			}
-
-		}
-
-		function getZoomScale() {
-
-			return Math.pow( 0.95, scope.zoomSpeed );
-
-		}
-
-		function rotateLeft( angle ) {
-
-			sphericalDelta.theta -= angle;
-
-		}
-
-		function rotateUp( angle ) {
-
-			sphericalDelta.phi -= angle;
-
-		}
-
-		const panLeft = function () {
-
-			const v = new Vector3();
-
-			return function panLeft( distance, objectMatrix ) {
-
-				v.setFromMatrixColumn( objectMatrix, 0 ); // get X column of objectMatrix
-				v.multiplyScalar( - distance );
-
-				panOffset.add( v );
-
-			};
-
-		}();
-
-		const panUp = function () {
-
-			const v = new Vector3();
-
-			return function panUp( distance, objectMatrix ) {
-
-				if ( scope.screenSpacePanning === true ) {
-
-					v.setFromMatrixColumn( objectMatrix, 1 );
-
-				} else {
-
-					v.setFromMatrixColumn( objectMatrix, 0 );
-					v.crossVectors( scope.object.up, v );
-
-				}
-
-				v.multiplyScalar( distance );
-
-				panOffset.add( v );
-
-			};
-
-		}();
-
-		// deltaX and deltaY are in pixels; right and down are positive
-		const pan = function () {
-
-			const offset = new Vector3();
-
-			return function pan( deltaX, deltaY ) {
-
-				const element = scope.domElement;
-
-				if ( scope.object.isPerspectiveCamera ) {
-
-					// perspective
-					const position = scope.object.position;
-					offset.copy( position ).sub( scope.target );
-					let targetDistance = offset.length();
-
-					// half of the fov is center to top of screen
-					targetDistance *= Math.tan( ( scope.object.fov / 2 ) * Math.PI / 180.0 );
-
-					// we use only clientHeight here so aspect ratio does not distort speed
-					panLeft( 2 * deltaX * targetDistance / element.clientHeight, scope.object.matrix );
-					panUp( 2 * deltaY * targetDistance / element.clientHeight, scope.object.matrix );
-
-				} else if ( scope.object.isOrthographicCamera ) {
-
-					// orthographic
-					panLeft( deltaX * ( scope.object.right - scope.object.left ) / scope.object.zoom / element.clientWidth, scope.object.matrix );
-					panUp( deltaY * ( scope.object.top - scope.object.bottom ) / scope.object.zoom / element.clientHeight, scope.object.matrix );
-
-				} else {
-
-					// camera neither orthographic nor perspective
-					console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - pan disabled.' );
-					scope.enablePan = false;
-
-				}
-
-			};
-
-		}();
-
-		function dollyOut( dollyScale ) {
-
-			if ( scope.object.isPerspectiveCamera || scope.object.isOrthographicCamera ) {
-
-				scale /= dollyScale;
-
-			} else {
-
-				console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.' );
-				scope.enableZoom = false;
-
-			}
-
-		}
-
-		function dollyIn( dollyScale ) {
-
-			if ( scope.object.isPerspectiveCamera || scope.object.isOrthographicCamera ) {
-
-				scale *= dollyScale;
-
-			} else {
-
-				console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.' );
-				scope.enableZoom = false;
-
-			}
-
-		}
-
-		function updateMouseParameters( event ) {
-
-			if ( ! scope.zoomToCursor ) {
-
-				return;
-
-			}
-
-			performCursorZoom = true;
-
-			const rect = scope.domElement.getBoundingClientRect();
-			const x = event.clientX - rect.left;
-			const y = event.clientY - rect.top;
-			const w = rect.width;
-			const h = rect.height;
-
-			mouse.x = ( x / w ) * 2 - 1;
-			mouse.y = - ( y / h ) * 2 + 1;
-
-			dollyDirection.set( mouse.x, mouse.y, 1 ).unproject( scope.object ).sub( scope.object.position ).normalize();
-
-		}
-
-		function clampDistance( dist ) {
-
-			return Math.max( scope.minDistance, Math.min( scope.maxDistance, dist ) );
-
-		}
-
-		//
-		// event callbacks - update the object state
-		//
-
-		function handleMouseDownRotate( event ) {
-
-			rotateStart.set( event.clientX, event.clientY );
-
-		}
-
-		function handleMouseDownDolly( event ) {
-
-			updateMouseParameters( event );
-			dollyStart.set( event.clientX, event.clientY );
-
-		}
-
-		function handleMouseDownPan( event ) {
-
-			panStart.set( event.clientX, event.clientY );
-
-		}
-
-		function handleMouseMoveRotate( event ) {
-
-			rotateEnd.set( event.clientX, event.clientY );
-
-			rotateDelta.subVectors( rotateEnd, rotateStart ).multiplyScalar( scope.rotateSpeed );
-
-			const element = scope.domElement;
-
-			rotateLeft( 2 * Math.PI * rotateDelta.x / element.clientHeight ); // yes, height
-
-			rotateUp( 2 * Math.PI * rotateDelta.y / element.clientHeight );
-
-			rotateStart.copy( rotateEnd );
-
-			scope.update();
-
-		}
-
-		function handleMouseMoveDolly( event ) {
-
-			dollyEnd.set( event.clientX, event.clientY );
-
-			dollyDelta.subVectors( dollyEnd, dollyStart );
-
-			if ( dollyDelta.y > 0 ) {
-
-				dollyOut( getZoomScale() );
-
-			} else if ( dollyDelta.y < 0 ) {
-
-				dollyIn( getZoomScale() );
-
-			}
-
-			dollyStart.copy( dollyEnd );
-
-			scope.update();
-
-		}
-
-		function handleMouseMovePan( event ) {
-
-			panEnd.set( event.clientX, event.clientY );
-
-			panDelta.subVectors( panEnd, panStart ).multiplyScalar( scope.panSpeed );
-
-			pan( panDelta.x, panDelta.y );
-
-			panStart.copy( panEnd );
-
-			scope.update();
-
-		}
-
-		function handleMouseWheel( event ) {
-
-			updateMouseParameters( event );
-
-			if ( event.deltaY < 0 ) {
-
-				dollyIn( getZoomScale() );
-
-			} else if ( event.deltaY > 0 ) {
-
-				dollyOut( getZoomScale() );
-
-			}
-
-			scope.update();
-
-		}
-
-		function handleKeyDown( event ) {
-
-			let needsUpdate = false;
-
-			switch ( event.code ) {
-
-				case scope.keys.UP:
-
-					if ( event.ctrlKey || event.metaKey || event.shiftKey ) {
-
-						rotateUp( 2 * Math.PI * scope.rotateSpeed / scope.domElement.clientHeight );
-
-					} else {
-
-						pan( 0, scope.keyPanSpeed );
-
-					}
-
-					needsUpdate = true;
-					break;
-
-				case scope.keys.BOTTOM:
-
-					if ( event.ctrlKey || event.metaKey || event.shiftKey ) {
-
-						rotateUp( - 2 * Math.PI * scope.rotateSpeed / scope.domElement.clientHeight );
-
-					} else {
-
-						pan( 0, - scope.keyPanSpeed );
-
-					}
-
-					needsUpdate = true;
-					break;
-
-				case scope.keys.LEFT:
-
-					if ( event.ctrlKey || event.metaKey || event.shiftKey ) {
-
-						rotateLeft( 2 * Math.PI * scope.rotateSpeed / scope.domElement.clientHeight );
-
-					} else {
-
-						pan( scope.keyPanSpeed, 0 );
-
-					}
-
-					needsUpdate = true;
-					break;
-
-				case scope.keys.RIGHT:
-
-					if ( event.ctrlKey || event.metaKey || event.shiftKey ) {
-
-						rotateLeft( - 2 * Math.PI * scope.rotateSpeed / scope.domElement.clientHeight );
-
-					} else {
-
-						pan( - scope.keyPanSpeed, 0 );
-
-					}
-
-					needsUpdate = true;
-					break;
-
-			}
-
-			if ( needsUpdate ) {
-
-				// prevent the browser from scrolling on cursor keys
-				event.preventDefault();
-
-				scope.update();
-
-			}
-
-
-		}
-
-		function handleTouchStartRotate() {
-
-			if ( pointers.length === 1 ) {
-
-				rotateStart.set( pointers[ 0 ].pageX, pointers[ 0 ].pageY );
-
-			} else {
-
-				const x = 0.5 * ( pointers[ 0 ].pageX + pointers[ 1 ].pageX );
-				const y = 0.5 * ( pointers[ 0 ].pageY + pointers[ 1 ].pageY );
-
-				rotateStart.set( x, y );
-
-			}
-
-		}
-
-		function handleTouchStartPan() {
-
-			if ( pointers.length === 1 ) {
-
-				panStart.set( pointers[ 0 ].pageX, pointers[ 0 ].pageY );
-
-			} else {
-
-				const x = 0.5 * ( pointers[ 0 ].pageX + pointers[ 1 ].pageX );
-				const y = 0.5 * ( pointers[ 0 ].pageY + pointers[ 1 ].pageY );
-
-				panStart.set( x, y );
-
-			}
-
-		}
-
-		function handleTouchStartDolly() {
-
-			const dx = pointers[ 0 ].pageX - pointers[ 1 ].pageX;
-			const dy = pointers[ 0 ].pageY - pointers[ 1 ].pageY;
-
-			const distance = Math.sqrt( dx * dx + dy * dy );
-
-			dollyStart.set( 0, distance );
-
-		}
-
-		function handleTouchStartDollyPan() {
-
-			if ( scope.enableZoom ) handleTouchStartDolly();
-
-			if ( scope.enablePan ) handleTouchStartPan();
-
-		}
-
-		function handleTouchStartDollyRotate() {
-
-			if ( scope.enableZoom ) handleTouchStartDolly();
-
-			if ( scope.enableRotate ) handleTouchStartRotate();
-
-		}
-
-		function handleTouchMoveRotate( event ) {
-
-			if ( pointers.length == 1 ) {
-
-				rotateEnd.set( event.pageX, event.pageY );
-
-			} else {
-
-				const position = getSecondPointerPosition( event );
-
-				const x = 0.5 * ( event.pageX + position.x );
-				const y = 0.5 * ( event.pageY + position.y );
-
-				rotateEnd.set( x, y );
-
-			}
-
-			rotateDelta.subVectors( rotateEnd, rotateStart ).multiplyScalar( scope.rotateSpeed );
-
-			const element = scope.domElement;
-
-			rotateLeft( 2 * Math.PI * rotateDelta.x / element.clientHeight ); // yes, height
-
-			rotateUp( 2 * Math.PI * rotateDelta.y / element.clientHeight );
-
-			rotateStart.copy( rotateEnd );
-
-		}
-
-		function handleTouchMovePan( event ) {
-
-			if ( pointers.length === 1 ) {
-
-				panEnd.set( event.pageX, event.pageY );
-
-			} else {
-
-				const position = getSecondPointerPosition( event );
-
-				const x = 0.5 * ( event.pageX + position.x );
-				const y = 0.5 * ( event.pageY + position.y );
-
-				panEnd.set( x, y );
-
-			}
-
-			panDelta.subVectors( panEnd, panStart ).multiplyScalar( scope.panSpeed );
-
-			pan( panDelta.x, panDelta.y );
-
-			panStart.copy( panEnd );
-
-		}
-
-		function handleTouchMoveDolly( event ) {
-
-			const position = getSecondPointerPosition( event );
-
-			const dx = event.pageX - position.x;
-			const dy = event.pageY - position.y;
-
-			const distance = Math.sqrt( dx * dx + dy * dy );
-
-			dollyEnd.set( 0, distance );
-
-			dollyDelta.set( 0, Math.pow( dollyEnd.y / dollyStart.y, scope.zoomSpeed ) );
-
-			dollyOut( dollyDelta.y );
-
-			dollyStart.copy( dollyEnd );
-
-		}
-
-		function handleTouchMoveDollyPan( event ) {
-
-			if ( scope.enableZoom ) handleTouchMoveDolly( event );
-
-			if ( scope.enablePan ) handleTouchMovePan( event );
-
-		}
-
-		function handleTouchMoveDollyRotate( event ) {
-
-			if ( scope.enableZoom ) handleTouchMoveDolly( event );
-
-			if ( scope.enableRotate ) handleTouchMoveRotate( event );
-
-		}
-
-		//
-		// event handlers - FSM: listen for events and reset state
-		//
-
-		function onPointerDown( event ) {
-
-			if ( scope.enabled === false ) return;
-
-			if ( pointers.length === 0 ) {
-
-				scope.domElement.setPointerCapture( event.pointerId );
-
-				scope.domElement.addEventListener( 'pointermove', onPointerMove );
-				scope.domElement.addEventListener( 'pointerup', onPointerUp );
-
-			}
-
-			//
-
-			addPointer( event );
-
-			if ( event.pointerType === 'touch' ) {
-
-				onTouchStart( event );
-
-			} else {
-
-				onMouseDown( event );
-
-			}
-
-		}
-
-		function onPointerMove( event ) {
-
-			if ( scope.enabled === false ) return;
-
-			if ( event.pointerType === 'touch' ) {
-
-				onTouchMove( event );
-
-			} else {
-
-				onMouseMove( event );
-
-			}
-
-		}
-
-		function onPointerUp( event ) {
-
-			removePointer( event );
-
-			if ( pointers.length === 0 ) {
-
-				scope.domElement.releasePointerCapture( event.pointerId );
-
-				scope.domElement.removeEventListener( 'pointermove', onPointerMove );
-				scope.domElement.removeEventListener( 'pointerup', onPointerUp );
-
-			}
-
-			scope.dispatchEvent( _endEvent );
-
-			state = STATE.NONE;
-
-		}
-
-		function onMouseDown( event ) {
-
-			let mouseAction;
-
-			switch ( event.button ) {
-
-				case 0:
-
-					mouseAction = scope.mouseButtons.LEFT;
-					break;
-
-				case 1:
-
-					mouseAction = scope.mouseButtons.MIDDLE;
-					break;
-
-				case 2:
-
-					mouseAction = scope.mouseButtons.RIGHT;
-					break;
-
-				default:
-
-					mouseAction = - 1;
-
-			}
-
-			switch ( mouseAction ) {
-
-				case MOUSE.DOLLY:
-
-					if ( scope.enableZoom === false ) return;
-
-					handleMouseDownDolly( event );
-
-					state = STATE.DOLLY;
-
-					break;
-
-				case MOUSE.ROTATE:
-
-					if ( event.ctrlKey || event.metaKey || event.shiftKey ) {
-
-						if ( scope.enablePan === false ) return;
-
-						handleMouseDownPan( event );
-
-						state = STATE.PAN;
-
-					} else {
-
-						if ( scope.enableRotate === false ) return;
-
-						handleMouseDownRotate( event );
-
-						state = STATE.ROTATE;
-
-					}
-
-					break;
-
-				case MOUSE.PAN:
-
-					if ( event.ctrlKey || event.metaKey || event.shiftKey ) {
-
-						if ( scope.enableRotate === false ) return;
-
-						handleMouseDownRotate( event );
-
-						state = STATE.ROTATE;
-
-					} else {
-
-						if ( scope.enablePan === false ) return;
-
-						handleMouseDownPan( event );
-
-						state = STATE.PAN;
-
-					}
-
-					break;
-
-				default:
-
-					state = STATE.NONE;
-
-			}
-
-			if ( state !== STATE.NONE ) {
-
-				scope.dispatchEvent( _startEvent );
-
-			}
-
-		}
-
-		function onMouseMove( event ) {
-
-			switch ( state ) {
-
-				case STATE.ROTATE:
-
-					if ( scope.enableRotate === false ) return;
-
-					handleMouseMoveRotate( event );
-
-					break;
-
-				case STATE.DOLLY:
-
-					if ( scope.enableZoom === false ) return;
-
-					handleMouseMoveDolly( event );
-
-					break;
-
-				case STATE.PAN:
-
-					if ( scope.enablePan === false ) return;
-
-					handleMouseMovePan( event );
-
-					break;
-
-			}
-
-		}
-
-		function onMouseWheel( event ) {
-
-			if ( scope.enabled === false || scope.enableZoom === false || state !== STATE.NONE ) return;
-
-			event.preventDefault();
-
-			scope.dispatchEvent( _startEvent );
-
-			handleMouseWheel( event );
-
-			scope.dispatchEvent( _endEvent );
-
-		}
-
-		function onKeyDown( event ) {
-
-			if ( scope.enabled === false || scope.enablePan === false ) return;
-
-			handleKeyDown( event );
-
-		}
-
-		function onTouchStart( event ) {
-
-			trackPointer( event );
-
-			switch ( pointers.length ) {
-
-				case 1:
-
-					switch ( scope.touches.ONE ) {
-
-						case TOUCH.ROTATE:
-
-							if ( scope.enableRotate === false ) return;
-
-							handleTouchStartRotate();
-
-							state = STATE.TOUCH_ROTATE;
-
-							break;
-
-						case TOUCH.PAN:
-
-							if ( scope.enablePan === false ) return;
-
-							handleTouchStartPan();
-
-							state = STATE.TOUCH_PAN;
-
-							break;
-
-						default:
-
-							state = STATE.NONE;
-
-					}
-
-					break;
-
-				case 2:
-
-					switch ( scope.touches.TWO ) {
-
-						case TOUCH.DOLLY_PAN:
-
-							if ( scope.enableZoom === false && scope.enablePan === false ) return;
-
-							handleTouchStartDollyPan();
-
-							state = STATE.TOUCH_DOLLY_PAN;
-
-							break;
-
-						case TOUCH.DOLLY_ROTATE:
-
-							if ( scope.enableZoom === false && scope.enableRotate === false ) return;
-
-							handleTouchStartDollyRotate();
-
-							state = STATE.TOUCH_DOLLY_ROTATE;
-
-							break;
-
-						default:
-
-							state = STATE.NONE;
-
-					}
-
-					break;
-
-				default:
-
-					state = STATE.NONE;
-
-			}
-
-			if ( state !== STATE.NONE ) {
-
-				scope.dispatchEvent( _startEvent );
-
-			}
-
-		}
-
-		function onTouchMove( event ) {
-
-			trackPointer( event );
-
-			switch ( state ) {
-
-				case STATE.TOUCH_ROTATE:
-
-					if ( scope.enableRotate === false ) return;
-
-					handleTouchMoveRotate( event );
-
-					scope.update();
-
-					break;
-
-				case STATE.TOUCH_PAN:
-
-					if ( scope.enablePan === false ) return;
-
-					handleTouchMovePan( event );
-
-					scope.update();
-
-					break;
-
-				case STATE.TOUCH_DOLLY_PAN:
-
-					if ( scope.enableZoom === false && scope.enablePan === false ) return;
-
-					handleTouchMoveDollyPan( event );
-
-					scope.update();
-
-					break;
-
-				case STATE.TOUCH_DOLLY_ROTATE:
-
-					if ( scope.enableZoom === false && scope.enableRotate === false ) return;
-
-					handleTouchMoveDollyRotate( event );
-
-					scope.update();
-
-					break;
-
-				default:
-
-					state = STATE.NONE;
-
-			}
-
-		}
-
-		function onContextMenu( event ) {
-
-			if ( scope.enabled === false ) return;
-
-			event.preventDefault();
-
-		}
-
-		function addPointer( event ) {
-
-			pointers.push( event );
-
-		}
-
-		function removePointer( event ) {
-
-			delete pointerPositions[ event.pointerId ];
-
-			for ( let i = 0; i < pointers.length; i ++ ) {
-
-				if ( pointers[ i ].pointerId == event.pointerId ) {
-
-					pointers.splice( i, 1 );
-					return;
-
-				}
-
-			}
-
-		}
-
-		function trackPointer( event ) {
-
-			let position = pointerPositions[ event.pointerId ];
-
-			if ( position === undefined ) {
-
-				position = new Vector2();
-				pointerPositions[ event.pointerId ] = position;
-
-			}
-
-			position.set( event.pageX, event.pageY );
-
-		}
-
-		function getSecondPointerPosition( event ) {
-
-			const pointer = ( event.pointerId === pointers[ 0 ].pointerId ) ? pointers[ 1 ] : pointers[ 0 ];
-
-			return pointerPositions[ pointer.pointerId ];
-
-		}
-
-		//
-
-		scope.domElement.addEventListener( 'contextmenu', onContextMenu );
-
-		scope.domElement.addEventListener( 'pointerdown', onPointerDown );
-		scope.domElement.addEventListener( 'pointercancel', onPointerUp );
-		scope.domElement.addEventListener( 'wheel', onMouseWheel, { passive: false } );
-
-		// force an update at start
-
-		this.update();
-
-	}
-
-}
-
-// This Source Code Form is subject to the terms of the Mozilla Public
-// License, v2.0. If a copy of the MPL was not distributed with this
-// file, You can obtain one at http://mozilla.org/MPL/2.0/
-
-const DEFAULT_CAMERA_STATE = {
-  distance: 20,
-  perspective: true,
-  phi: 60,
-  target: [0, 0, 0],
-  targetOffset: [0, 0, 0],
-  targetOrientation: [0, 0, 0, 1],
-  thetaOffset: 45,
-  fovy: 45,
-  near: 0.5,
-  far: 5000
-};
+const DEFAULT_CAMERA_STATE = {
+  distance: 20,
+  perspective: true,
+  phi: 60,
+  target: [0, 0, 0],
+  targetOffset: [0, 0, 0],
+  targetOrientation: [0, 0, 0, 1],
+  thetaOffset: 45,
+  fovy: 45,
+  near: 0.5,
+  far: 5000
+};
 
 // This Source Code Form is subject to the terms of the Mozilla Public
 // License, v2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/
-
 const DISPLAY_FRAME_NOT_FOUND = "DISPLAY_FRAME_NOT_FOUND";
-const UNIT_X = new Vector3(1, 0, 0);
-const UNIT_Z = new Vector3(0, 0, 1);
-const PI_2 = Math.PI / 2;
-
-// used for holding unfollowPoseSnapshot in render frame every new frame
 const snapshotInRenderFrame = makePose();
 const tempVec3$1 = new Vector3();
 const tempSpherical = new Spherical();
-const tempEuler$1 = new Euler();
 const FOLLOW_TF_PATH$1 = ["general", "followTf"];
+const AZIMUTH_SENSITIVITY = 0.25;
+const POLAR_SENSITIVITY = 0.25;
+const MIN_POLAR_DEG = 1;
+const MAX_POLAR_DEG = 179;
 class CameraStateSettings extends SceneExtension {
-  // The frameId's of the fixed and render frames used to create the current unfollowPoseSnapshot
   #unfollowSnapshotFrameIds;
-
-  // The pose of the render frame in the fixed frame when following was disabled
-  // This is used to position and orient the camera from the fixed frame in the render frame
-
   #controls;
   #isUpdatingCameraState = false;
   #canvas;
-
-  // This group is used to transform the cameras based on the Frame follow mode
-  // quaternion is affected in stationary and position-only follow modes
-  // both position and quaternion of the group are affected in stationary mode
   #cameraGroup;
   #perspectiveCamera;
   #orthographicCamera;
   #aspect;
+  #lastTargetOffset = new Vector3();
+  #isDraggingForRotation = false;
+  #lastMouseX = 1;
+  #lastMouseY = 1;
   constructor(renderer, canvas, aspect) {
     super("foxglove.CameraStateSettings", renderer);
-
-    // for Frame settings, we need to listen to the transform tree to update settings when new possible display frames are present
-    renderer.on("transformTreeUpdated", this.#handleTransformTreeUpdated);
-    renderer.on("cameraMove", this.#handleCameraMove);
-    renderer.settings.errors.on("update", this.#handleErrorChange);
-    renderer.settings.errors.on("clear", this.#handleErrorChange);
-    renderer.settings.errors.on("remove", this.#handleErrorChange);
+    this.renderer = renderer;
+    CameraControls.install({
+      THREE: THREE$1
+    });
+    this.renderer.on("transformTreeUpdated", this.#handleTransformTreeUpdated);
+    this.renderer.settings.errors.on("update", this.#handleErrorChange);
+    this.renderer.settings.errors.on("clear", this.#handleErrorChange);
+    this.renderer.settings.errors.on("remove", this.#handleErrorChange);
     this.#canvas = canvas;
     this.#perspectiveCamera = new PerspectiveCamera();
     this.#orthographicCamera = new OrthographicCamera();
@@ -58887,38 +60049,70 @@ class CameraStateSettings extends SceneExtension {
     this.#cameraGroup.add(this.#perspectiveCamera);
     this.#cameraGroup.add(this.#orthographicCamera);
     this.add(this.#cameraGroup);
-    this.#controls = new OrbitControls(this.#perspectiveCamera, this.#canvas);
-    this.#controls.screenSpacePanning = true; // only allow panning in the XY plane
-    this.#controls.mouseButtons.LEFT = MOUSE.PAN;
-    this.#controls.mouseButtons.RIGHT = MOUSE.ROTATE;
-    this.#controls.touches.ONE = TOUCH.PAN;
-    this.#controls.touches.TWO = TOUCH.DOLLY_ROTATE;
-    this.#controls.addEventListener("change", () => {
-      if (!this.#isUpdatingCameraState) {
-        renderer.emit("cameraMove", renderer);
-      }
-    });
-
-    // Make the canvas able to receive keyboard events and setup WASD controls
+    this.#controls = new CameraControls(this.#perspectiveCamera, this.#canvas);
+    this.#controls.dampingFactor = 0.05;
+    this.#controls.mouseButtons.left = CameraControls.ACTION.NONE;
+    this.#controls.mouseButtons.right = CameraControls.ACTION.TRUCK;
+    this.#controls.mouseButtons.wheel = CameraControls.ACTION.ZOOM;
+    this.#controls.touches.one = CameraControls.ACTION.TOUCH_SCREEN_PAN;
+    this.#controls.infinityDolly = true;
+    this.#perspectiveCamera.rotation.set(0, Math.PI, Math.PI);
+    this.#perspectiveCamera.up.set(0, -1, 0);
+    this.#controls.update(0);
+    const euler = new Euler().setFromQuaternion(this.#perspectiveCamera.quaternion, "ZYX");
+    this.#perspectiveCamera.quaternion.setFromEuler(euler);
+    this.#controls.addEventListener("update", this.#handleControlsUpdate);
+    const controls = this.#controls;
+    const animate = () => {
+      controls.update(1.0);
+      requestAnimationFrame(animate);
+    };
+    animate();
     canvas.tabIndex = 1000;
     this.#aspect = aspect;
-    this.#controls.keys = {
-      LEFT: "KeyA",
-      RIGHT: "KeyD",
-      UP: "KeyS",
-      BOTTOM: "KeyW"
-    };
-    this.#controls.listenToKeyEvents(canvas);
+    canvas.addEventListener("mousedown", this.#handleMouseDown);
+    canvas.addEventListener("mousemove", this.#handleMouseMove);
+    window.addEventListener("mouseup", this.#handleMouseUp);
+    canvas.addEventListener("mouseleave", this.#handleMouseLeave);
+    canvas.addEventListener("contextmenu", event => event.preventDefault());
+
+    // Set camera state to default
+    setTimeout(() => {
+      const activeCamera = this.getActiveCamera();
+      activeCamera.updateMatrixWorld(true);
+      this.renderer.queueAnimationFrame();
+      this.#applyCameraStateToControls(this.renderer.config.cameraState, undefined);
+      this.#controls.update(0);
+    }, 10);
+    // Rotates the camera to the default position
+    setTimeout(() => {
+      const currentTarget = new Vector3();
+      this.#controls.getTarget(currentTarget);
+      const currentPosition = new Vector3();
+      this.#perspectiveCamera.getWorldPosition(currentPosition);
+      const offset = currentPosition.clone().sub(currentTarget);
+      const spherical = new Spherical();
+      spherical.setFromVector3(offset);
+      spherical.theta = Math.max(0.001, Math.min(Math.PI - 0.001, spherical.theta + Math.PI));
+      const newOffset = new Vector3().setFromSpherical(spherical);
+      const newCameraPosition = currentTarget.clone().add(newOffset);
+      this.#controls.setLookAt(newCameraPosition.x, newCameraPosition.y, newCameraPosition.z, currentTarget.x, currentTarget.y, currentTarget.z, false);
+      this.#controls.update(0);
+      this.renderer.queueAnimationFrame();
+    }, 100);
   }
   dispose() {
-    // for camera settings
-    this.renderer.off("cameraMove", this.#handleCameraMove);
-
-    // for frame settings
     this.renderer.off("transformTreeUpdated", this.#handleTransformTreeUpdated);
     this.renderer.settings.errors.off("update", this.#handleErrorChange);
     this.renderer.settings.errors.off("clear", this.#handleErrorChange);
     this.renderer.settings.errors.off("remove", this.#handleErrorChange);
+    this.#controls.removeEventListener("update", this.#handleControlsUpdate);
+    this.#canvas.removeEventListener("mousedown", this.#handleMouseDown);
+    this.#canvas.removeEventListener("mousemove", this.#handleMouseMove);
+    window.removeEventListener("mouseup", this.#handleMouseUp);
+    this.#canvas.removeEventListener("mouseleave", this.#handleMouseLeave);
+    this.#canvas.removeEventListener("contextmenu", event => event.preventDefault());
+    this.#controls.dispose();
     super.dispose();
   }
   settingsNodes() {
@@ -58926,9 +60120,7 @@ class CameraStateSettings extends SceneExtension {
   }
   #cameraSettingsNode() {
     const config = this.renderer.config;
-    const {
-      cameraState: camera
-    } = config;
+    const camera = config.cameraState;
     const handler = this.handleSettingsAction;
     return {
       path: ["cameraState"],
@@ -58953,7 +60145,7 @@ class CameraStateSettings extends SceneExtension {
             input: "number",
             step: 1,
             precision: PRECISION_DISTANCE,
-            value: camera.distance
+            value: camera.distance ?? config.cameraState.distance
           },
           perspective: {
             label: t$1("threeDee:perspective"),
@@ -58965,23 +60157,23 @@ class CameraStateSettings extends SceneExtension {
             input: "vec3",
             labels: ["X", "Y", "Z"],
             precision: PRECISION_DISTANCE,
-            value: [...camera.targetOffset]
+            value: [...(camera.targetOffset ?? config.cameraState.targetOffset)]
           },
           thetaOffset: {
             label: t$1("threeDee:theta"),
             input: "number",
             step: 1,
             precision: PRECISION_DEGREES,
-            value: camera.thetaOffset
+            value: camera.thetaOffset ?? config.cameraState.thetaOffset
+          },
+          phi: {
+            label: t$1("threeDee:phi"),
+            input: "number",
+            step: 1,
+            precision: PRECISION_DEGREES,
+            value: camera.phi ?? config.cameraState.phi
           },
           ...(camera.perspective && {
-            phi: {
-              label: t$1("threeDee:phi"),
-              input: "number",
-              step: 1,
-              precision: PRECISION_DEGREES,
-              value: camera.phi
-            },
             fovy: {
               label: t$1("threeDee:fovy"),
               input: "number",
@@ -59002,7 +60194,7 @@ class CameraStateSettings extends SceneExtension {
             input: "number",
             step: 1,
             precision: PRECISION_DISTANCE,
-            value: camera.far
+            value: camera.far ?? config.cameraState.far
           }
         }
       }
@@ -59011,14 +60203,9 @@ class CameraStateSettings extends SceneExtension {
   #frameSettingsNode() {
     const config = this.renderer.config;
     const handler = this.handleSettingsAction;
-
-    // If the user-selected frame does not exist, show it in the dropdown
-    // anyways. A settings node error will be displayed
     let followTfOptions = this.renderer.coordinateFrameList;
     const followFrameId = this.renderer.followFrameId;
     this.#updateFollowTfError();
-
-    // always show current config value if it exists
     const followTfValue = config.followTf ?? followFrameId;
     if (followTfValue != undefined && !this.renderer.transformTree.hasFrame(followTfValue)) {
       followTfOptions = [{
@@ -59037,7 +60224,7 @@ class CameraStateSettings extends SceneExtension {
       label: t$1("threeDee:fixed"),
       value: "follow-none"
     }];
-    const followModeValue = this.renderer.config.followMode;
+    const followModeValue = config.followMode;
     return {
       path: ["general"],
       node: {
@@ -59066,71 +60253,68 @@ class CameraStateSettings extends SceneExtension {
   }
   handleSettingsAction = action => {
     if (action.action === "perform-node-action" && action.payload.id === "reset-camera") {
+      const previousState = cloneDeep(this.renderer.config.cameraState);
       this.renderer.updateConfig(draft => {
         draft.cameraState = cloneDeep(DEFAULT_CAMERA_STATE);
       });
-      this.updateSettingsTree();
+      this.#applyCameraStateToControls(this.renderer.config.cameraState, previousState);
+      this.renderer.emit("cameraMove", this.renderer);
       return;
     }
     if (action.action !== "update" || action.payload.path.length === 0) {
       return;
     }
     const {
-      path: [category],
       path,
       value
     } = action.payload;
-
-    // camera settings
+    const category = path[0];
     if (category === "cameraState") {
+      const previousState = cloneDeep(this.renderer.config.cameraState);
       if (path[1] === "syncCamera") {
-        // Update the configuration. This is done manually since syncCamera is under `scene`, not `cameraState`
         this.renderer.updateConfig(draft => {
           draft.scene.syncCamera = value;
         });
       } else {
-        this.renderer.updateConfig(draft => set$4(draft, path, value));
+        this.renderer.updateConfig(draft => {
+          set$4(draft, path, value);
+        });
+        this.#applyCameraStateToControls(this.renderer.config.cameraState, previousState);
+        this.renderer.emit("cameraMove", this.renderer);
       }
-      this.updateSettingsTree();
     }
-
-    // frame settings
     if (category === "general") {
+      const previousState = cloneDeep(this.renderer.config.cameraState);
       if (path[1] === "followTf") {
         const followTf = value;
-        // Update the configuration. This is done manually since followTf is at the top level of
-        // config, not under `general`
         this.renderer.updateConfig(draft => {
           draft.followTf = followTf;
         });
         this.#updateFollowFrameId();
-        this.renderer.settings.errors.clearPath(["general", "followTf"]);
+        this.renderer.settings.errors.clearPath(FOLLOW_TF_PATH$1);
       } else if (path[1] === "followMode") {
         const followMode = value;
-        // Update the configuration. This is done manually since followMode is at the top level of
-        // config, not under `general`
         this.renderer.updateConfig(draft => {
-          // any follow -> stationary no clear
-          // stationary -> any follow clear offset (center on frame)
-          if (draft.followMode === "follow-none") {
+          if (draft.followMode === "follow-none" || followMode === "follow-pose") {
             draft.cameraState.targetOffset = [...DEFAULT_CAMERA_STATE.targetOffset];
-            draft.cameraState.thetaOffset = DEFAULT_CAMERA_STATE.thetaOffset;
-          } else if (followMode === "follow-pose") {
+          }
+          if (followMode === "follow-pose") {
             draft.cameraState.thetaOffset = DEFAULT_CAMERA_STATE.thetaOffset;
           }
           draft.followMode = followMode;
         });
+        this.#applyCameraStateToControls(this.renderer.config.cameraState, previousState);
+        this.renderer.emit("cameraMove", this.renderer);
+      } else {
+        this.renderer.updateConfig(draft => {
+          set$4(draft, path, value);
+        });
       }
-      this.updateSettingsTree();
     }
   };
-
-  // this extension has  NO RENDERABLES so the parent startFrame would do nothing
   startFrame(currentTime, renderFrameId, fixedFrameId) {
     const followMode = this.renderer.config.followMode;
-    if (followMode === "follow-pose" ||
-    // we don't need the unfollow pose snapshot when there are no transforms
-    fixedFrameId === CoordinateFrame.FALLBACK_FRAME_ID || renderFrameId === CoordinateFrame.FALLBACK_FRAME_ID) {
+    if (followMode === "follow-pose" || fixedFrameId === CoordinateFrame.FALLBACK_FRAME_ID || renderFrameId === CoordinateFrame.FALLBACK_FRAME_ID) {
       this.#unfollowSnapshotFrameIds = undefined;
       this.unfollowPoseSnapshot = undefined;
       this.#cameraGroup.position.set(0, 0, 0);
@@ -59140,34 +60324,78 @@ class CameraStateSettings extends SceneExtension {
     const poseSnapshot = this.#getUnfollowPoseSnapshot(fixedFrameId, renderFrameId, currentTime);
     const transformTree = this.renderer.transformTree;
     if (poseSnapshot) {
-      // transform position of snapshot in fixed frame to the render frame
       const appliedTransform = Boolean(transformTree.apply(snapshotInRenderFrame, poseSnapshot, renderFrameId, fixedFrameId, fixedFrameId, currentTime, currentTime));
       if (!appliedTransform) {
         return;
       }
-      /**
-       * the application of the unfollowPoseSnapshot position and orientation
-       * components makes the camera position and rotation static relative to the fixed frame.
-       * So when the display frame changes the angle of the camera relative
-       * to the scene will not change because only the snapshotPose orientation is applied
-       */
       if (followMode === "follow-position") {
-        // only make orientation static/stationary in this mode
-        // the position still follows the frame
         this.#cameraGroup.position.set(0, 0, 0);
       } else {
         this.#cameraGroup.position.set(snapshotInRenderFrame.position.x, snapshotInRenderFrame.position.y, snapshotInRenderFrame.position.z);
       }
-      // this negates the rotation of the changes in renderFrame
       this.#cameraGroup.quaternion.set(snapshotInRenderFrame.orientation.x, snapshotInRenderFrame.orientation.y, snapshotInRenderFrame.orientation.z, snapshotInRenderFrame.orientation.w);
     }
   }
-  #handleCameraMove = () => {
-    this.updateSettingsTree();
+  #handleControlsUpdate = () => {
+    if (!this.#isUpdatingCameraState && !this.#isDraggingForRotation) {
+      const newDistance = this.#controls.distance;
+      this.#controls.getTarget(tempVec3$1);
+      const state = this.renderer.config.cameraState;
+      const distChanged = Math.abs(state.distance - newDistance) > 1e-6;
+      const targetChanged = !isEqual(state.targetOffset, [tempVec3$1.x, tempVec3$1.y, tempVec3$1.z]);
+      if (distChanged || targetChanged) {
+        this.renderer.updateConfig(draft => {
+          if (distChanged) draft.cameraState.distance = newDistance;
+          if (targetChanged) draft.cameraState.targetOffset = [tempVec3$1.x, tempVec3$1.y, tempVec3$1.z];
+        });
+        this.#lastTargetOffset.copy(tempVec3$1);
+        this.renderer.emit("cameraMove", this.renderer);
+      }
+    }
+  };
+  #handleMouseDown = event => {
+    if (event.button === 0) {
+      event.preventDefault();
+      this.#isDraggingForRotation = true;
+      this.#lastMouseX = event.clientX;
+      this.#lastMouseY = event.clientY;
+    }
+  };
+  #handleMouseMove = event => {
+    if (!this.#isDraggingForRotation) {
+      return;
+    }
+    const deltaX = event.clientX - this.#lastMouseX;
+    const deltaY = event.clientY - this.#lastMouseY;
+    this.#lastMouseX = event.clientX;
+    this.#lastMouseY = event.clientY;
+    if (deltaX === 0 && deltaY === 0) {
+      return;
+    }
+    const deltaAzimuth = -deltaX * AZIMUTH_SENSITIVITY;
+    const deltaPolar = deltaY * POLAR_SENSITIVITY;
+    const previousState = cloneDeep(this.renderer.config.cameraState);
+    this.renderer.updateConfig(draft => {
+      let currentPhi = draft.cameraState.phi + deltaPolar;
+      currentPhi = Math.max(MIN_POLAR_DEG, Math.min(MAX_POLAR_DEG, currentPhi));
+      draft.cameraState.phi = currentPhi;
+      draft.cameraState.thetaOffset += deltaAzimuth;
+    });
+    this.#applyCameraStateToControls(this.renderer.config.cameraState, previousState);
+    this.renderer.emit("cameraMove", this.renderer);
+  };
+  #handleMouseUp = event => {
+    if (event.button === 0 && this.#isDraggingForRotation) {
+      this.#isDraggingForRotation = false;
+    }
+  };
+  #handleMouseLeave = () => {
+    if (this.#isDraggingForRotation) {
+      this.#isDraggingForRotation = false;
+    }
   };
   #handleTransformTreeUpdated = () => {
     this.#updateFollowFrameId();
-    this.updateSettingsTree();
   };
   #updateFollowFrameId() {
     const {
@@ -59182,11 +60410,8 @@ class CameraStateSettings extends SceneExtension {
       this.renderer.setFollowFrameId(followTf);
       return;
     }
-
-    // No valid renderFrameId set, or new frames have been added, fall back to selecting the
-    // heuristically most valid frame (if any frames are present)
-    const followFrameId = transformTree.getDefaultFollowFrameId();
-    this.renderer.setFollowFrameId(followFrameId);
+    const defaultFollowFrameId = transformTree.getDefaultFollowFrameId();
+    this.renderer.setFollowFrameId(defaultFollowFrameId);
   }
   #updateFollowTfError = () => {
     const {
@@ -59196,27 +60421,23 @@ class CameraStateSettings extends SceneExtension {
       transformTree
     } = this.renderer;
     if (followTf != undefined) {
-      const followTfFrameExists = transformTree.hasFrame(followTf);
-      if (followTfFrameExists) {
+      if (transformTree.hasFrame(followTf)) {
         this.renderer.settings.errors.remove(FOLLOW_TF_PATH$1, DISPLAY_FRAME_NOT_FOUND);
       } else {
         this.renderer.settings.errors.add(FOLLOW_TF_PATH$1, DISPLAY_FRAME_NOT_FOUND, t$1("threeDee:frameNotFound", {
           frameId: followTf
         }));
       }
+    } else {
+      this.renderer.settings.errors.remove(FOLLOW_TF_PATH$1, DISPLAY_FRAME_NOT_FOUND);
     }
   };
-  #handleErrorChange = () => {
-    this.updateSettingsTree();
-  };
-
-  // Redefine follow pose snapshot whenever renderFrame or fixedFrame changes
+  #handleErrorChange = () => {};
   #getUnfollowPoseSnapshot(fixedFrameId, renderFrameId, currentTime) {
     const transformTree = this.renderer.transformTree;
-    if (this.#unfollowSnapshotFrameIds?.fixed !== fixedFrameId || this.#unfollowSnapshotFrameIds.render !== renderFrameId) {
+    if (this.#unfollowSnapshotFrameIds?.fixed !== fixedFrameId || this.#unfollowSnapshotFrameIds?.render !== renderFrameId) {
       this.unfollowPoseSnapshot = makePose();
-      // record the pose of the center of the render frame in fixed frame into the snapshot
-      transformTree.apply(this.unfollowPoseSnapshot, this.unfollowPoseSnapshot, fixedFrameId, fixedFrameId, renderFrameId, currentTime, currentTime);
+      transformTree.apply(this.unfollowPoseSnapshot, makePose(), fixedFrameId, renderFrameId, fixedFrameId, currentTime, currentTime);
       this.#unfollowSnapshotFrameIds = {
         fixed: fixedFrameId,
         render: renderFrameId
@@ -59232,74 +60453,58 @@ class CameraStateSettings extends SceneExtension {
     this.setCameraState(this.renderer.config.cameraState);
   }
   getCameraState() {
-    const config = this.renderer.config;
-    return {
-      perspective: config.cameraState.perspective,
-      distance: this.#controls.getDistance(),
-      phi: MathUtils.radToDeg(this.#controls.getPolarAngle()),
-      thetaOffset: MathUtils.radToDeg(-this.#controls.getAzimuthalAngle()),
-      targetOffset: [this.#controls.target.x, this.#controls.target.y, this.#controls.target.z],
-      target: config.cameraState.target,
-      targetOrientation: config.cameraState.targetOrientation,
-      fovy: config.cameraState.fovy,
-      near: config.cameraState.near,
-      far: config.cameraState.far
-    };
+    return cloneDeep(this.renderer.config.cameraState);
   }
   setCameraState(cameraState) {
+    const previousState = cloneDeep(this.renderer.config.cameraState);
     this.#isUpdatingCameraState = true;
-    this.#updateCameras(cameraState);
-    // only active for follow pose mode because it introduces strange behavior into the other modes
-    // due to the fact that they are manipulating the camera after update with the `cameraGroup`
-    if (this.renderer.config.followMode === "follow-pose") {
-      this.#controls.update();
-    }
+    this.#updateRawCameras(cameraState);
+    this.#applyCameraStateToControls(cameraState, previousState);
     this.#isUpdatingCameraState = false;
   }
-
-  /** Translate a CameraState to the three.js coordinate system */
-  #updateCameras(cameraState) {
-    const targetOffset = tempVec3$1;
-    const config = this.renderer.config;
-    targetOffset.fromArray(cameraState.targetOffset);
-    const phi = MathUtils.degToRad(cameraState.phi);
-    const theta = -MathUtils.degToRad(cameraState.thetaOffset);
-
-    // Always update the perspective camera even if the current mode is orthographic. This is needed
-    // to make the OrbitControls work properly since they track the perspective camera.
-    // https://github.com/foxglove/studio/issues/4138
-
-    // Convert the camera spherical coordinates (radius, phi, theta) to Cartesian (X, Y, Z)
-    tempSpherical.set(cameraState.distance, phi, theta);
-    this.#perspectiveCamera.position.setFromSpherical(tempSpherical).applyAxisAngle(UNIT_X, PI_2);
-    this.#perspectiveCamera.position.add(targetOffset);
-
-    // Convert the camera spherical coordinates (phi, theta) to a quaternion rotation
-    this.#perspectiveCamera.quaternion.setFromEuler(tempEuler$1.set(phi, 0, theta, "ZYX"));
+  #updateRawCameras(cameraState) {
     this.#perspectiveCamera.fov = cameraState.fovy;
     this.#perspectiveCamera.near = cameraState.near;
     this.#perspectiveCamera.far = cameraState.far;
     this.#perspectiveCamera.aspect = this.#aspect;
     this.#perspectiveCamera.updateProjectionMatrix();
-    this.#controls.target.copy(targetOffset);
+    if (!cameraState.perspective) {
+      const orthoHeight = cameraState.distance * Math.tan(MathUtils.degToRad(cameraState.fovy * 0.5)) * 2;
+      const orthoWidth = orthoHeight * this.#aspect;
+      this.#orthographicCamera.left = -orthoWidth / 2;
+      this.#orthographicCamera.right = orthoWidth / 2;
+      this.#orthographicCamera.top = orthoHeight / 2;
+      this.#orthographicCamera.bottom = -orthoHeight / 2;
+      this.#orthographicCamera.near = cameraState.near;
+      this.#orthographicCamera.far = cameraState.far;
+      this.#orthographicCamera.updateProjectionMatrix();
+    }
+  }
+  #applyCameraStateToControls(cameraState, previousState) {
+    const targetOffset = tempVec3$1.fromArray(cameraState.targetOffset);
+    const distance = cameraState.distance;
+    const phiRad = MathUtils.degToRad(cameraState.phi);
+    const azimuthRad = -MathUtils.degToRad(cameraState.thetaOffset);
+    const propsChanged = !previousState || Math.abs(previousState.distance - distance) > 1e-6 || Math.abs(previousState.phi - cameraState.phi) > 1e-6 || Math.abs(previousState.thetaOffset - cameraState.thetaOffset) > 1e-6 || !isEqual(previousState.targetOffset, cameraState.targetOffset);
+    if (propsChanged) {
+      tempSpherical.set(distance, phiRad, azimuthRad);
+      const cameraPosition = new Vector3().setFromSpherical(tempSpherical);
+      cameraPosition.add(targetOffset);
+      this.#controls.setLookAt(cameraPosition.x, cameraPosition.y, cameraPosition.z, targetOffset.x, targetOffset.y, targetOffset.z, false);
+      this.#lastTargetOffset.copy(targetOffset);
+    }
     if (cameraState.perspective) {
-      // Unlock the polar angle (pitch axis)
       this.#controls.minPolarAngle = 0;
       this.#controls.maxPolarAngle = Math.PI;
     } else {
-      // Lock the polar angle during 2D mode
-      const curPolarAngle = MathUtils.degToRad(config.cameraState.phi);
-      this.#controls.minPolarAngle = this.#controls.maxPolarAngle = curPolarAngle;
-      this.#orthographicCamera.position.set(targetOffset.x, targetOffset.y, cameraState.far / 2);
-      this.#orthographicCamera.quaternion.setFromAxisAngle(UNIT_Z, theta);
-      this.#orthographicCamera.left = -cameraState.distance / 2 * this.#aspect;
-      this.#orthographicCamera.right = cameraState.distance / 2 * this.#aspect;
-      this.#orthographicCamera.top = cameraState.distance / 2;
-      this.#orthographicCamera.bottom = -cameraState.distance / 2;
-      this.#orthographicCamera.near = cameraState.near;
-      this.#orthographicCamera.far = cameraState.far;
-      this.#orthographicCamera.updateProjectionMatrix();
+      this.#controls.minPolarAngle = 0;
+      this.#controls.maxPolarAngle = Math.PI;
+      this.#controls.getPosition(this.#orthographicCamera.position);
+      this.#controls.getTarget(tempVec3$1);
+      this.#orthographicCamera.lookAt(tempVec3$1);
+      this.#orthographicCamera.updateMatrixWorld();
     }
+    this.#controls.update(0);
   }
 }