refactor: streamline BakedHeatMap component by removing unused imports and redundant code

This commit is contained in:
2025-09-06 14:55:53 +05:30
parent cb1b16fffd
commit 927c6dcfab

View File

@@ -3,7 +3,7 @@ import { useEffect, useMemo, useRef, useCallback } from "react";
import { useThree } from "@react-three/fiber"; import { useThree } from "@react-three/fiber";
import { useHeatMapStore } from "../../../store/simulation/useHeatMapStore"; import { useHeatMapStore } from "../../../store/simulation/useHeatMapStore";
import * as CONSTANTS from "../../../types/world/worldConstants"; import * as CONSTANTS from "../../../types/world/worldConstants";
import { Html } from "@react-three/drei";
const RADIUS = 0.0025; const RADIUS = 0.0025;
const OPACITY = 0.8; const OPACITY = 0.8;
@@ -28,16 +28,10 @@ const BakedHeatMap = () => {
data[index] = (p.points.x + width / 2) / width; data[index] = (p.points.x + width / 2) / width;
data[index + 1] = (p.points.y + height / 2) / height; data[index + 1] = (p.points.y + height / 2) / height;
data[index + 2] = 0.3; data[index + 2] = 0.3;
data[index + 3] = 0.0; data[index + 3] = 0.0;
}); });
const texture = new THREE.DataTexture( const texture = new THREE.DataTexture(data, filteredPoints.length, 1, THREE.RGBAFormat, THREE.FloatType);
data,
filteredPoints.length,
1,
THREE.RGBAFormat,
THREE.FloatType
);
texture.needsUpdate = true; texture.needsUpdate = true;
return texture; return texture;
}, },
@@ -52,7 +46,6 @@ const BakedHeatMap = () => {
u_growthRate: { value: GROWTH_RATE }, u_growthRate: { value: GROWTH_RATE },
}); });
const renderHeatmapToImage = useCallback( const renderHeatmapToImage = useCallback(
(type: string) => { (type: string) => {
if (!meshRef.current) return null; if (!meshRef.current) return null;
@@ -66,18 +59,10 @@ const BakedHeatMap = () => {
uniformsRef.current.u_points.value = pointTexture; uniformsRef.current.u_points.value = pointTexture;
uniformsRef.current.u_count.value = filteredPoints.length; uniformsRef.current.u_count.value = filteredPoints.length;
const exportCamera = new THREE.OrthographicCamera( const exportCamera = new THREE.OrthographicCamera(width / -2, width / 2, height / 2, height / -2, 0.1, 10);
width / -2,
width / 2,
height / 2,
height / -2,
0.1,
10
);
exportCamera.position.set(0, 1, 0); exportCamera.position.set(0, 1, 0);
exportCamera.lookAt(0, 0, 0); exportCamera.lookAt(0, 0, 0);
const renderTarget = new THREE.WebGLRenderTarget(1024, 1024, { const renderTarget = new THREE.WebGLRenderTarget(1024, 1024, {
format: THREE.RGBAFormat, format: THREE.RGBAFormat,
type: THREE.UnsignedByteType, type: THREE.UnsignedByteType,
@@ -90,7 +75,6 @@ const BakedHeatMap = () => {
gl.render(tempScene, exportCamera); gl.render(tempScene, exportCamera);
gl.setRenderTarget(null); gl.setRenderTarget(null);
const pixels = new Uint8Array(1024 * 1024 * 4); const pixels = new Uint8Array(1024 * 1024 * 4);
gl.readRenderTargetPixels(renderTarget, 0, 0, 1024, 1024, pixels); gl.readRenderTargetPixels(renderTarget, 0, 0, 1024, 1024, pixels);
@@ -111,7 +95,6 @@ const BakedHeatMap = () => {
[gl, width, height, bakedPoints, createPointTexture] [gl, width, height, bakedPoints, createPointTexture]
); );
const downloadImage = (base64: string, filename: string) => { const downloadImage = (base64: string, filename: string) => {
const link = document.createElement("a"); const link = document.createElement("a");
link.href = base64; link.href = base64;
@@ -136,7 +119,6 @@ const BakedHeatMap = () => {
return result; return result;
}, [renderHeatmapToImage]); }, [renderHeatmapToImage]);
const pointTexture = useMemo(() => createPointTexture(bakedPoints), [bakedPoints, createPointTexture]); const pointTexture = useMemo(() => createPointTexture(bakedPoints), [bakedPoints, createPointTexture]);
useEffect(() => { useEffect(() => {
@@ -146,7 +128,6 @@ const BakedHeatMap = () => {
return ( return (
<> <>
<mesh ref={meshRef} rotation={[Math.PI / 2, 0, 0]} position={[0, 0.025, 0]}> <mesh ref={meshRef} rotation={[Math.PI / 2, 0, 0]} position={[0, 0.025, 0]}>
<planeGeometry args={[width, height]} /> <planeGeometry args={[width, height]} />
<shaderMaterial <shaderMaterial
@@ -208,25 +189,6 @@ const BakedHeatMap = () => {
`} `}
/> />
</mesh> </mesh>
<Html>
<button
style={{
position: "absolute",
top: "10px",
left: "10px",
padding: "8px 12px",
background: "#333",
color: "white",
border: "none",
cursor: "pointer",
zIndex: 10,
}}
onClick={exportHeatmapAsPNG}
>
Export Heatmap
</button>
</Html>
</> </>
); );
}; };