Skip to content

Commit 6e5dafb

Browse files
youwen5youwen5
committed
chore: run treefmt
1 parent 3fdb3f3 commit 6e5dafb

29 files changed

+778
-713
lines changed

‎src/LABS/Lab1MainComponent.tsx

+59-54
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,69 @@
1-
import React, { useState, useRef, Suspense } from "react";
2-
import { Canvas } from "@react-three/fiber";
3-
import { PerspectiveCamera, Environment } from "@react-three/drei";
4-
import * as THREE from "three";
5-
import CornerText from "../miscellaneous/2DTexts/2dText.tsx";
6-
import Grid from "../miscellaneous/planks/grid.tsx";
7-
import RaycastingComponent from "../raycasters/lab1Raycaster.tsx";
8-
import DVM from "../labComponents/FrankHertzMainComp/digitalVoltmeter.tsx";
9-
import TripleOutput from "../labComponents/FrankHertzMainComp/tripleOutPutPowerSupply/mainComponent.tsx";
10-
import CurrentInstrument from "../labComponents/FrankHertzMainComp/currentInstrument.tsx";
11-
import OakPlank from "../miscellaneous/planks/lightOak.tsx";
12-
import FrankHertzMain from "../labComponents/FrankHertzMainComp/frankHertz.tsx";
13-
import CurrentRegulator from "../labComponents/FrankHertzMainComp/currentRegulator.tsx";
14-
import ControlsComponent from "../miscellaneous/controls/cameracontrol.tsx";
15-
import VVR from "../labComponents/FrankHertzMainComp/VariableVoltageRegulator/mainframe.tsx";
16-
import FloatingSquare from "../taskbar/mainBlock.tsx";
17-
import { CameraProvider } from "../contexts/cameraPositionContext.tsx";
18-
import Lab1Camera from "./cameras/lab1Camera.tsx";
1+
import React, { useState, useRef, Suspense } from "react"
2+
import { Canvas } from "@react-three/fiber"
3+
import { PerspectiveCamera, Environment } from "@react-three/drei"
4+
import * as THREE from "three"
5+
import CornerText from "../miscellaneous/2DTexts/2dText.tsx"
6+
import Grid from "../miscellaneous/planks/grid.tsx"
7+
import RaycastingComponent from "../raycasters/lab1Raycaster.tsx"
8+
import DVM from "../labComponents/FrankHertzMainComp/digitalVoltmeter.tsx"
9+
import TripleOutput from "../labComponents/FrankHertzMainComp/tripleOutPutPowerSupply/mainComponent.tsx"
10+
import CurrentInstrument from "../labComponents/FrankHertzMainComp/currentInstrument.tsx"
11+
import OakPlank from "../miscellaneous/planks/lightOak.tsx"
12+
import FrankHertzMain from "../labComponents/FrankHertzMainComp/frankHertz.tsx"
13+
import CurrentRegulator from "../labComponents/FrankHertzMainComp/currentRegulator.tsx"
14+
import ControlsComponent from "../miscellaneous/controls/cameracontrol.tsx"
15+
import VVR from "../labComponents/FrankHertzMainComp/VariableVoltageRegulator/mainframe.tsx"
16+
import FloatingSquare from "../taskbar/mainBlock.tsx"
17+
import { CameraProvider } from "../contexts/cameraPositionContext.tsx"
18+
import Lab1Camera from "./cameras/lab1Camera.tsx"
1919

2020
const GraphPaperComponent: React.FC = () => {
2121
return (
2222
<Suspense
2323
fallback={<CornerText position="top-left" text="Loading your Lab..." />}
2424
>
2525
<CameraProvider>
26-
27-
<div style={{ width: "100vw", height: "100vh", overflow: "hidden" }}>
28-
<CornerText position="top-left" text="Frank-Hertz Lab" />
29-
<FloatingSquare />
30-
<Canvas
31-
gl={{ antialias: true }}
32-
onCreated={({ gl, scene }) => {
33-
gl.toneMapping = THREE.ACESFilmicToneMapping
34-
gl.toneMappingExposure = 0.7 // Reduce exposure for less intensity
35-
scene.environmentIntensity = 0.5 // Reduce environment lighting
36-
}}
37-
>
38-
{/* Raycasting Component */}
39-
<RaycastingComponent />
40-
41-
{/* Camera and Thermometer */}
42-
<Lab1Camera/>
43-
44-
{/* Ambient Light */}
45-
<Environment files="/environment/sky.hdr" background />
46-
<ambientLight intensity={1}/>
47-
48-
{/* Controls */}
49-
{/* <ControlsComponent /> */}
50-
51-
{/* Components: From Bottom to Top*/}
52-
<Grid />
53-
<TripleOutput position={[-22, -0.3, 22]} />
54-
<CurrentInstrument position={[27, 0.5, 0]} />
55-
<OakPlank />
56-
<FrankHertzMain position={[5, 12, 0]}/>
57-
<CurrentRegulator position={[40, 26, 5]}/>
58-
<DVM position={[20, 30, 23]} scale={[1.7, 1.7, 1.85]} unique_id="DVM_2"/>
59-
<VVR position={[-30, 24, 2]} />
60-
<DVM position={[30, 80, 8]} scale={[1.7, 1.7, 1.85]} rotation={[0, Math.PI, 0]} unique_id="DVM_1"/> </Canvas>
61-
</div>
26+
<div style={{ width: "100vw", height: "100vh", overflow: "hidden" }}>
27+
<CornerText position="top-left" text="Frank-Hertz Lab" />
28+
<FloatingSquare />
29+
<Canvas
30+
gl={{ antialias: true }}
31+
onCreated={({ gl, scene }) => {
32+
gl.toneMapping = THREE.ACESFilmicToneMapping
33+
gl.toneMappingExposure = 0.7 // Reduce exposure for less intensity
34+
scene.environmentIntensity = 0.5 // Reduce environment lighting
35+
}}
36+
>
37+
{/* Raycasting Component */}
38+
<RaycastingComponent />
39+
{/* Camera and Thermometer */}
40+
<Lab1Camera />
41+
{/* Ambient Light */}
42+
<Environment files="/environment/sky.hdr" background />
43+
<ambientLight intensity={1} />
44+
{/* Controls */}
45+
{/* <ControlsComponent /> */}
46+
{/* Components: From Bottom to Top*/}
47+
<Grid />
48+
<TripleOutput position={[-22, -0.3, 22]} />
49+
<CurrentInstrument position={[27, 0.5, 0]} />
50+
<OakPlank />
51+
<FrankHertzMain position={[5, 12, 0]} />
52+
<CurrentRegulator position={[40, 26, 5]} />
53+
<DVM
54+
position={[20, 30, 23]}
55+
scale={[1.7, 1.7, 1.85]}
56+
unique_id="DVM_2"
57+
/>
58+
<VVR position={[-30, 24, 2]} />
59+
<DVM
60+
position={[30, 80, 8]}
61+
scale={[1.7, 1.7, 1.85]}
62+
rotation={[0, Math.PI, 0]}
63+
unique_id="DVM_1"
64+
/>{" "}
65+
</Canvas>
66+
</div>
6267
</CameraProvider>
6368
</Suspense>
6469
)

‎src/LABS/cameras/lab1Camera.tsx

+118-103
Original file line numberDiff line numberDiff line change
@@ -1,111 +1,126 @@
1-
import React, { useEffect, useRef } from "react";
2-
import { useMemo } from "react";
3-
import { PerspectiveCamera } from "@react-three/drei";
4-
import * as THREE from "three";
1+
import React, { useEffect, useRef } from "react"
2+
import { useMemo } from "react"
3+
import { PerspectiveCamera } from "@react-three/drei"
4+
import * as THREE from "three"
55
import { useFrame, useThree } from "@react-three/fiber"
6-
import { useCameraState } from "../../contexts/cameraPositionContext";
7-
import ControlsComponent from "../../miscellaneous/controls/cameracontrol";
6+
import { useCameraState } from "../../contexts/cameraPositionContext"
7+
import ControlsComponent from "../../miscellaneous/controls/cameracontrol"
88

99
const Lab1Camera: React.FC = () => {
10-
const cameraRef = useRef<THREE.PerspectiveCamera | null>(null); // Create a ref for the camera
11-
const { currentPosition } = useCameraState(); // Access currentPosition from context
10+
const cameraRef = useRef<THREE.PerspectiveCamera | null>(null) // Create a ref for the camera
11+
const { currentPosition } = useCameraState() // Access currentPosition from context
1212

13-
const raycasterRef = useRef(new THREE.Raycaster())
14-
const intersectsRef = useRef<THREE.Intersection[]>([]);
15-
const { scene } = useThree();
13+
const raycasterRef = useRef(new THREE.Raycaster())
14+
const intersectsRef = useRef<THREE.Intersection[]>([])
15+
const { scene } = useThree()
1616

17-
const setCameraRef = (camera: THREE.PerspectiveCamera | null) => {
18-
if (camera) {
19-
cameraRef.current = camera;
17+
const setCameraRef = (camera: THREE.PerspectiveCamera | null) => {
18+
if (camera) {
19+
cameraRef.current = camera
20+
}
21+
}
22+
23+
const objectDictionaryRef = useRef<Record<string, THREE.Object3D>>({})
24+
25+
const glow = (
26+
object: THREE.Object3D,
27+
glowColor: THREE.ColorRepresentation = 0xfff000,
28+
) => {
29+
if (object instanceof THREE.Mesh) {
30+
// Check if the object is already glowing
31+
if (object.userData.glowMesh) {
32+
console.warn("The object is already glowing.")
33+
return
34+
}
35+
36+
// Create a glow material
37+
const glowMaterial = new THREE.MeshBasicMaterial({
38+
color: glowColor,
39+
transparent: true,
40+
opacity: 0.45, // Adjust for intensity
41+
})
42+
43+
// Clone the object's geometry for the glow effect
44+
const glowGeometry = object.geometry.clone()
45+
const glowMesh = new THREE.Mesh(glowGeometry, glowMaterial)
46+
47+
// Scale the glow mesh slightly larger than the object
48+
glowMesh.position.copy(object.position)
49+
glowMesh.rotation.copy(object.rotation)
50+
51+
// Add the glow mesh to the scene or as a child of the object
52+
object.add(glowMesh)
53+
54+
// Store the glow mesh in the userData
55+
object.userData.glowMesh = glowMesh
56+
57+
// Remove the glow effect after 3 seconds
58+
setTimeout(() => {
59+
if (object.userData.glowMesh) {
60+
object.remove(object.userData.glowMesh)
61+
object.userData.glowMesh = null
2062
}
21-
};
22-
23-
const objectDictionaryRef = useRef<Record<string, THREE.Object3D>>({});
24-
25-
const glow = (object: THREE.Object3D, glowColor: THREE.ColorRepresentation = 0xfff000) => {
26-
if (object instanceof THREE.Mesh) {
27-
// Check if the object is already glowing
28-
if (object.userData.glowMesh) {
29-
console.warn("The object is already glowing.");
30-
return;
31-
}
32-
33-
// Create a glow material
34-
const glowMaterial = new THREE.MeshBasicMaterial({
35-
color: glowColor,
36-
transparent: true,
37-
opacity: 0.45, // Adjust for intensity
38-
});
39-
40-
// Clone the object's geometry for the glow effect
41-
const glowGeometry = object.geometry.clone();
42-
const glowMesh = new THREE.Mesh(glowGeometry, glowMaterial);
43-
44-
// Scale the glow mesh slightly larger than the object
45-
glowMesh.position.copy(object.position);
46-
glowMesh.rotation.copy(object.rotation);
47-
48-
// Add the glow mesh to the scene or as a child of the object
49-
object.add(glowMesh);
50-
51-
// Store the glow mesh in the userData
52-
object.userData.glowMesh = glowMesh;
53-
54-
// Remove the glow effect after 3 seconds
55-
setTimeout(() => {
56-
if (object.userData.glowMesh) {
57-
object.remove(object.userData.glowMesh);
58-
object.userData.glowMesh = null;
59-
}
60-
}, 3000);
63+
}, 3000)
64+
} else {
65+
console.warn("The object is not a Mesh.")
66+
}
67+
}
68+
69+
useEffect(() => {
70+
const updateRaycaster = async () => {
71+
if (cameraRef.current) {
72+
// Update the camera position
73+
// cameraRef.current.position.set(currentPosition.x, currentPosition.y, currentPosition.z);
74+
cameraRef.current.lookAt(
75+
currentPosition.x,
76+
currentPosition.y,
77+
currentPosition.z,
78+
)
79+
// Update the raycaster from the camera's perspective
80+
raycasterRef.current.setFromCamera(
81+
new THREE.Vector2(0, 0),
82+
cameraRef.current,
83+
)
84+
85+
// Update raycaster settings
86+
raycasterRef.current.params.Points.threshold = 0.1
87+
88+
// Find intersections
89+
intersectsRef.current = raycasterRef.current.intersectObjects(
90+
scene.children,
91+
true,
92+
)
93+
94+
// Log the first intersected object, if any
95+
if (intersectsRef.current.length > 0) {
96+
console.log(
97+
"First object in view:",
98+
intersectsRef.current[0].object.userData.type,
99+
)
100+
glow(intersectsRef.current[0].object)
61101
} else {
62-
console.warn("The object is not a Mesh.");
102+
console.log("No objects in view.")
63103
}
64-
};
65-
66-
67-
useEffect(() => {
68-
const updateRaycaster = async () => {
69-
if (cameraRef.current) {
70-
// Update the camera position
71-
// cameraRef.current.position.set(currentPosition.x, currentPosition.y, currentPosition.z);
72-
cameraRef.current.lookAt(currentPosition.x, currentPosition.y, currentPosition.z);
73-
// Update the raycaster from the camera's perspective
74-
raycasterRef.current.setFromCamera(new THREE.Vector2(0, 0), cameraRef.current);
75-
76-
// Update raycaster settings
77-
raycasterRef.current.params.Points.threshold = 0.1;
78-
79-
// Find intersections
80-
intersectsRef.current = raycasterRef.current.intersectObjects(scene.children, true);
81-
82-
// Log the first intersected object, if any
83-
if (intersectsRef.current.length > 0) {
84-
console.log("First object in view:", intersectsRef.current[0].object.userData.type);
85-
glow(intersectsRef.current[0].object);
86-
} else {
87-
console.log("No objects in view.");
88-
}
89-
}
90-
};
91-
92-
updateRaycaster();
93-
}, [currentPosition, scene]);
94-
95-
return (
96-
<>
97-
<PerspectiveCamera
98-
ref={setCameraRef} // Attach the callback ref to ensure proper synchronization
99-
makeDefault
100-
position={[currentPosition.x, currentPosition.y, currentPosition.z]} // Initial position
101-
fov={75}
102-
aspect={window.innerWidth / window.innerHeight}
103-
near={0.1}
104-
far={1000}
105-
/>
106-
<ControlsComponent />
107-
</>
108-
);
109-
};
110-
111-
export default Lab1Camera;
104+
}
105+
}
106+
107+
updateRaycaster()
108+
}, [currentPosition, scene])
109+
110+
return (
111+
<>
112+
<PerspectiveCamera
113+
ref={setCameraRef} // Attach the callback ref to ensure proper synchronization
114+
makeDefault
115+
position={[currentPosition.x, currentPosition.y, currentPosition.z]} // Initial position
116+
fov={75}
117+
aspect={window.innerWidth / window.innerHeight}
118+
near={0.1}
119+
far={1000}
120+
/>
121+
<ControlsComponent />
122+
</>
123+
)
124+
}
125+
126+
export default Lab1Camera

0 commit comments

Comments
 (0)