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} />)}

src/state/root.ts

@@ -7,7 +7,6 @@ export class RootState {
     public readonly worldEditor: WorldEditorState;
 
     constructor() {
-        this.world.loadMock();
         this.worldEditor = new WorldEditorState(this.world);
 
         makeAutoObservable(

src/state/world.ts

@@ -2,7 +2,7 @@ import { makeAutoObservable } from "mobx";
 import { WorldFactory } from "../model/worldFactory";
 import type { ObjectType, RunningGameState, Scene, World } from "../types";
 import { CharacterState } from "./character";
-import type { Pos3 } from "../types/3d";
+import type { Pos3, V3 } from "../types/3d";
 import { clone, randomId } from "../utils";
 import type { VoxelType } from "../types/voxel";
 
@@ -12,6 +12,7 @@ export class WorldState {
     public character = new CharacterState(this);
 
     constructor() {
+        this.load();
         makeAutoObservable(this);
     }
 

src/state/worldEditor.ts

@@ -3,6 +3,7 @@ import type { WorldState } from "./world";
 import type { ObjectInstance } from "../types";
 import { createObjectInstance } from "../utils/object";
 import { randomId } from "../utils";
+import type { Pos3, V3 } from "../types/3d";
 
 export class WorldEditorState {
     private readonly world: WorldState;
@@ -16,6 +17,12 @@ export class WorldEditorState {
         return !this.world.isPlaying;
     }
 
+    public setCamera(value: Pos3): void {
+        this.world.data.editorCamera = value;
+        console.log(JSON.stringify(this.world.data.editorCamera));
+        this.world.save();
+    }
+
     public addObjectCloneAtRandomPosition(typeId: string): ObjectInstance {
         return this.addObjectClone(
             typeId,