experimenting with ortho

src/App.tsx

@@ -1,15 +1,25 @@
 import { Canvas } from "@react-three/fiber";
-import { OrbitControls } from "@react-three/drei";
+import {
+  OrbitControls,
+  OrthographicCamera,
+  type OrbitControlsChangeEvent,
+} from "@react-three/drei";
 
 import styles from "./styles.module.scss";
 import "katex/dist/katex.min.css";
 import Point from "./components/Point";
 import Path from "./components/Path";
 import { SettingsBox } from "./SettingsContext";
+import { useCallback, useState } from "react";
+import { atom, useAtom } from "jotai";
+import { Euler, type Matrix4 } from "three";
 
 // https://threejs.org/manual/#en/align-html-elements-to-3d
 
 function App() {
+  const [rotationMatrix, setRotationMatrix] = useState<Matrix4 | undefined>(
+    undefined,
+  );
   let coords: [number, number, number][] = [
     [0, 0, 0],
     [0, 0, 1],
@@ -35,11 +45,48 @@ function App() {
         a3 <= b3,
     );
 
+  const orbitChange = useCallback((evt?: OrbitControlsChangeEvent) => {
+    // if (evt) setRotation(evt.target.object.rotation);
+    console.log(evt?.target.object.toJSON());
+    setRotationMatrix(evt?.target.object.matrix);
+  }, []);
+
   return (
     <div className={styles.container}>
       <SettingsBox />
+      <div className={styles.coordsBox}>
+        <Canvas>
+          <OrthographicCamera
+            makeDefault
+            zoom={200}
+            top={200}
+            bottom={-200}
+            left={-200}
+            right={200}
+            near={-1.5}
+            far={1.5}
+            matrix={rotationMatrix}
+            position={[200, 0, 0]}
+          >
+            <axesHelper />
+          </OrthographicCamera>
+        </Canvas>
+      </div>
       <Canvas className={styles.canvas}>
-        <OrbitControls />
+        <OrthographicCamera
+          makeDefault
+          zoom={200}
+          top={200}
+          bottom={-200}
+          left={-200}
+          right={200}
+          near={-1.5}
+          far={1.5}
+          matrix={rotationMatrix}
+          position={[200, 0, 0]}
+        />
+        <OrbitControls onChange={orbitChange} makeDefault />
+
         <ambientLight intensity={Math.PI / 2} />
         <spotLight
           position={[10, 10, 10]}

src/components/EditBox.module.scss

@@ -1,5 +1,7 @@
 .editBox {
     padding: 4px;
+
+    transform: translateX(-50%) translateY(-50%);
 }
 
 .empty {

src/styles.module.scss

@@ -6,6 +6,16 @@
     height: 100%;
 }
 
+.coordsBox {
+    grid-area: 1 / 1;
+    place-self: start end;
+    width: 120px;
+    height: 120px;
+    border: 1px solid gray;
+    z-index: 60;
+    ;
+}
+
 .canvas {
     grid-area: 1 / 1;
     position: relative;