From 9b11800ba2f115840f661e9033c5b12a0f24add0 Mon Sep 17 00:00:00 2001 From: ideen1 Date: Mon, 22 Jan 2024 19:56:33 -0700 Subject: [PATCH 1/2] Add textures to car graphic --- .../HeroMolecules/CarGraphicComponent.tsx | 70 ++++++++++++++++++- .../CarMolecules/CarModelComponent.tsx | 2 +- package-lock.json | 17 +++++ package.json | 5 ++ 4 files changed, 90 insertions(+), 4 deletions(-) create mode 100644 package-lock.json create mode 100644 package.json 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" + } +} From 74ca79bd0c8e5f82478efafd40a202f49a0e7ddf Mon Sep 17 00:00:00 2001 From: ideen1 Date: Sat, 27 Jan 2024 11:46:45 -0700 Subject: [PATCH 2/2] Added basic stuff for car indication flashing Co-authored-by: JenniferJa --- .../HeroMolecules/CarGraphicComponent.tsx | 76 +++++++++---------- .../CarMolecules/CarModelComponent.tsx | 7 +- 2 files changed, 44 insertions(+), 39 deletions(-) diff --git a/app/src/renderer/code/components/molecules/HeroMolecules/CarGraphicComponent.tsx b/app/src/renderer/code/components/molecules/HeroMolecules/CarGraphicComponent.tsx index 620fa06a..595bf107 100644 --- 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 /> - +