camera naming fix, button text truncate

frontend/apps/editor3d/app/components/reusable/Popover/Popover.tsx

@@ -17,6 +17,7 @@ interface PopoverMenuProps {
   onAdd?: () => void;
   triggerIcon?: ReactNode;
   showAddButton?: boolean;
+  disableAddButton?: boolean;
   showIconsInList?: boolean;
   mode?: "default" | "toggle" | "button";
   triggerLabel?: string;
@@ -36,6 +37,7 @@ export const PopoverMenu = ({
   onAdd,
   triggerIcon,
   showAddButton = false,
+  disableAddButton = false,
   showIconsInList = false,
   mode = "default",
   triggerLabel,
@@ -84,9 +86,15 @@ export const PopoverMenu = ({
       {({ close }) => (
         <>
           <Popover.Button className={className}>
-            {triggerIcon}
-            {mode === "toggle" && selectedItem ? selectedItem.label : null}
-            {mode === "default" && triggerLabel ? triggerLabel : null}
+            <>
+              {triggerIcon}
+              {mode === "toggle" && selectedItem ? (
+                <span className="truncate">{selectedItem.label}</span>
+              ) : null}
+              {mode === "default" && triggerLabel ? (
+                <span className="truncate">{triggerLabel}</span>
+              ) : null}
+            </>
           </Popover.Button>
 
           <div
@@ -164,9 +172,9 @@ export const PopoverMenu = ({
                           variant="secondary"
                           disabled={item.disabled}
                         >
-                          <div className="flex items-center gap-2">
+                          <div className="flex items-center gap-2 truncate">
                             {showIconsInList && item.icon}
-                            {item.label}
+                            <span className="truncate">{item.label}</span>
                           </div>
                           {mode === "toggle" && (
                             <input
@@ -180,8 +188,14 @@ export const PopoverMenu = ({
                       {showAddButton && onAdd && (
                         <Button
                           variant="secondary"
-                          className="mb-0.5 mt-2 border-none bg-[#7B7B84] py-1 hover:bg-[#8c8c96]"
+                          className={twMerge(
+                            "mb-0.5 mt-2 border-none py-1",
+                            disableAddButton
+                              ? "cursor-not-allowed bg-[#7B7B84]/50 opacity-50"
+                              : "bg-[#7B7B84] hover:bg-[#8c8c96]",
+                          )}
                           onClick={onAdd}
+                          disabled={disableAddButton}
                         >
                           + Add
                         </Button>

frontend/apps/editor3d/app/pages/PageEnigma/Editor/editor.ts

@@ -197,8 +197,6 @@ class Editor {
   processingHasFailed: boolean;
   stats: Stats;
 
-  cameras: Map<string, THREE.PerspectiveCamera> = new Map();
-
   constructor() {
     this.processingHasFailed = false;
     console.log(
@@ -329,34 +327,6 @@ class Editor {
     if (this.engineFrameBuffers.frameWorkerManager) {
       this.engineFrameBuffers.frameWorkerManager.type = imageFormat;
     }
-
-    // Initialize cameras from signals
-    cameras.value.forEach((camData) => {
-      const camera = new THREE.PerspectiveCamera(
-        camData.fov,
-        this.getRenderDimensions().aspectRatio,
-        0.01,
-        200,
-      );
-      camera.position.set(
-        camData.position.x,
-        camData.position.y,
-        camData.position.z,
-      );
-      camera.rotation.set(
-        camData.rotation.x,
-        camData.rotation.y,
-        camData.rotation.z,
-      );
-      this.cameras.set(camData.id, camera);
-    });
-
-    // Set initial camera
-    this.camera = this.cameras.get("main") || null;
-    this.render_camera = this.camera;
-
-    // Subscribe to camera changes
-    this.setupCameraSignalHandlers();
   }
 
   // Add helper method to convert focal length to FOV
@@ -365,99 +335,6 @@ class Editor {
     return 2 * Math.atan(sensorHeight / (2 * focalLength)) * (180 / Math.PI);
   }
 
-  setupCameraSignalHandlers() {
-    // Handle camera selection changes
-    selectedCameraId.subscribe((id) => {
-      const newCamera = this.cameras.get(id);
-      if (newCamera) {
-        this.camera = newCamera;
-        this.render_camera = newCamera;
-
-        // Update camera properties in signals
-        const camData = cameras.value.find((c) => c.id === id);
-        if (camData) {
-          // Convert focal length to FOV
-          const fov = this.focalLengthToFov(camData.focalLength);
-          newCamera.fov = fov;
-          newCamera.updateProjectionMatrix();
-          this.renderScene(); // Force a render update
-        }
-      }
-    });
-
-    // Handle camera updates
-    cameras.subscribe((newCameras) => {
-      newCameras.forEach((camData) => {
-        let camera = this.cameras.get(camData.id);
-
-        // Create new camera if it doesn't exist
-        if (!camera) {
-          const fov = this.focalLengthToFov(camData.focalLength);
-          camera = new THREE.PerspectiveCamera(
-            fov,
-            this.getRenderDimensions().aspectRatio,
-            0.01,
-            200,
-          );
-          this.cameras.set(camData.id, camera);
-        }
-
-        // Update camera properties
-        camera.position.set(
-          camData.position.x,
-          camData.position.y,
-          camData.position.z,
-        );
-        camera.rotation.set(
-          camData.rotation.x,
-          camData.rotation.y,
-          camData.rotation.z,
-        );
-
-        // Update FOV based on focal length
-        const fov = this.focalLengthToFov(camData.focalLength);
-        camera.fov = fov;
-        camera.updateProjectionMatrix();
-
-        // Force a render update if this is the active camera
-        if (camData.id === selectedCameraId.value) {
-          this.renderScene();
-        }
-      });
-
-      // Clean up deleted cameras
-      const currentIds = new Set(newCameras.map((c) => c.id));
-      for (const [id] of this.cameras.entries()) {
-        if (!currentIds.has(id) && id !== "main") {
-          this.cameras.delete(id);
-        }
-      }
-    });
-  }
-
-  // Update camera position in signals when it changes
-  updateCameraPosition() {
-    if (this.camera && selectedCameraId.value) {
-      const pos = this.camera.position;
-      const rot = this.camera.rotation;
-
-      const camData = cameras.value.find(
-        (c) => c.id === selectedCameraId.value,
-      );
-      if (camData) {
-        cameras.value = cameras.value.map((c) =>
-          c.id === selectedCameraId.value
-            ? {
-                ...c,
-                position: { x: pos.x, y: pos.y, z: pos.z },
-                rotation: { x: rot.x, y: rot.y, z: rot.z },
-              }
-            : c,
-        );
-      }
-    }
-  }
-
   getRenderDimensions() {
     switch (this.render_camera_aspect_ratio) {
       case CameraAspectRatio.HORIZONTAL_16_9: {
@@ -590,24 +467,52 @@ class Editor {
     const width = this.container.offsetWidth;
     const height = this.container.offsetHeight;
 
-    // Sets up camera and base position.
-    this.camera = new THREE.PerspectiveCamera(70, width / height, 0.01, 200);
-    this.camera.position.z = 2.5;
-    this.camera.position.y = 2.5;
-    this.camera.position.x = -2.5;
-    this.camera.lookAt(0, 0, 0);
+    // Sets up camera and base position using camera configurations from camera.ts
+    const mainCameraConfig = cameras.value.find((cam) => cam.id === "main");
+    if (mainCameraConfig) {
+      this.camera = new THREE.PerspectiveCamera(
+        this.focalLengthToFov(mainCameraConfig.focalLength),
+        width / height,
+        0.01,
+        200,
+      );
+      this.camera.position.set(
+        mainCameraConfig.position.x,
+        mainCameraConfig.position.y,
+        mainCameraConfig.position.z,
+      );
+      this.camera.lookAt(
+        mainCameraConfig.lookAt.x,
+        mainCameraConfig.lookAt.y,
+        mainCameraConfig.lookAt.z,
+      );
+    }
 
     this.camera.layers.enable(0);
-    this.camera.layers.enable(1); // This camera does not see this layer
+    this.camera.layers.enable(1);
 
     this.timeline.camera = this.camera;
 
-    this.render_camera = new THREE.PerspectiveCamera(
-      70,
-      width / height,
-      0.01,
-      200,
-    );
+    const otherCameras = cameras.value.filter((cam) => cam.id !== "main");
+    if (otherCameras.length > 0) {
+      const renderCameraConfig = otherCameras[0];
+      this.render_camera = new THREE.PerspectiveCamera(
+        this.focalLengthToFov(renderCameraConfig.focalLength),
+        width / height,
+        0.01,
+        200,
+      );
+      this.render_camera.position.set(
+        renderCameraConfig.position.x,
+        renderCameraConfig.position.y,
+        renderCameraConfig.position.z,
+      );
+      this.render_camera.lookAt(
+        renderCameraConfig.lookAt.x,
+        renderCameraConfig.lookAt.y,
+        renderCameraConfig.lookAt.z,
+      );
+    }
 
     this.render_camera.layers.disable(1); // This camera does not see this layer      );
 

frontend/apps/editor3d/app/pages/PageEnigma/Editor/free_cam.ts

@@ -235,12 +235,18 @@ class FreeCam extends EventDispatcher {
       const pos = this.object.position;
       const rot = this.object.rotation;
 
+      // Calculate lookAt point based on camera's forward direction
+      const lookAtPoint = new Vector3(0, 0, -1);
+      lookAtPoint.applyQuaternion(this.object.quaternion);
+      lookAtPoint.add(pos);
+
       cameras.value = cameras.value.map((cam) =>
         cam.id === selectedCameraId.value
           ? {
               ...cam,
               position: { x: pos.x, y: pos.y, z: pos.z },
               rotation: { x: rot.x, y: rot.y, z: rot.z },
+              lookAt: { x: lookAtPoint.x, y: lookAtPoint.y, z: lookAtPoint.z },
             }
           : cam,
       );

frontend/apps/editor3d/app/pages/PageEnigma/Editor/save_manager.ts

@@ -11,6 +11,8 @@ import {
 } from "../signals";
 import Editor from "./editor";
 import { getArtStyle } from "~/enums";
+import { cameras, selectedCameraId, Camera } from "../signals/camera";
+
 export type EditorInitializeConfig = {
   sceneToken: string;
 };
@@ -98,6 +100,16 @@ export class SaveManager {
     );
     const timeline_json = await proxyTimeline.saveToJson();
 
+    // Save all cameras data
+    const camerasData = cameras.value.map((cam: Camera) => ({
+      id: cam.id,
+      label: cam.label,
+      focalLength: cam.focalLength,
+      position: cam.position,
+      rotation: cam.rotation,
+      lookAt: cam.lookAt,
+    }));
+
     const save_data = {
       version: this.editor.version,
       scene: scene_json,
@@ -108,6 +120,9 @@ export class SaveManager {
         position: this.editor.camera?.position,
         rotation: this.editor.camera?.rotation,
       },
+      // Add cameras array and selected camera
+      cameras: camerasData,
+      selectedCameraId: selectedCameraId.value,
     };
     // take json scene and figure out checksum
     const jsonString = JSON.stringify(save_data);
@@ -146,6 +161,16 @@ export class SaveManager {
     );
     const timeline_json = await proxyTimeline.saveToJson();
 
+    // Save all cameras data
+    const camerasData = cameras.value.map((cam: Camera) => ({
+      id: cam.id,
+      label: cam.label,
+      focalLength: cam.focalLength,
+      position: cam.position,
+      rotation: cam.rotation,
+      lookAt: cam.lookAt,
+    }));
+
     const save_data = {
       version: this.editor.version,
       scene: scene_json,
@@ -156,6 +181,9 @@ export class SaveManager {
         position: this.editor.camera?.position,
         rotation: this.editor.camera?.rotation,
       },
+      // Add cameras array and selected camera
+      cameras: camerasData,
+      selectedCameraId: selectedCameraId.value,
     };
 
     // TODO turn scene information into and object ...
@@ -218,6 +246,23 @@ export class SaveManager {
       this.editor.camera.rotation.copy(camera_rotation);
     }
 
+    // Restore cameras data
+    if (scene_json.cameras) {
+      cameras.value = scene_json.cameras.map((cam: Camera) => ({
+        id: cam.id,
+        label: cam.label,
+        focalLength: cam.focalLength,
+        position: cam.position,
+        rotation: cam.rotation,
+        lookAt: cam.lookAt,
+      }));
+    }
+
+    // Restore selected camera
+    if (scene_json.selectedCameraId) {
+      selectedCameraId.value = scene_json.selectedCameraId;
+    }
+
     // For Remixing Scenes.
     // this calls the signal function to propagate the data to the UI
     restoreSceneGenerationMetadata(scene_json);

frontend/apps/editor3d/app/pages/PageEnigma/Editor/scene.ts

@@ -17,6 +17,7 @@ import { GetCdnOrigin } from "~/api/GetCdnOrigin";
 import { GetFrontendEnvironment } from "~/Classes/GetFrontendEnvironment";
 import { gridVisibility } from "../signals/engine";
 import { InfiniteGridHelper } from "./InfiniteGridHelper";
+import { cameras, selectedCameraId } from "../signals/camera";
 
 class Scene {
   name: string;
@@ -86,7 +87,7 @@ class Scene {
     this._createGrid();
     this._create_base_lighting();
     this._create_skybox();
-    this._create_camera_obj();
+    // this._create_camera_obj();
 
     this.helper = new MMDAnimationHelper({ afterglow: 0.0 });
     this.scene.userData["helper"] = this.helper;
@@ -110,7 +111,7 @@ class Scene {
     this._createGrid();
     this._create_base_lighting();
     this._create_skybox();
-    this._create_camera_obj();
+    // this._create_camera_obj();
   }
 
   async instantiate(
@@ -370,31 +371,45 @@ class Scene {
   }
 
   async _create_camera_obj() {
-    const camera_position = new THREE.Vector3(0, 0.6, 1.5);
+    cameras.value.forEach((cameraConfig) => {
+      const camera_position = new THREE.Vector3(
+        cameraConfig.position.x,
+        cameraConfig.position.y,
+        cameraConfig.position.z,
+      );
 
-    // TODO(bt,2025-02-10): Make the local dev assets more configurable or seedable.
-    const camera_id = GetFrontendEnvironment().getIsLocalDev()
-      ? "m_4djqzq89mbn6sdbbqm25ks6drhr55k" // Local development
-      : "m_cxh4asqhapdz10j880755dg4yevshb"; // Production
+      // TODO(bt,2025-02-10): Make the local dev assets more configurable or seedable.
+      const camera_id = GetFrontendEnvironment().getIsLocalDev()
+        ? "m_cxh4asqhapdz10j880755dg4yevshb" // Local development
+        : "m_cxh4asqhapdz10j880755dg4yevshb"; // Production
 
-    const camera_obj = await this.loadGlbWithPlaceholder(
-      camera_id,
-      "Camera",
-      false,
-      camera_position,
-    );
-    camera_obj.userData["name"] = this.camera_name;
-    camera_obj.name = this.camera_name;
-    camera_obj.position.set(
-      camera_position.x,
-      camera_position.y,
-      camera_position.z,
-    );
-    camera_obj.layers.set(1);
-    camera_obj.children.forEach((child) => {
-      child.layers.set(1);
+      this.loadGlbWithPlaceholder(
+        camera_id,
+        "Camera",
+        false,
+        camera_position,
+      ).then((camera_obj) => {
+        camera_obj.userData["name"] = cameraConfig.label;
+        camera_obj.name = cameraConfig.label;
+        camera_obj.position.set(
+          camera_position.x,
+          camera_position.y,
+          camera_position.z,
+        );
+        camera_obj.layers.set(1);
+        camera_obj.children.forEach((child) => {
+          child.layers.set(1);
+        });
+        this.scene.add(camera_obj);
+
+        if (cameraConfig.id === selectedCameraId.value) {
+          camera_obj.visible = false;
+          camera_obj.layers.disableAll(); // Make the active camera not touchable
+        } else {
+          camera_obj.visible = true;
+        }
+      });
     });
-    this.scene.add(camera_obj);
   }
 
   renderMode(enabled: boolean = true) {

frontend/apps/editor3d/app/pages/PageEnigma/PageEditor.tsx

@@ -25,6 +25,7 @@ import { CameraAspectRatio } from "./enums";
 import { PromptBox } from "./comps/PromptBox";
 import { OnboardingHelper } from "./comps/OnboardingHelper";
 import { focalLengthDragging } from "./signals/camera";
+import { FocalLengthDisplay } from "./comps/FocalLengthDisplay/FocalLengthDisplay";
 
 export const PageEditor = () => {
   useSignals();
@@ -103,13 +104,7 @@ export const PageEditor = () => {
             </SceneContainer>
 
             {/* Focal Length Display */}
-            {focalLengthDragging.value.isDragging && (
-              <div className="absolute left-1/2 top-16 -translate-x-1/2 transform">
-                <div className="glass rounded-xl px-6 py-3 text-center text-3xl font-bold text-white">
-                  {focalLengthDragging.value.focalLength}mm
-                </div>
-              </div>
-            )}
+            <FocalLengthDisplay />
 
             {/* Top controls */}
             <div

frontend/apps/editor3d/app/pages/PageEnigma/Queue/toEngineActions.ts

@@ -33,6 +33,8 @@ export enum toEngineActions {
   CHANGE_CAMERA_ASPECT_RATIO = "change_camera_aspect_ratio",
   // data=CamperaAspectRatio
 
+  CAMERA_CHANGED = "camera_changed",
+
   UNMUTE = "unmute",
   // data={version, type, group, object_uuid} if lipsync
   // data={version, type, group} if global_audio

frontend/apps/editor3d/app/pages/PageEnigma/comps/CameraSettingsModal/CameraSettingsModal.tsx

@@ -4,16 +4,16 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { PopoverItem } from "~/components/reusable/Popover";
 import { Button, Input, Label, Tooltip } from "~/components";
 import { SliderV2 } from "~/components/reusable/SliderV2/SliderV2";
-import {
-  updateCamera,
-  focalLengthDragging,
-} from "~/pages/PageEnigma/signals/camera";
+import { focalLengthDragging } from "~/pages/PageEnigma/signals/camera";
 import { useState, useEffect } from "react";
 import { twMerge } from "tailwind-merge";
 
 interface ExtendedPopoverItem extends PopoverItem {
   id: string;
   focalLength: number;
+  position: { x: number; y: number; z: number };
+  rotation: { x: number; y: number; z: number };
+  lookAt: { x: number; y: number; z: number };
 }
 
 interface CameraSettingsModalProps {
@@ -24,7 +24,7 @@ interface CameraSettingsModalProps {
   onCameraFocalLengthChange: (id: string, value: number) => void;
   onAddCamera: () => void;
   selectedCameraId: string;
-  onSelectCamera: (id: string) => void;
+  handleCameraSelect: (selectedItem: PopoverItem) => void;
   onDeleteCamera: (id: string) => void;
 }
 
@@ -36,11 +36,20 @@ export const CameraSettingsModal = ({
   onCameraFocalLengthChange,
   onAddCamera,
   selectedCameraId,
-  onSelectCamera,
+  handleCameraSelect,
   onDeleteCamera,
 }: CameraSettingsModalProps) => {
   const selectedCamera = cameras.find((cam) => cam.id === selectedCameraId);
   const [isDragging, setIsDragging] = useState(false);
+  const [tempCameraName, setTempCameraName] = useState<string>("");
+  const [editingCameraId, setEditingCameraId] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (selectedCamera) {
+      setTempCameraName(selectedCamera.label);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedCamera?.id]);
 
   useEffect(() => {
     const handlePointerUp = () => {
@@ -67,16 +76,29 @@ export const CameraSettingsModal = ({
     onCameraFocalLengthChange(id, value);
   };
 
+  const handleNameBlur = () => {
+    if (selectedCamera && tempCameraName.trim() !== "") {
+      onCameraNameChange(selectedCamera.id, tempCameraName);
+    } else if (selectedCamera) {
+      setTempCameraName(selectedCamera.label);
+    }
+    setEditingCameraId(null);
+  };
+
+  const handleNameFocus = (id: string) => {
+    setEditingCameraId(id);
+  };
+
   return (
     <TransitionDialogue
       isOpen={isOpen}
       onClose={onClose}
       className={twMerge(
-        "h-[500px] max-w-3xl transition-opacity duration-200",
-        isDragging ? "opacity-30 hover:opacity-20" : "opacity-100",
+        "h-[500px] max-w-3xl duration-200",
+        isDragging ? "opacity-10" : "opacity-100",
       )}
       backdropClassName={twMerge(
-        "transition-opacity duration-200",
+        "duration-200",
         isDragging ? "opacity-0" : "opacity-100",
       )}
       childPadding={false}
@@ -99,14 +121,16 @@ export const CameraSettingsModal = ({
             {cameras.map((camera) => (
               <button
                 key={camera.id}
-                className={`w-full rounded-lg p-2 text-left transition-colors duration-100 hover:bg-[#63636B]/40 ${
+                className={`h-9 w-full rounded-lg p-2 text-left transition-colors duration-100 hover:bg-[#63636B]/40 ${
                   camera.id === selectedCameraId ? "bg-[#63636B]/40" : ""
                 }`}
-                onClick={() => onSelectCamera(camera.id)}
+                onClick={() => handleCameraSelect(camera)}
               >
                 <div className="flex items-center gap-2.5 text-sm">
                   {camera.icon}
-                  {camera.label}
+                  {editingCameraId === camera.id
+                    ? tempCameraName
+                    : camera.label}
                 </div>
               </button>
             ))}
@@ -154,10 +178,11 @@ export const CameraSettingsModal = ({
                   <Input
                     id="camera-name"
                     type="text"
-                    value={selectedCamera?.label || ""}
-                    onChange={(e) =>
-                      selectedCamera &&
-                      onCameraNameChange(selectedCamera.id, e.target.value)
+                    value={tempCameraName}
+                    onChange={(e) => setTempCameraName(e.target.value)}
+                    onBlur={handleNameBlur}
+                    onFocus={() =>
+                      selectedCamera && handleNameFocus(selectedCamera.id)
                     }
                     className="text-sm"
                   />

frontend/apps/editor3d/app/pages/PageEnigma/comps/FocalLengthDisplay/FocalLengthDisplay.tsx

@@ -0,0 +1,25 @@
+import { Transition } from "@headlessui/react";
+import { useSignals } from "@preact/signals-react/runtime";
+import { focalLengthDragging } from "~/pages/PageEnigma/signals/camera";
+
+export const FocalLengthDisplay = () => {
+  useSignals();
+
+  return (
+    <Transition
+      show={focalLengthDragging.value.isDragging}
+      enter="transition-opacity duration-200"
+      enterFrom="opacity-0"
+      enterTo="opacity-100"
+      leave="transition-opacity duration-200"
+      leaveFrom="opacity-100"
+      leaveTo="opacity-0"
+    >
+      <div className="absolute left-1/2 top-16 -translate-x-1/2 transform">
+        <div className="glass rounded-xl px-5 py-2.5 text-center text-2xl font-bold text-white">
+          {focalLengthDragging.value.focalLength}mm
+        </div>
+      </div>
+    </Transition>
+  );
+};

frontend/apps/editor3d/app/pages/PageEnigma/comps/OnboardingHelper.tsx

@@ -38,7 +38,7 @@ export const OnboardingHelper = () => {
       leaveFrom="opacity-100"
       leaveTo="opacity-0"
     >
-      <div className="glass pointer-events-none absolute left-1/2 top-52 z-10 flex -translate-x-1/2  transform items-center justify-center gap-2 rounded-2xl border-2 border-brand-primary !bg-brand-primary/10 px-5 py-4">
+      <div className="glass pointer-events-none absolute left-1/2 top-48 z-10 flex -translate-x-1/2  transform items-center justify-center gap-2 rounded-2xl border-2 border-brand-primary !bg-brand-primary/10 px-5 py-4">
         <div className="flex items-center">
           <p className="pr-3 text-lg font-semibold">Hold</p>
           <Mouse button="left" />

frontend/apps/editor3d/app/pages/PageEnigma/comps/PreviewEngineCamera/PreviewEngineCamera.tsx

@@ -24,16 +24,19 @@ import { CameraAspectRatio, EditorStates } from "~/pages/PageEnigma/enums";
 import { CameraViewCanvas } from "~/pages/PageEnigma/comps/EngineCanvases";
 
 import { Button, ButtonIcon, Tooltip } from "~/components";
+import { useEffect } from "react";
 
 export const PreviewEngineCamera = () => {
   useSignals();
 
   const handleButtonCameraView = () => {
+    console.log("Camera view button clicked");
     Queue.publish({
       queueName: QueueNames.TO_ENGINE,
       action: toEngineActions.TOGGLE_CAMERA_STATE,
       data: null,
     });
+    console.log("Action published to queue");
   };
 
   const getLargeScreenHeightClass = () => {
@@ -67,11 +70,15 @@ export const PreviewEngineCamera = () => {
     }
   };
 
+  useEffect(() => {
+    console.log("Editor state changed:", editorState.value);
+  }, [editorState.value]);
+
   return (
     <div
       id="preview-engine-camera"
       className={twMerge(
-        "origin-bottom-left shadow-lg", //hidden right now with css
+        "hidden origin-bottom-left shadow-lg", //hidden right now with css
         editorState.value === EditorStates.PREVIEW
           ? "invisible h-0 w-0"
           : "visible",

frontend/apps/editor3d/app/pages/PageEnigma/comps/PromptBox/PromptBox.tsx

@@ -46,6 +46,7 @@ import {
   addCamera,
   deleteCamera,
   updateCamera,
+  focalLengthDragging,
 } from "~/pages/PageEnigma/signals/camera";
 
 interface ReferenceImage {
@@ -93,7 +94,6 @@ export const PromptBox = () => {
     [],
   );
   const [activeLibraryTab, setActiveLibraryTab] = useState("my-media");
-  const [isGridVisible, setIsGridVisible] = useState(true);
 
   useEffect(() => {
     if (textareaRef.current) {
@@ -121,36 +121,138 @@ export const PromptBox = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [cameraAspectRatio.value]);
 
-  useEffect(() => {
-    setGridVisibility(isGridVisible);
-  }, [isGridVisible]);
-
   const handleCameraSelect = (selectedItem: PopoverItem) => {
     const selectedCamera = cameras.value.find(
       (cam) => cam.label === selectedItem.label,
     );
-    if (selectedCamera) {
+    if (selectedCamera && editorEngine) {
       selectedCameraId.value = selectedCamera.id;
-      // Force update camera properties
+
+      // Show focal length display temporarily
+      // TODO: Rename dragging to visible - BFlat
+      focalLengthDragging.value = {
+        isDragging: true,
+        focalLength: selectedCamera.focalLength,
+      };
+      setTimeout(() => {
+        focalLengthDragging.value = {
+          isDragging: false,
+          focalLength: selectedCamera.focalLength,
+        };
+      }, 1500);
+
+      // Update the main camera to match the selected camera's properties
+      if (editorEngine.camera) {
+        // First update position and lookAt
+        editorEngine.camera.position.set(
+          selectedCamera.position.x,
+          selectedCamera.position.y,
+          selectedCamera.position.z,
+        );
+        editorEngine.camera.lookAt(
+          selectedCamera.lookAt.x,
+          selectedCamera.lookAt.y,
+          selectedCamera.lookAt.z,
+        );
+
+        // Update FOV
+        editorEngine.camera.fov = editorEngine.focalLengthToFov(
+          selectedCamera.focalLength,
+        );
+        editorEngine.camera.updateProjectionMatrix();
+
+        // Reset and update camera controls
+        if (editorEngine.cameraViewControls) {
+          editorEngine.cameraViewControls.reset();
+          editorEngine.cameraViewControls.update(0);
+        }
+
+        // Force a render to update the view
+        editorEngine.renderScene();
+
+        // Queue an update to ensure the engine processes the camera change
+        // Queue.publish({
+        //   queueName: QueueNames.TO_ENGINE,
+        //   action: toEngineActions.CAMERA_CHANGED,
+        //   data: selectedCamera,
+        // });
+      }
+
+      // Force update camera properties in the state
       updateCamera(selectedCamera.id, {
         focalLength: selectedCamera.focalLength,
         position: selectedCamera.position,
         rotation: selectedCamera.rotation,
+        lookAt: selectedCamera.lookAt,
       });
     }
   };
 
   const handleAddCamera = () => {
+    // Check if we've reached the maximum number of cameras
+    if (cameras.value.length >= 6) {
+      console.warn("Maximum number of cameras (6) reached");
+      return;
+    }
+
     const newIndex = cameras.value.length + 1;
     const newId = `cam${newIndex}`;
+
+    // This is for generating random orbital position for the new camera using spherical coordinates
+    const radius = Math.random() * 5 + 7; // Distance from center: 7 to 12 units
+    const theta = Math.random() * Math.PI * 2; // Azimuthal angle: 0 to 2π
+    const phi = Math.PI / 3 + (Math.random() * Math.PI) / 6; // Polar angle: π/3 to π/2 (60° to 90° from horizontal)
+
+    // Convert spherical coordinates to Cartesian coordinates
+    const randomX = radius * Math.sin(phi) * Math.cos(theta);
+    const randomY = Math.abs(radius * Math.cos(phi)) + 2; // Ensure Y is positive and at least 2 units up
+    const randomZ = radius * Math.sin(phi) * Math.sin(theta);
+
     addCamera({
       id: newId,
       label: `Camera ${newIndex}`,
-      focalLength: 35,
-      fov: 70,
-      position: { x: 0, y: 2.5, z: -5 },
+      focalLength: 24,
+      position: {
+        x: randomX,
+        y: randomY,
+        z: randomZ,
+      },
       rotation: { x: 0, y: 0, z: 0 },
+      lookAt: { x: 0, y: 0, z: 0 },
     });
+
+    // Switch to the newly created camera
+    selectedCameraId.value = newId;
+
+    // Update the engine camera to match the new camera's properties
+    if (editorEngine && editorEngine.camera) {
+      editorEngine.camera.position.set(randomX, randomY, randomZ);
+      editorEngine.camera.lookAt(0, 0, 0);
+      editorEngine.camera.fov = editorEngine.focalLengthToFov(24);
+      editorEngine.camera.updateProjectionMatrix();
+
+      // Reset and update camera controls
+      if (editorEngine.cameraViewControls) {
+        editorEngine.cameraViewControls.reset();
+        editorEngine.cameraViewControls.update(0);
+      }
+
+      // Force a render to update the view
+      editorEngine.renderScene();
+
+      // Queue.publish({
+      //   queueName: QueueNames.TO_ENGINE,
+      //   action: toEngineActions.CAMERA_CHANGED,
+      //   data: {
+      //     id: newId,
+      //     label: `Camera ${newIndex}`,
+      //     focalLength: 24,
+      //     position: { x: randomX, y: randomY, z: randomZ },
+      //     rotation: { x: 0, y: 0, z: 0 },
+      //     lookAt: { x: 0, y: 0, z: 0 },
+      //   },
+      // });
+    }
   };
 
   const handleCameraNameChange = (id: string, newName: string) => {
@@ -534,6 +636,9 @@ export const PromptBox = () => {
                       <FontAwesomeIcon icon={faCamera} className="h-4 w-4" />
                     ),
                     focalLength: cam.focalLength,
+                    position: cam.position,
+                    rotation: cam.rotation,
+                    lookAt: cam.lookAt,
                   }))}
                   onSelect={handleCameraSelect}
                   onAdd={handleAddCamera}
@@ -541,11 +646,13 @@ export const PromptBox = () => {
                     <FontAwesomeIcon icon={faCamera} className="h-4 w-4" />
                   }
                   showAddButton
+                  disableAddButton={cameras.value.length >= 6}
                   showIconsInList
                   mode="toggle"
                   panelTitle="Camera"
                   panelActionLabel="Settings"
                   onPanelAction={() => setIsCameraSettingsOpen(true)}
+                  buttonClassName="max-w-[130px] h-9"
                 />
               </Tooltip>
               <Tooltip
@@ -630,12 +737,15 @@ export const PromptBox = () => {
             selected: cam.id === selectedCameraId.value,
             icon: <FontAwesomeIcon icon={faCamera} className="h-4 w-4" />,
             focalLength: cam.focalLength,
+            position: cam.position,
+            rotation: cam.rotation,
+            lookAt: cam.lookAt,
           }))}
           onCameraNameChange={handleCameraNameChange}
           onCameraFocalLengthChange={handleCameraFocalLengthChange}
           onAddCamera={handleAddCamera}
           selectedCameraId={selectedCameraId.value}
-          onSelectCamera={(id: string) => (selectedCameraId.value = id)}
+          handleCameraSelect={handleCameraSelect}
           onDeleteCamera={deleteCamera}
         />
       </div>

frontend/apps/editor3d/app/pages/PageEnigma/signals/camera.ts

@@ -4,9 +4,9 @@ export interface Camera {
   id: string;
   label: string;
   focalLength: number;
-  fov: number;
   position: { x: number; y: number; z: number };
   rotation: { x: number; y: number; z: number };
+  lookAt: { x: number; y: number; z: number };
 }
 
 export const cameras = signal<Camera[]>([
@@ -14,17 +14,17 @@ export const cameras = signal<Camera[]>([
     id: "main",
     label: "Main View",
     focalLength: 17,
-    fov: 70,
-    position: { x: 2.5, y: 2.5, z: -2.5 },
+    position: { x: -2.5, y: 2.5, z: 2.5 },
     rotation: { x: 0, y: 0, z: 0 },
+    lookAt: { x: 0, y: 0, z: 0 },
   },
   {
     id: "cam2",
     label: "Camera 2",
-    focalLength: 35,
-    fov: 70,
-    position: { x: -2.5, y: 2.5, z: 2.5 },
+    focalLength: 10,
+    position: { x: 0, y: 0.6, z: 1.5 },
     rotation: { x: 0, y: 0, z: 0 },
+    lookAt: { x: 0, y: 0, z: 0 },
   },
 ]);