Add textures to car graphic

app/src/renderer/code/components/molecules/HeroMolecules/CarGraphicComponent.tsx

@@ -1,13 +1,77 @@
-/* eslint-disable react/no-unknown-property */
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import * as THREE from "three";
 
 import { CarModelComponent } from "@/components/molecules/HeroMolecules/CarMolecules/CarModelComponent";
 import { RoadComponent } from "@/components/molecules/HeroMolecules/CarMolecules/RoadComponent";
 import { ContactShadows, OrbitControls } from "@react-three/drei";
 import { Canvas } from "@react-three/fiber";
+import * as TWEEN from "@tweenjs/tween.js";
+
+enum IndicationStates {
+  RED,
+  ORANGE,
+  CLEAR,
+}
+
+type IndicationLocations = {
+  leftMotor: IndicationStates;
+  rightMotor: IndicationStates;
+  battery: IndicationStates;
+  solarPanel: IndicationStates;
+};
+
+type IndicationTriggerList = {
+  // TODO: Add indication triggers
+};
 
 function CarGraphicComponent(props: any) {
   const [isClear, changeClear] = useState(false);
+  const [indications, setIndications] = useState<IndicationLocations>({
+    leftMotor: IndicationStates.CLEAR,
+    rightMotor: IndicationStates.CLEAR,
+    battery: IndicationStates.CLEAR,
+    solarPanel: IndicationStates.CLEAR,
+  });
+
+  const [errorMaterial, setErrorMaterial] = useState(
+    new THREE.MeshStandardMaterial({ color: 0xff0000 }),
+  );
+  const [warningMaterial, setWarningMaterial] = useState(
+    new THREE.MeshStandardMaterial({ color: 0xffa500 }),
+  );
+
+  useEffect(() => {
+    animateEmissive();
+  }, []);
+
+  // 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 animateEmissive = () => {
+    const initialIntensity = 0.5;
+    const targetIntensity = 2.0;
+    const duration = 1000;
+
+    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);
+  };
 
   return (
     <>
@@ -18,7 +82,7 @@ function CarGraphicComponent(props: any) {
           shadow-mapSize={[512, 512]}
           castShadow
         />
-        <CarModelComponent isClear={isClear} />
+        <CarModelComponent isClear={isClear} testMaterial={errorMaterial} />
         <RoadComponent speed={7} size={15} />
         <ContactShadows
           position={[0, 0, 0]}

app/src/renderer/code/components/molecules/HeroMolecules/CarMolecules/CarModelComponent.tsx

@@ -567,7 +567,7 @@ export function CarModelComponent(props: CarModelComponentProps) {
         castShadow
         receiveShadow
         geometry={nodes.Shape_IndexedFaceSet050.geometry}
-        material={materials["Shape.050"]}
+        material={props.testMaterial}
         position={[-31.75, 0, -2872.13]}
         rotation={[Math.PI / 2, 0, -Math.PI]}
       />

package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "@tweenjs/tween.js": "^23.1.1"
+  }
+}