@luxonis/visualizer-protobuf 2.22.0 → 2.23.0

package/dist/packages/studio-base/src/panels/ThreeDeeRender/renderables/CameraStateSettings.js

@@ -4,45 +4,43 @@
 import { t } from "i18next";
 import * as _ from "lodash-es";
 import * as THREE from "three";
-import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
+import CameraControls from "camera-controls";
 import { CoordinateFrame, makePose, } from "@foxglove/studio-base/panels/ThreeDeeRender/transforms";
 import { SceneExtension } from "../SceneExtension";
 import { DEFAULT_CAMERA_STATE } from "../camera";
 import { PRECISION_DEGREES, PRECISION_DISTANCE } from "../settings";
 const DISPLAY_FRAME_NOT_FOUND = "DISPLAY_FRAME_NOT_FOUND";
-const UNIT_X = new THREE.Vector3(1, 0, 0);
-const UNIT_Z = new THREE.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 = new THREE.Vector3();
 const tempSpherical = new THREE.Spherical();
-const tempEuler = new THREE.Euler();
 const FOLLOW_TF_PATH = ["general", "followTf"];
+const AZIMUTH_SENSITIVITY = 0.25;
+const POLAR_SENSITIVITY = 0.25;
+const MIN_POLAR_DEG = 1;
+const MAX_POLAR_DEG = 179;
 export class CameraStateSettings extends SceneExtension {
-    // The frameId's of the fixed and render frames used to create the current unfollowPoseSnapshot
+    renderer;
     #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
     unfollowPoseSnapshot;
     #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 THREE.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 });
+        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 THREE.PerspectiveCamera();
         this.#orthographicCamera = new THREE.OrthographicCamera();
@@ -50,31 +48,69 @@ export 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 = THREE.MOUSE.PAN;
-        this.#controls.mouseButtons.RIGHT = THREE.MOUSE.ROTATE;
-        this.#controls.touches.ONE = THREE.TOUCH.PAN;
-        this.#controls.touches.TWO = THREE.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 THREE.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 THREE.Vector3();
+            this.#controls.getTarget(currentTarget);
+            const currentPosition = new THREE.Vector3();
+            this.#perspectiveCamera.getWorldPosition(currentPosition);
+            const offset = currentPosition.clone().sub(currentTarget);
+            const spherical = new THREE.Spherical();
+            spherical.setFromVector3(offset);
+            spherical.theta = Math.max(0.001, Math.min(Math.PI - 0.001, spherical.theta + Math.PI));
+            const newOffset = new THREE.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() {
@@ -82,13 +118,15 @@ export 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"],
             node: {
                 label: t("threeDee:view"),
-                actions: [{ type: "action", id: "reset-camera", label: t("threeDee:reset") }],
+                actions: [
+                    { type: "action", id: "reset-camera", label: t("threeDee:reset") },
+                ],
                 handler,
                 fields: {
                     syncCamera: {
@@ -103,7 +141,7 @@ export class CameraStateSettings extends SceneExtension {
                         input: "number",
                         step: 1,
                         precision: PRECISION_DISTANCE,
-                        value: camera.distance,
+                        value: camera.distance ?? config.cameraState.distance,
                     },
                     perspective: {
                         label: t("threeDee:perspective"),
@@ -115,23 +153,25 @@ export 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("threeDee:theta"),
                         input: "number",
                         step: 1,
                         precision: PRECISION_DEGREES,
-                        value: camera.thetaOffset,
+                        value: camera.thetaOffset ?? config.cameraState.thetaOffset,
+                    },
+                    phi: {
+                        label: t("threeDee:phi"),
+                        input: "number",
+                        step: 1,
+                        precision: PRECISION_DEGREES,
+                        value: camera.phi ?? config.cameraState.phi,
                     },
                     ...(camera.perspective && {
-                        phi: {
-                            label: t("threeDee:phi"),
-                            input: "number",
-                            step: 1,
-                            precision: PRECISION_DEGREES,
-                            value: camera.phi,
-                        },
                         fovy: {
                             label: t("threeDee:fovy"),
                             input: "number",
@@ -152,7 +192,7 @@ export class CameraStateSettings extends SceneExtension {
                         input: "number",
                         step: 1,
                         precision: PRECISION_DISTANCE,
-                        value: camera.far,
+                        value: camera.far ?? config.cameraState.far,
                     },
                 },
             },
@@ -161,16 +201,17 @@ export 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)) {
+        if (followTfValue != undefined &&
+            !this.renderer.transformTree.hasFrame(followTfValue)) {
             followTfOptions = [
-                { label: CoordinateFrame.DisplayName(followTfValue), value: followTfValue },
+                {
+                    label: CoordinateFrame.DisplayName(followTfValue),
+                    value: followTfValue,
+                },
                 ...followTfOptions,
             ];
         }
@@ -180,7 +221,7 @@ export class CameraStateSettings extends SceneExtension {
             { label: t("threeDee:position"), value: "follow-position" },
             { label: t("threeDee:fixed"), value: "follow-none" },
         ];
-        const followModeValue = this.renderer.config.followMode;
+        const followModeValue = config.followMode;
         return {
             path: ["general"],
             node: {
@@ -208,67 +249,73 @@ export class CameraStateSettings extends SceneExtension {
         };
     }
     handleSettingsAction = (action) => {
-        if (action.action === "perform-node-action" && action.payload.id === "reset-camera") {
+        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 { path, value } = action.payload;
+        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(draft, path, value));
+                this.renderer.updateConfig((draft) => {
+                    _.set(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);
             }
             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") {
-                        draft.cameraState.targetOffset = [...DEFAULT_CAMERA_STATE.targetOffset];
-                        draft.cameraState.thetaOffset = DEFAULT_CAMERA_STATE.thetaOffset;
+                    if (draft.followMode === "follow-none" ||
+                        followMode === "follow-pose") {
+                        draft.cameraState.targetOffset = [
+                            ...DEFAULT_CAMERA_STATE.targetOffset,
+                        ];
                     }
-                    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(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) {
             this.#unfollowSnapshotFrameIds = undefined;
@@ -280,35 +327,89 @@ export 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);
+            const state = this.renderer.config.cameraState;
+            const distChanged = Math.abs(state.distance - newDistance) > 1e-6;
+            const targetChanged = !_.isEqual(state.targetOffset, [
+                tempVec3.x,
+                tempVec3.y,
+                tempVec3.z,
+            ]);
+            if (distChanged || targetChanged) {
+                this.renderer.updateConfig((draft) => {
+                    if (distChanged)
+                        draft.cameraState.distance = newDistance;
+                    if (targetChanged)
+                        draft.cameraState.targetOffset = [
+                            tempVec3.x,
+                            tempVec3.y,
+                            tempVec3.z,
+                        ];
+                });
+                this.#lastTargetOffset.copy(tempVec3);
+                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 { followTf } = this.renderer.config;
@@ -319,37 +420,31 @@ export 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 { followTf } = this.renderer.config;
         const { 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, DISPLAY_FRAME_NOT_FOUND);
             }
             else {
-                this.renderer.settings.errors.add(FOLLOW_TF_PATH, DISPLAY_FRAME_NOT_FOUND, t("threeDee:frameNotFound", {
-                    frameId: followTf,
-                }));
+                this.renderer.settings.errors.add(FOLLOW_TF_PATH, DISPLAY_FRAME_NOT_FOUND, t("threeDee:frameNotFound", { frameId: followTf }));
             }
         }
+        else {
+            this.renderer.settings.errors.remove(FOLLOW_TF_PATH, 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) {
+            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,
@@ -367,71 +462,65 @@ export 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: THREE.MathUtils.radToDeg(this.#controls.getPolarAngle()),
-            thetaOffset: THREE.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;
-        const config = this.renderer.config;
-        targetOffset.fromArray(cameraState.targetOffset);
-        const phi = THREE.MathUtils.degToRad(cameraState.phi);
-        const theta = -THREE.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.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(THREE.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.fromArray(cameraState.targetOffset);
+        const distance = cameraState.distance;
+        const phiRad = THREE.MathUtils.degToRad(cameraState.phi);
+        const azimuthRad = -THREE.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 THREE.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 = THREE.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);
+            this.#orthographicCamera.lookAt(tempVec3);
+            this.#orthographicCamera.updateMatrixWorld();
         }
+        this.#controls.update(0);
     }
 }
 //# sourceMappingURL=CameraStateSettings.js.map