diff --git a/app/src/renderer/code/components/molecules/HeroMolecules/CarGraphicComponent.tsx b/app/src/renderer/code/components/molecules/HeroMolecules/CarGraphicComponent.tsx index 3be06699..620fa06a 100644 --- a/app/src/renderer/code/components/molecules/HeroMolecules/CarGraphicComponent.tsx +++ b/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({ + 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 /> - + diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 00000000..63dd5bbc --- /dev/null +++ b/package-lock.json @@ -0,0 +1,17 @@ +{ + "name": "Helios-Telemetry", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "dependencies": { + "@tweenjs/tween.js": "^23.1.1" + } + }, + "node_modules/@tweenjs/tween.js": { + "version": "23.1.1", + "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-23.1.1.tgz", + "integrity": "sha512-ZpboH7pCPPeyBWKf8c7TJswtCEQObFo3bOBYalm99NzZarATALYCo5OhbCa/n4RQyJyHfhkdx+hNrdL5ByFYDw==" + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 00000000..309e527c --- /dev/null +++ b/package.json @@ -0,0 +1,5 @@ +{ + "dependencies": { + "@tweenjs/tween.js": "^23.1.1" + } +}