import { Canvas } from '@react-three/fiber';
import { observer } from 'mobx-react-lite';
import { state } from '../state';
import { WorldView } from './WorldView';

export const ThreeView = observer(function () {
    return (
        <div style={{ width: '800px', height: '600px', border: '1px solid #333', borderRadius: '8px', overflow: 'hidden' }}>
            <Canvas
                camera={state.world.character.camera}
                onPointerMissed={() => state.worldEditor.setSelectedObjectId(undefined)}
            >
                <WorldView />
            </Canvas>
        </div>
    )
});