55 lines
1.7 KiB
TypeScript
55 lines
1.7 KiB
TypeScript
import { Suspense, useRef } from 'react';
|
|
import type React from 'react';
|
|
import { OrbitControls } from '@react-three/drei';
|
|
import { observer } from 'mobx-react-lite';
|
|
import { state } from '../state';
|
|
import { SceneView } from './SceneView';
|
|
import { MOUSE, type OrthographicCamera, type PerspectiveCamera } from 'three';
|
|
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);
|
|
|
|
useSyncCamera(() => state.view.camera.camera);
|
|
|
|
const handleEnd = () => {
|
|
const controls = controlsRef.current;
|
|
if (!controls)
|
|
return;
|
|
|
|
const [x, y, z] = controls.object.rotation.toArray();
|
|
state.view.camera.camera = {
|
|
position: controls.object.position.toArray(),
|
|
look: [x, y, z],
|
|
};
|
|
};
|
|
|
|
return (<>
|
|
<Suspense>
|
|
<OrbitControls
|
|
ref={controlsRef}
|
|
onEnd={handleEnd}
|
|
makeDefault
|
|
mouseButtons={{
|
|
LEFT: MOUSE.PAN,
|
|
MIDDLE: MOUSE.ROTATE,
|
|
RIGHT: MOUSE.ROTATE,
|
|
}}
|
|
rotateSpeed={0.2}
|
|
enableDamping={false}
|
|
/>
|
|
{/* <Grid
|
|
sectionThickness={0.5}
|
|
cellThickness={0}
|
|
sectionColor="white"
|
|
infiniteGrid
|
|
/> */}
|
|
<Physics colliders={false} paused={true}>
|
|
<SceneView scene={state.worldEditor.scene} isEditor debugOverlay />
|
|
</Physics>
|
|
</Suspense>
|
|
</>);
|
|
});
|