Camera being restored

src/clientSideScene/CameraControls.ts

@@ -95,6 +95,10 @@ export class CameraControls {
   wasDragging: boolean
   mouseDownPosition: Vector2
   mouseNewPosition: Vector2
+  old: {
+    camera: PerspectiveCamera,
+    target: Vector3,
+  } | undefined
   rotationSpeed = 0.3
   enableRotate = true
   enablePan = true
@@ -461,6 +465,7 @@ export class CameraControls {
     if (this.syncDirection === 'engineToClient') {
       const interaction = this.getInteractionType(event)
       if (interaction === 'none') return
+
       void this.engineCommandManager.sendSceneCommand({
         type: 'modeling_cmd_req',
         cmd: {
@@ -919,8 +924,35 @@ export class CameraControls {
         animated: false, // don't animate the zoom for now
       },
     })
+    this.cameraDragStartXY = {
+      x: 0,
+      y: 0,
+    }
   }
 
+  async restoreCameraPosition(): Promise<void> {
+    if (!this.old) return
+
+    this.camera = this.old.camera.clone()
+    this.target = this.old.target.clone()
+
+    void this.engineCommandManager.sendSceneCommand({
+      type: 'modeling_cmd_req',
+      cmd_id: uuidv4(),
+      cmd: {
+        type: 'default_camera_look_at',
+        ...convertThreeCamValuesToEngineCam({
+          isPerspective: true,
+          position: this.camera.position,
+          quaternion: this.camera.quaternion,
+          zoom: this.camera.zoom,
+          target: this.target,
+        }),
+      },
+    })
+  }
+
+
   async tweenCameraToQuaternion(
     targetQuaternion: Quaternion,
     targetPosition = new Vector3(),

src/components/EngineStream.tsx

@@ -237,6 +237,8 @@ export const EngineStream = () => {
       onContextMenuCapture={(e) => e.preventDefault()}
     >
       <video
+        autoPlay
+        muted
         key={engineStreamActor.id + 'video'}
         ref={engineStreamState.context.videoRef}
         controls={false}

src/hooks/useEngineStreamContext.ts

@@ -2,7 +2,7 @@ import { makeDefaultPlanes, modifyGrid } from 'lang/wasm'
 import { MutableRefObject } from 'react'
 import { setup, assign } from 'xstate'
 import { createActorContext } from '@xstate/react'
-import { kclManager, engineCommandManager } from 'lib/singletons'
+import { kclManager, sceneInfra, engineCommandManager } from 'lib/singletons'
 import { trap } from 'lib/trap'
 
 export enum EngineStreamState {
@@ -64,7 +64,9 @@ const engineStreamMachine = setup({
         void video.play().catch((e) => {
             console.warn('Video playing was prevented', e, video)
         }).then(() => {
-          kclManager.executeCode(true).catch(trap)
+          kclManager.executeCode(true).then(() => {
+            return sceneInfra.camControls.restoreCameraPosition()
+          }).catch(trap)
         })
       },
       [EngineStreamTransition.Pause]({ context }) {
@@ -99,6 +101,11 @@ const engineStreamMachine = setup({
           context.mediaStream?.getVideoTracks()[0].stop()
           video.srcObject = null
 
+          sceneInfra.camControls.old = {
+            camera: sceneInfra.camControls.camera.clone(),
+            target: sceneInfra.camControls.target.clone()
+          }
+
           engineCommandManager.tearDown({ idleMode: true })
         })
       },