three follows world camera now

src/components/WorldView.tsx

@@ -1,11 +1,24 @@
-import { useRef } from 'react';
+import { useLayoutEffect, useRef } from 'react';
 import type React from 'react';
-import { useFrame } from '@react-three/fiber';
+import { useFrame, useThree } from '@react-three/fiber';
 import { OrbitControls } from '@react-three/drei';
 import { observer } from 'mobx-react-lite';
 import { state } from '../state';
 import { SceneView } from './SceneView';
 
+const CameraSync = observer(function () {
+  const { camera } = useThree();
+  const cam = state.world.currentCamera; // MobX tracks this; re-renders on change
+
+  useLayoutEffect(() => {
+    camera.position.set(cam.position[0], cam.position[1], cam.position[2]);
+    camera.rotation.set(cam.look[0], cam.look[1], cam.look[2]);
+    camera.updateProjectionMatrix();
+  });
+
+  return null;
+});
+
 export const WorldView = observer(function () {
   const world = state.world;
   const controlsRef = useRef<React.ComponentRef<typeof OrbitControls>>(null);
@@ -33,6 +46,7 @@ export const WorldView = observer(function () {
       makeDefault
       enableDamping={false}
     />
+    <CameraSync />
     <SceneView scene={state.world.currentScene} />
   </>)
 });

src/state/worldEditor.ts

@@ -62,6 +62,10 @@ export class WorldEditorState {
         return this.world.data.initialScene;
     }
 
+    public get camera(): Pos3 {
+        return this.world.data.editorCamera;
+    }
+
     public mutateWorld(mutation: Partial<World>): void {
         this.world.data = {
             ...this.world.data,