layered geometries

webclient/src/components/SceneEditorView.tsx

@@ -5,48 +5,31 @@ import { observer } from 'mobx-react-lite';
 import { state } from '../state';
 import { SceneView } from './SceneView';
 import { MOUSE, type OrthographicCamera, type PerspectiveCamera } from 'three';
-import { CameraSync } from './tools/CameraSync';
+import { useSyncCamera } from '../utils/hooks/useSyncCamera';
 import { Physics } from '@react-three/rapier';
 
 
 export const SceneEditorView = observer(function () {
     const controlsRef = useRef<React.ComponentRef<typeof OrbitControls>>(null);
 
-    const cameraAtStart = useRef<string>('');
-
-    function cameraSnapshot(camera: OrthographicCamera | PerspectiveCamera): string {
-        return JSON.stringify({
-            position: camera.position,
-            rotation: camera.rotation,
-        });
-    }
-
-    const handleStart = () => {
-        const controls = controlsRef.current;
-        if (!controls)
-            return;
-        cameraAtStart.current = cameraSnapshot(controls.object);
-    };
+    useSyncCamera(() => state.view.camera.camera);
 
     const handleEnd = () => {
         const controls = controlsRef.current;
         if (!controls)
             return;
-        const snapshot = cameraSnapshot(controls.object);
-        if (snapshot === cameraAtStart.current)
-            return;
+
         const [x, y, z] = controls.object.rotation.toArray();
-        state.worldEditor.setCamera({
+        state.view.camera.camera = {
             position: controls.object.position.toArray(),
             look: [x, y, z],
-        });
+        };
     };
 
     return (<>
         <Suspense>
             <OrbitControls
                 ref={controlsRef}
-                onStart={handleStart}
                 onEnd={handleEnd}
                 makeDefault
                 mouseButtons={{
@@ -57,7 +40,6 @@ export const SceneEditorView = observer(function () {
                 rotateSpeed={0.2}
                 enableDamping={false}
             />
-            <CameraSync camera={state.worldEditor.camera} />
             {/* <Grid
                 sectionThickness={0.5}
                 cellThickness={0}