experimenting with ortho

This commit is contained in:
Michael Zhang 2024-10-02 20:56:14 -05:00
parent 069a35e959
commit a81c1ae89f
3 changed files with 61 additions and 2 deletions

View file

@ -1,15 +1,25 @@
import { Canvas } from "@react-three/fiber"; 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 styles from "./styles.module.scss";
import "katex/dist/katex.min.css"; import "katex/dist/katex.min.css";
import Point from "./components/Point"; import Point from "./components/Point";
import Path from "./components/Path"; import Path from "./components/Path";
import { SettingsBox } from "./SettingsContext"; 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 // https://threejs.org/manual/#en/align-html-elements-to-3d
function App() { function App() {
const [rotationMatrix, setRotationMatrix] = useState<Matrix4 | undefined>(
undefined,
);
let coords: [number, number, number][] = [ let coords: [number, number, number][] = [
[0, 0, 0], [0, 0, 0],
[0, 0, 1], [0, 0, 1],
@ -35,11 +45,48 @@ function App() {
a3 <= b3, 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 ( return (
<div className={styles.container}> <div className={styles.container}>
<SettingsBox /> <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}> <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} /> <ambientLight intensity={Math.PI / 2} />
<spotLight <spotLight
position={[10, 10, 10]} position={[10, 10, 10]}

View file

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

View file

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