v0.06

Author: ANYhackerfort

src/Assisstant/alltogether.tsx

@@ -10,7 +10,6 @@ const ChatComponent: React.FC<ChatComponentProps> = ({ onMessageClicked }) => {
   const [chatBoxOpen, setChatBoxOpen] = useState(false)
 
   const toggleChatBox = () => {
-    console.log("AAA")
     setChatBoxOpen((prev) => !prev)
   }
 

src/Assisstant/assiantIcon.tsx

@@ -1,6 +1,6 @@
 import React from "react"
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { faUserTie } from "@fortawesome/free-solid-svg-icons"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import "./style.css" // Import the external CSS file
 
 interface CircleButtonProps {
@@ -26,20 +26,16 @@ const CircleButton: React.FC<CircleButtonProps> = ({
     }
   }
 
-  const assistantIcon = (
-    <FontAwesomeIcon
-      icon={faUserTie}
-      style={{ fontSize: "2em", color: "rgba(0, 0, 0, 0.5)" }} // Customize icon style here
-    />
-  )
-
   return (
     <div
       className="circle-button"
       onClick={onClick}
       style={getPositionStyles()}
     >
-      {assistantIcon}
+      <FontAwesomeIcon
+        icon={faUserTie}
+        style={{ fontSize: "2em", color: "rgba(0, 0, 0, 0.5)" }} // Customize icon style here
+      />
     </div>
   )
 }

src/LABS/Lab1MainComponent.tsx

@@ -1,96 +1,32 @@
 import React, { useState, useRef, Suspense } from "react";
-import { Canvas, useFrame } from "@react-three/fiber";
-import { OrbitControls, PerspectiveCamera, Environment } from "@react-three/drei";
+import { Canvas } from "@react-three/fiber";
+import { PerspectiveCamera, Environment } from "@react-three/drei";
 import * as THREE from "three";
 import CornerText from "../miscellaneous/2DTexts/2dText.tsx";
-import ChatComponent from "../Assisstant/alltogether";
-import CircularTherm from "../labComponents/SmallInstruments/circularTherm/ThermometerMainComponent.tsx";
-import SmallKnob from "../labComponents/knobs/smallKnob.tsx";
-import BigKnob from "../labComponents/knobs/currentKnob.tsx";
 import Grid from "../miscellaneous/planks/grid.tsx";
 import RaycastingComponent from "../raycasters/lab1Raycaster.tsx";
-import LightSwitch from "../clickables/VVR_switch/switchAndCasing.tsx";
 import DVM from "../labComponents/FrankHertzMainComp/digitalVoltmeter.tsx";
-import { FrontFaceContextProvider } from "../contexts/frontFaceContext.tsx";
-import { useFrontFaceContext } from "../hooks/useFrontFaceContext.tsx";
 import TripleOutput from "../labComponents/FrankHertzMainComp/tripleOutPutPowerSupply/mainComponent.tsx";
 import CurrentInstrument from "../labComponents/FrankHertzMainComp/currentInstrument.tsx";
 import OakPlank from "../miscellaneous/planks/lightOak.tsx";
 import FrankHertzMain from "../labComponents/FrankHertzMainComp/frankHertz.tsx";
 import CurrentRegulator from "../labComponents/FrankHertzMainComp/currentRegulator.tsx";
 import ControlsComponent from "../miscellaneous/controls/cameracontrol.tsx";
 import VVR from "../labComponents/FrankHertzMainComp/VariableVoltageRegulator/mainframe.tsx";
-
-interface CameraProps {
-  xN: number
-  yN: number
-  zN: number
-}
-
-const Camera: React.FC<CameraProps> = ({ xN, yN, zN }) => {
-  const frameCounter = useRef(0) // Counter for frames
-  const interval = 60 // Check visibility every 60 frames (~1 second at 60 FPS)
-
-  const { isFrontFaceVisible, setFrontFaceVisibility } = useFrontFaceContext()
-
-  useFrame(({ camera }) => {
-    frameCounter.current += 1
-
-    if (frameCounter.current >= interval) {
-      const isCameraBehind = camera.position.z < 0
-
-      if (isCameraBehind && !isFrontFaceVisible) {
-        setFrontFaceVisibility(true)
-        console.log("Camera is behind: Dial is updating", isFrontFaceVisible)
-      } else if (!isCameraBehind && isFrontFaceVisible) {
-        setFrontFaceVisibility(false)
-        console.log(
-          "Camera is in front: Dial is not updating",
-          isFrontFaceVisible,
-        )
-      }
-
-      frameCounter.current = 0 // Reset the frame counter after 1 second
-    }
-  })
-
-  return (
-    <PerspectiveCamera
-      makeDefault
-      position={[xN, yN, zN]}
-      fov={75}
-      aspect={window.innerWidth / window.innerHeight}
-      near={0.1}
-      far={1000}
-    />
-  )
-}
+import FloatingSquare from "../taskbar/mainBlock.tsx";
+import { CameraProvider } from "../contexts/cameraPositionContext.tsx";
+import Lab1Camera from "./cameras/lab1Camera.tsx";
 
 const GraphPaperComponent: React.FC = () => {
-  const [position, setPosition] = useState({ x: 0, y: 50, z: 80 });
-  const [key, setKey] = useState(0);
-  const [reversedString, setReversedString] = useState<string | null>(null);
-  
-  const handleStubMessageClick = () => {
-    setPosition({ x: 10, y: 10, z: 10 })
-    setKey((prev) => prev + 1)
-  }
-
   return (
     <Suspense
       fallback={<CornerText position="top-left" text="Loading your Lab..." />}
     >
+      <CameraProvider>
+
       <div style={{ width: "100vw", height: "100vh", overflow: "hidden" }}>
         <CornerText position="top-left" text="Frank-Hertz Lab" />
-        <ChatComponent onMessageClicked={handleStubMessageClick} />
-        {reversedString && (
-          <div
-            style={{ position: "absolute", top: 0, left: 0, color: "white" }}
-          >
-            {`Reversed: ${reversedString}`}
-          </div>
-        )}
-
+        <FloatingSquare />
         <Canvas
           gl={{ antialias: true }}
           onCreated={({ gl, scene }) => {
@@ -103,16 +39,14 @@ const GraphPaperComponent: React.FC = () => {
           <RaycastingComponent />
 
           {/* Camera and Thermometer */}
-          <FrontFaceContextProvider>
-            <Camera key={key} xN={position.x} yN={position.y} zN={position.z} />
-          </FrontFaceContextProvider>
+          <Lab1Camera/>
 
           {/* Ambient Light */}
           <Environment files="/environment/sky.hdr" background />
           <ambientLight intensity={1}/>
 
           {/* Controls */}
-         <ControlsComponent />
+         {/* <ControlsComponent /> */}
 
           {/* Components: From Bottom to Top*/}
           <Grid />
@@ -123,9 +57,9 @@ const GraphPaperComponent: React.FC = () => {
           <CurrentRegulator position={[40, 26, 5]}/>
           <DVM position={[20, 30, 23]} scale={[1.7, 1.7, 1.85]} unique_id="DVM_2"/>
           <VVR position={[-30, 24, 2]} />
-          <DVM position={[30, 80, 8]} scale={[1.7, 1.7, 1.85]} rotation={[0, Math.PI, 0]} unique_id="DVM_1"/>
-        </Canvas>
+          <DVM position={[30, 80, 8]} scale={[1.7, 1.7, 1.85]} rotation={[0, Math.PI, 0]} unique_id="DVM_1"/>        </Canvas>
       </div>
+      </CameraProvider>
     </Suspense>
   )
 }

src/LABS/cameras/lab1Camera.tsx

@@ -0,0 +1,111 @@
+import React, { useEffect, useRef } from "react";
+import { useMemo } from "react";
+import { PerspectiveCamera } from "@react-three/drei";
+import * as THREE from "three";
+import { useFrame, useThree } from "@react-three/fiber"
+import { useCameraState } from "../../contexts/cameraPositionContext";
+import ControlsComponent from "../../miscellaneous/controls/cameracontrol";
+
+const Lab1Camera: React.FC = () => {
+    const cameraRef = useRef<THREE.PerspectiveCamera | null>(null); // Create a ref for the camera
+    const { currentPosition } = useCameraState(); // Access currentPosition from context
+
+    const raycasterRef = useRef(new THREE.Raycaster())
+    const intersectsRef = useRef<THREE.Intersection[]>([]);
+    const { scene } = useThree();
+
+    const setCameraRef = (camera: THREE.PerspectiveCamera | null) => {
+        if (camera) {
+          cameraRef.current = camera;
+        }
+    };
+
+    const objectDictionaryRef = useRef<Record<string, THREE.Object3D>>({});
+
+    const glow = (object: THREE.Object3D, glowColor: THREE.ColorRepresentation = 0xfff000) => {
+        if (object instanceof THREE.Mesh) {
+          // Check if the object is already glowing
+          if (object.userData.glowMesh) {
+            console.warn("The object is already glowing.");
+            return;
+          }
+      
+          // Create a glow material
+          const glowMaterial = new THREE.MeshBasicMaterial({
+            color: glowColor,
+            transparent: true,
+            opacity: 0.45, // Adjust for intensity
+          });
+      
+          // Clone the object's geometry for the glow effect
+          const glowGeometry = object.geometry.clone();
+          const glowMesh = new THREE.Mesh(glowGeometry, glowMaterial);
+      
+          // Scale the glow mesh slightly larger than the object
+            glowMesh.position.copy(object.position);
+          glowMesh.rotation.copy(object.rotation);
+      
+          // Add the glow mesh to the scene or as a child of the object
+          object.add(glowMesh);
+      
+          // Store the glow mesh in the userData
+          object.userData.glowMesh = glowMesh;
+      
+          // Remove the glow effect after 3 seconds
+          setTimeout(() => {
+            if (object.userData.glowMesh) {
+              object.remove(object.userData.glowMesh);
+              object.userData.glowMesh = null;
+            }
+          }, 3000);
+        } else {
+          console.warn("The object is not a Mesh.");
+        }
+      };
+      
+
+    useEffect(() => {
+        const updateRaycaster = async () => {
+          if (cameraRef.current) {
+            // Update the camera position
+            // cameraRef.current.position.set(currentPosition.x, currentPosition.y, currentPosition.z);
+            cameraRef.current.lookAt(currentPosition.x, currentPosition.y, currentPosition.z);
+            // Update the raycaster from the camera's perspective
+            raycasterRef.current.setFromCamera(new THREE.Vector2(0, 0), cameraRef.current);
+    
+            // Update raycaster settings
+            raycasterRef.current.params.Points.threshold = 0.1;
+    
+            // Find intersections
+            intersectsRef.current = raycasterRef.current.intersectObjects(scene.children, true);
+    
+            // Log the first intersected object, if any
+            if (intersectsRef.current.length > 0) {
+              console.log("First object in view:", intersectsRef.current[0].object.userData.type);
+              glow(intersectsRef.current[0].object);
+            } else {
+              console.log("No objects in view.");
+            }
+          }
+        };
+    
+        updateRaycaster();
+      }, [currentPosition, scene]);
+
+    return (
+        <>
+            <PerspectiveCamera
+                ref={setCameraRef} // Attach the callback ref to ensure proper synchronization
+                makeDefault
+                position={[currentPosition.x, currentPosition.y, currentPosition.z]} // Initial position
+                fov={75}
+                aspect={window.innerWidth / window.innerHeight}
+                near={0.1}
+                far={1000}
+            />
+            <ControlsComponent />
+        </>
+    );
+};
+
+export default Lab1Camera;

src/contexts/cameraPositionContext.tsx

@@ -0,0 +1,60 @@
+import React, { createContext, useContext, useState } from "react";
+
+interface CameraPosition {
+  x: number;
+  y: number;
+  z: number;
+}
+
+interface CameraState {
+  currentPosition: CameraPosition;
+  setPosition: (objectIntention: string) => void;
+}
+
+const CameraContext = createContext<CameraState | null>(null);
+
+export const CameraProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  // Dictionary for predefined positions
+  const initialPositions: Record<string, CameraPosition> = {
+    circular_thermometer: { x: -15, y: 120, z: -10 },
+    dcv: { x: -80, y: 40, z: 5 },
+    VVR_knob: { x: 4, y: 5, z: 6 },
+    vvr: { x: -80, y: 35, z: 5 },
+    frank_hertz_chasis: { x: 10, y: 11, z: 12 },
+  };
+
+  // State to track only the current camera position
+  const [currentPosition, setCurrentPosition] = useState<CameraPosition>({
+    x: 0,
+    y: 50,
+    z: 80, // Default starting position
+  });
+
+  const setPosition = (objectIntention: string) => {
+    const position = initialPositions[objectIntention];
+    if (!position) {
+      console.warn(`No camera position found for object: ${objectIntention}`);
+      return;
+    }
+    const randomOffset = Math.random() * 0.001 + 0.001; // Random value between 0.001 and 0.002
+    position.x += randomOffset;
+
+    // Update the current camera position
+    setCurrentPosition(position);
+    console.log(`Camera updated to position for ${objectIntention}:`, position);
+  };
+
+  return (
+    <CameraContext.Provider value={{ currentPosition, setPosition }}>
+      {children}
+    </CameraContext.Provider>
+  );
+};
+
+export const useCameraState = () => {
+  const context = useContext(CameraContext);
+  if (!context) {
+    throw new Error("useCameraState must be used within a CameraProvider");
+  }
+  return context;
+};

src/miscellaneous/controls/cameracontrol.tsx

@@ -1,20 +1,15 @@
-import React, { useRef, useEffect } from 'react';
+import React, { useRef, useEffect, useMemo } from 'react';
 import { OrbitControls } from '@react-three/drei';
 import * as THREE from 'three';
+import { useThree } from '@react-three/fiber';
+import { useCameraState } from '../../contexts/cameraPositionContext';
 
-const ControlsComponent = () => {
-//   const controlsRef = useRef<THREE.OrbitControls>(null);
-
-//   useEffect(() => {
-//     if (controlsRef.current) {
-//       // Update the controls' target
-//       controlsRef.current.target.set(1, 2, 3); // Example: set to position (1, 2, 3)
-//       controlsRef.current.update(); // Update the controls to reflect the new target
-//     }
-//   }, []);
+const ControlsComponent: React.FC = () => {
+  const controlsRef = useRef(null);
 
   return (
     <OrbitControls
+      ref={controlsRef}
       enableDamping
       dampingFactor={0.1}
       rotateSpeed={0.4}

src/raycasters/lab1Raycaster.tsx

@@ -20,7 +20,7 @@ const RaycastingComponent: React.FC = () => {
       mouseRef.current.x = ((event.clientX - rect.left) / rect.width) * 2 - 1
       mouseRef.current.y = -((event.clientY - rect.top) / rect.height) * 2 + 1
     }
-
+    
     const handleMouseDown = (event: MouseEvent) => {
       if (event.button === 0) {
         setIsMouseDown(true)