diff --git a/src/components/WorldView.tsx b/src/components/WorldView.tsx index e4b7437..9c5e362 100644 --- a/src/components/WorldView.tsx +++ b/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>(null); @@ -33,6 +46,7 @@ export const WorldView = observer(function () { makeDefault enableDamping={false} /> + ) }); diff --git a/src/state/worldEditor.ts b/src/state/worldEditor.ts index 5ef95bb..147ece4 100644 --- a/src/state/worldEditor.ts +++ b/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): void { this.world.data = { ...this.world.data,