Preview Camera DOM should never be destroyed for EngineEditor to refer to (#667)

low risk, merging

---------

Co-authored-by: wil <wil@storyteller.ai>
Co-authored-by: Quicksticks-oss <chongobongotoday@gmail.com>

app/pages/PageEnigma/Editor/editor.ts

@@ -1217,12 +1217,12 @@ class Editor {
         //     document.getElementById("camera-view");
         // }
         this.camViewCanvasMayReset();
-        this.rawRenderer = new THREE.WebGLRenderer({
-          antialias: true,
-          canvas: this.canvasRenderCamReference || undefined,
-          preserveDrawingBuffer: true,
-        });
-        this._configurePostProcessingRaw();
+        // this.rawRenderer = new THREE.WebGLRenderer({
+        //   antialias: true,
+        //   canvas: this.canvasRenderCamReference || undefined,
+        //   preserveDrawingBuffer: true,
+        // });
+        // this._configurePostProcessingRaw();
 
         if (this.camera_person_mode) {
           this.switchCameraView();

app/pages/PageEnigma/comps/PreviewEngineCamera/PreviewEngineCamera.tsx

@@ -28,10 +28,6 @@ import { Button, ButtonIcon, Tooltip } from "~/components";
 export const PreviewEngineCamera = () => {
   useSignals();
 
-  if (editorState.value === EditorStates.PREVIEW) {
-    return null;
-  }
-
   const handleButtonCameraView = () => {
     Queue.publish({
       queueName: QueueNames.TO_ENGINE,
@@ -72,7 +68,15 @@ export const PreviewEngineCamera = () => {
   };
 
   return (
-    <div id="preview-engine-camera" className="origin-bottom-left shadow-lg">
+    <div
+      id="preview-engine-camera"
+      className={twMerge(
+        "origin-bottom-left shadow-lg",
+        editorState.value === EditorStates.PREVIEW
+          ? "invisible h-0 w-0"
+          : "visible",
+      )}
+    >
       <div
         className={twMerge(
           "relative",