Compare commits

...

1 commit

Author SHA1 Message Date
a81c1ae89f experimenting with ortho 2024-10-02 20:56:14 -05:00
3 changed files with 61 additions and 2 deletions

View file

@ -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]}

View file

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

View file

@ -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;