Added basic stuff for car indication flashing

Co-authored-by: JenniferJa <[email protected]>
UCSolarCarTeam · Feb 13, 2024 · 74ca79b · 74ca79b
1 parent 9b11800
commit 74ca79b
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 39 deletions.
diff --git a/app/src/renderer/code/components/molecules/HeroMolecules/CarGraphicComponent.tsx b/app/src/renderer/code/components/molecules/HeroMolecules/CarGraphicComponent.tsx
@@ -7,13 +7,13 @@ import { ContactShadows, OrbitControls } from "@react-three/drei";
 import { Canvas } from "@react-three/fiber";
 import * as TWEEN from "@tweenjs/tween.js";
 
-enum IndicationStates {
+export enum IndicationStates {
   RED,
   ORANGE,
   CLEAR,
 }
 
-type IndicationLocations = {
+export type IndicationLocations = {
   leftMotor: IndicationStates;
   rightMotor: IndicationStates;
   battery: IndicationStates;
@@ -33,45 +33,40 @@ function CarGraphicComponent(props: any) {
     solarPanel: IndicationStates.CLEAR,
   });
 
-  const [errorMaterial, setErrorMaterial] = useState(
-    new THREE.MeshStandardMaterial({ color: 0xff0000 }),
-  );
-  const [warningMaterial, setWarningMaterial] = useState(
-    new THREE.MeshStandardMaterial({ color: 0xffa500 }),
-  );
+  const errorMaterial = new THREE.MeshStandardMaterial({
+    color: 0xff0000,
+    transparent: true,
+    opacity: 0.8,
+  });
 
-  useEffect(() => {
-    animateEmissive();
-  }, []);
+  const warningMaterial = new THREE.MeshStandardMaterial({
+    color: 0xffa500,
+    transparent: true,
+    opacity: 0.8,
+  });
+
+  const initialIntensity = 0.1;
+  const targetIntensity = 0.8;
+  const duration = 500;
 
-  // new TWEEN.Tween(errorMaterial)
-  //   .to({ r: 1, g: 0, b: 0 }, 1000)
-  //   .easing(TWEEN.Easing.Quartic.In)
-  //   .onUpdate(function () {
-  //     setErrorMaterial(new THREE.MeshStandardMaterial({ color: 0xff0000 }));
-  //   })
-  //   .start();
+  const tween = new TWEEN.Tween({ intensity: initialIntensity })
+    .to({ intensity: targetIntensity }, duration)
+    .easing(TWEEN.Easing.Quadratic.InOut)
 
-  const animateEmissive = () => {
-    const initialIntensity = 0.5;
-    const targetIntensity = 2.0;
-    const duration = 1000;
+    .onUpdate(({ intensity }) => {
+      errorMaterial.opacity = intensity;
+      warningMaterial.opacity = intensity;
+    })
+    .yoyo(true)
+    .start()
+    .repeat(Infinity);
 
-    new TWEEN.Tween({ intensity: initialIntensity })
-      .to({ intensity: targetIntensity }, duration)
-      .easing(TWEEN.Easing.Quadratic.InOut)
-      .start()
-      .onUpdate(({ intensity }) => {
-        console.log("Intensity:", intensity);
-        // setErrorMaterial((prevMaterial) => {
-        //   const newMaterial = prevMaterial.clone();
-        //   newMaterial.emissiveIntensity = intensity;
-        //   return newMaterial;
-        // });
-      })
-      .yoyo(true)
-      .repeat(-1);
-  };
+  // Setup the animation loop.
+  function animate(time: number) {
+    tween.update(time);
+    requestAnimationFrame(animate);
+  }
+  animate(1);
 
   return (
     <>
@@ -82,7 +77,12 @@ function CarGraphicComponent(props: any) {
           shadow-mapSize={[512, 512]}
           castShadow
         />
-        <CarModelComponent isClear={isClear} testMaterial={errorMaterial} />
+        <CarModelComponent
+          isClear={isClear}
+          errorMaterial={errorMaterial}
+          warningMaterial={warningMaterial}
+          indications={indications}
+        />
         <RoadComponent speed={7} size={15} />
         <ContactShadows
           position={[0, 0, 0]}

diff --git a/app/src/renderer/code/components/molecules/HeroMolecules/CarMolecules/CarModelComponent.tsx b/app/src/renderer/code/components/molecules/HeroMolecules/CarMolecules/CarModelComponent.tsx
@@ -4,6 +4,8 @@ import { type GLTF } from "three-stdlib";
 
 import { useGLTF } from "@react-three/drei";
 
+import { IndicationLocations, IndicationStates } from "../CarGraphicComponent";
+
 type HeliosCar = GLTF & {
   nodes: {
     Plane: THREE.Mesh;
@@ -147,6 +149,9 @@ type HeliosCar = GLTF & {
 
 type CarModelComponentProps = {
   isClear: boolean;
+  errorMaterial: THREE.MeshStandardMaterial;
+  warningMaterial: THREE.MeshStandardMaterial;
+  indications: IndicationLocations;
 };
 
 export function CarModelComponent(props: CarModelComponentProps) {
@@ -567,7 +572,7 @@ export function CarModelComponent(props: CarModelComponentProps) {
         castShadow
         receiveShadow
         geometry={nodes.Shape_IndexedFaceSet050.geometry}
-        material={props.testMaterial}
+        material={props.warningMaterial}
         position={[-31.75, 0, -2872.13]}
         rotation={[Math.PI / 2, 0, -Math.PI]}
       />