control bar

packages/viewer/src/components/viewer/index.tsx

@@ -7,6 +7,7 @@ import * as THREE from 'three/webgpu'
 import { LevelSystem } from '../../systems/level/level-system'
 import { SceneRenderer } from '../renderers/scene-renderer'
 import PostProcessing from './post-processing'
+import { ViewerCamera } from './viewer-camera'
 
 declare module '@react-three/fiber' {
   interface ThreeElements extends ThreeToJSXElements<typeof THREE> {}
@@ -31,6 +32,7 @@ const Viewer: React.FC<ViewerProps> = ({ children }) => {
       camera={{ position: [50, 50, 50], fov: 50 }}
     >
       <color attach="background" args={['#ececec']} />
+      <ViewerCamera />
 
       <directionalLight position={[10, 10, 5]} intensity={0.5} castShadow />
       <Environment preset="sunset" environmentIntensity={0.3} />

packages/viewer/src/components/viewer/viewer-camera.tsx

@@ -0,0 +1,11 @@
+import { OrthographicCamera, PerspectiveCamera } from "@react-three/drei"
+import useViewer from "../../store/use-viewer"
+
+export const ViewerCamera = () => {
+  const cameraMode = useViewer((state) => state.cameraMode)
+  return cameraMode === 'perspective' ? (
+        <PerspectiveCamera far={1000} fov={50} makeDefault near={0.1} position={[10, 10, 10]} />
+      ) : (
+        <OrthographicCamera far={1000} makeDefault near={-1000} position={[10, 10, 10]} zoom={20} />
+      )
+}