refactor HeatMap component and integrate baked heat map functionality

This commit is contained in:
2025-09-05 17:13:51 +05:30
parent 77dc821431
commit 9ba98d0120
5 changed files with 552 additions and 41 deletions

View File

@@ -0,0 +1,478 @@
import React, { useEffect } from "react";
import { useHeatMapStore } from "../../../store/simulation/useHeatMapStore";
function BakedHeatMap() {
const { bakedPoints, setBakedPoints } = useHeatMapStore();
useEffect(() => {
console.log("bakedPoints: ", bakedPoints);
setBakedPoints([
{
x: -13.413516772698177,
y: -12.63518978091868,
},
{
x: 1.2354600621530758,
y: -2.3794652653900545,
},
{
x: -13.228715403191334,
y: -12.110164362649389,
},
{
x: 1.2354600621530758,
y: -2.3794652653900545,
},
{
x: -12.895933084168604,
y: -11.16472202271144,
},
{
x: 1.2146364581619484,
y: -2.458777246830882,
},
{
x: -12.56388120623421,
y: -10.22135488296373,
},
{
x: 0.9606649075524938,
y: -3.426092325528903,
},
{
x: -12.379278822340664,
y: -9.696895199231204,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -12.379278822340664,
y: -9.696895199231204,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -12.379278822340664,
y: -9.696895199231204,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -12.379278822340664,
y: -9.696895199231204,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -12.379278822340664,
y: -9.696895199231204,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -12.379278822340664,
y: -9.696895199231204,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -12.379278822340664,
y: -9.696895199231204,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -11.765220568117899,
y: -10.165809057613947,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -10.947349624124,
y: -10.762161268114605,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -10.139174838325012,
y: -11.351443505760303,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -9.329222423526684,
y: -11.942021905093844,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -8.520482028503096,
y: -12.531716557820241,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -7.70091425682336,
y: -13.129306013571778,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -6.889992226202834,
y: -13.72059141019279,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -6.070909262434194,
y: -14.317827367300595,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -6.052728965813095,
y: -14.331083566407761,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -6.052728965813095,
y: -14.331083566407761,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -6.052728965813095,
y: -14.331083566407761,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -6.052728965813095,
y: -14.331083566407761,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -6.052728965813095,
y: -14.331083566407761,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -6.052728965813095,
y: -14.331083566407761,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -6.052728965813095,
y: -14.331083566407761,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -6.052728965813095,
y: -14.331083566407761,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -6.052728965813095,
y: -14.331083566407761,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -6.745374744265807,
y: -13.826039532128796,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -7.555811966975235,
y: -13.235107634151518,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -8.373925314924684,
y: -12.638578674328992,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -9.185412954772822,
y: -12.046880862625084,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -9.993991747160381,
y: -11.4573040427792,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -10.812670704337439,
y: -10.86036266787378,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -11.622542317819256,
y: -10.269843184979397,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -12.388054007546796,
y: -9.711668827905626,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -12.388054007546796,
y: -9.711668827905626,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -12.388054007546796,
y: -9.711668827905626,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -12.388054007546796,
y: -9.711668827905626,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -12.388054007546796,
y: -9.711668827905626,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -11.671167833596273,
y: -10.234387794329676,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -10.848529611822936,
y: -10.834216074817558,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -10.028153826960038,
y: -11.43239469497386,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -9.219090226661379,
y: -12.02232501346348,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -8.397987229934841,
y: -12.621033881583191,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -7.5732481738840844,
y: -13.222393989524333,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -6.755458031206697,
y: -13.818687283585831,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -6.049335310444421,
y: -14.333558056907329,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -6.049335310444421,
y: -14.333558056907329,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -6.049335310444421,
y: -14.333558056907329,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -6.049335310444421,
y: -14.333558056907329,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -6.049335310444421,
y: -14.333558056907329,
},
{
x: 0.8468970296669924,
y: -3.8594061494041965,
},
{
x: -6.049335310444421,
y: -14.333558056907329,
},
{
x: 0.6887446149645632,
y: -3.056614231646619,
},
{
x: -6.049335310444421,
y: -14.333558056907329,
},
{
x: 0.4926411078662814,
y: -2.0612481359291923,
},
{
x: -6.049335310444421,
y: -14.333558056907329,
},
{
x: 0.2993211300946861,
y: -1.0800104500460184,
},
{
x: -6.049335310444421,
y: -14.333558056907329,
},
{
x: 0.10578852161104557,
y: -0.09769351063592024,
},
{
x: -6.0721381600575395,
y: -14.316931314176879,
},
{
x: -0.04612645742123378,
y: 0.6733840789380983,
},
{
x: -6.8802321445370085,
y: -13.727707992972537,
},
{
x: -0.04612645742123378,
y: 0.6733840789380983,
},
]);
}, [bakedPoints]);
return <></>;
}
export default BakedHeatMap;

View File

@@ -0,0 +1,14 @@
import RealTimeHeatMap from "./realTime/realTimeHeatMap";
import BakedHeatMap from "./baked/bakedHeatMap";
function HeatMap() {
return (
<>
<RealTimeHeatMap />
<BakedHeatMap />
</>
);
}
export default HeatMap;

View File

@@ -1,18 +1,18 @@
import * as THREE from "three";
import { useEffect, useMemo, useRef, useState } from "react";
import { useFrame, useThree } from "@react-three/fiber";
import { useProductContext } from "../../modules/simulation/products/productContext";
import { useSceneContext } from "../../modules/scene/sceneContext";
import * as CONSTANTS from "../../types/world/worldConstants";
import { determineExecutionMachineSequences } from "../../modules/simulation/simulator/functions/determineExecutionMachineSequences";
import { useAnimationPlaySpeed, usePauseButtonStore, usePlayButtonStore, useResetButtonStore } from "../../store/usePlayButtonStore";
import { useHeatMapStore } from "../../store/simulation/useHeatMapStore";
import { useProductContext } from "../../../modules/simulation/products/productContext";
import { useSceneContext } from "../../../modules/scene/sceneContext";
import * as CONSTANTS from "../../../types/world/worldConstants";
import { determineExecutionMachineSequences } from "../../../modules/simulation/simulator/functions/determineExecutionMachineSequences";
import { useAnimationPlaySpeed, usePauseButtonStore, usePlayButtonStore, useResetButtonStore } from "../../../store/usePlayButtonStore";
import { useHeatMapStore } from "../../../store/simulation/useHeatMapStore";
const DECAY_RATE = 0.01;
const GROWTH_TIME_MULTIPLIER = 20;
const RADIUS = 0.005;
const OPACITY = 0.8;
const UPDATE_INTERVAL = 0.1;
const UPDATE_INTERVAL = 1;
interface HeatPoint {
x: number;
@@ -21,19 +21,17 @@ interface HeatPoint {
lastUpdated: number;
}
const HeatMap = () => {
const RealTimeHeatMap = () => {
const isUsingBBOX = false;
const height = CONSTANTS.gridConfig.size;
const width = CONSTANTS.gridConfig.size;
const debugMode: "solid" | "grayscale" | "normal" = "normal";
const debugModeMap = { solid: 0, grayscale: 1, normal: 2 } as const;
const { productStore } = useSceneContext();
const { getProductById, products } = productStore();
const { selectedProductStore } = useProductContext();
const { selectedProduct } = selectedProductStore();
const { hasHuman, hasVehicle, monitoringHuman, monitoringVehicle, addMonitoringHuman, addMonitoringVehicle } = useHeatMapStore();
const { hasHuman, hasVehicle, monitoringHuman, monitoringVehicle, addMonitoringHuman, addMonitoringVehicle, addBakedPoint } = useHeatMapStore();
const { isPlaying } = usePlayButtonStore();
const { isReset } = useResetButtonStore();
const { isPaused } = usePauseButtonStore();
@@ -107,7 +105,7 @@ const HeatMap = () => {
delta = now - lastFrameTime.current;
}
lastFrameTime.current = now;
if (delta <= 0) return;
const updateInterval = UPDATE_INTERVAL / Math.max(speed, 0.1);
@@ -128,6 +126,8 @@ const HeatMap = () => {
})()
: model.position;
// addBakedPoint({ x: pos.x, y: pos.z });
updatedPoints.push({ x: pos.x, y: pos.z, strength: 0.3, lastUpdated: now });
});
@@ -245,4 +245,4 @@ const HeatMap = () => {
);
};
export default HeatMap;
export default RealTimeHeatMap;