added editor camera controls

src/components/WorldView.tsx

@@ -1,18 +1,40 @@
+import { useRef } from 'react';
+import type React from 'react';
 import { useFrame } from '@react-three/fiber';
+import { OrbitControls } from '@react-three/drei';
 import { observer } from 'mobx-react-lite';
 import { state } from '../state';
 import { ObjectView } from './ObjectView';
+import { CharacterView } from './CharacterView';
 
 export const WorldView = observer(function () {
   const world = state.world;
+  const controlsRef = useRef<React.ComponentRef<typeof OrbitControls>>(null);
 
   console.log(world.currentScene.objects);
 
   useFrame((_, delta) => {
     world.tick(delta);
-  })
+  });
+
+  const handleEnd = () => {
+    const controls = controlsRef.current;
+    if (!controls || world.isPlaying)
+      return;
+    const [x, y, z] = controls.object.rotation.toArray();
+    state.worldEditor.setCamera({
+      position: controls.object.position.toArray(),
+      look: [x, y, z],
+    });
+  };
 
   return (<>
+    <OrbitControls
+      ref={controlsRef}
+      enabled={!world.isPlaying}
+      onEnd={handleEnd}
+      enableDamping={false}
+    />
     <ambientLight intensity={0.5} />
     <directionalLight position={[5, 5, 5]} intensity={1} />
     {world.currentScene.objects.map((obj) => <ObjectView key={obj.id} object={obj} />)}