initial commit

Author: Matthew Oxley

package-lock.json

@@ -11,11 +11,17 @@
     "@testing-library/jest-dom": "^5.12.0",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
+    "@types/jest": "^27.0.2",
+    "@types/node": "^16.11.7",
+    "@types/react": "^17.0.34",
+    "@types/react-dom": "^17.0.11",
     "aphrodite": "^2.4.0",
+    "camera-controls": "^1.33.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
     "three": "^0.128.0",
+    "typescript": "^4.4.4",
     "web-vitals": "^1.1.2",
     "zustand": "^3.5.1"
   },
@@ -42,5 +48,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/three": "^0.134.0"
   }
 }

package.json

@@ -1,21 +1,37 @@
-import './App.css';
-import Box from './components/Box';
-import { OrbitControls, Stats } from '@react-three/drei';
-import { Canvas } from '@react-three/fiber';
+import "./App.css";
+import React from "react";
+import Box from "./components/Box";
+import { OrthographicCamera, OrbitControls } from "@react-three/drei";
+import { Stats } from "@react-three/drei";
+import { Canvas } from "@react-three/fiber";
+import OrthographicNavigationControls from "./OrthographicNavigationControls";
 
 function App() {
-
-
+  const myCamera = React.useRef();
   return (
     <>
-    <Canvas>
-      <ambientLight />
-      <pointLight position={[10, 10, 10]} />
-      <OrbitControls />
-      <Box position={[-1.2, 0, 0]} />
-      <Box position={[1.2, 0, 0]} />
-      <Stats />
-    </Canvas>
+      <Canvas>
+        <ambientLight />
+        <axesHelper args={[10]} />
+        <pointLight position={[10, 10, 10]} />
+        <>
+          <OrthographicCamera
+            position={[0, 0, 3]} // Z is up in CAD land
+            // up={[0, 0, 1]} // Z is up in CAD land
+            makeDefault={true}
+            far={1000}
+            // left={-5}
+            // right={5}
+            near={0.1}
+            zoom={100}
+            userData={{ main2d: true }}
+            ref={myCamera}
+          />
+          <OrbitControls camera={myCamera.current} />
+        </>
+        <Box position={[0, 0, 0]} camera={myCamera}/>
+        <Stats />
+      </Canvas>
     </>
   );
 }