refactor: streamline BakedHeatMap component by removing unused imports and redundant code
This commit is contained in:
@@ -3,7 +3,7 @@ import { useEffect, useMemo, useRef, useCallback } from "react";
|
||||
import { useThree } from "@react-three/fiber";
|
||||
import { useHeatMapStore } from "../../../store/simulation/useHeatMapStore";
|
||||
import * as CONSTANTS from "../../../types/world/worldConstants";
|
||||
import { Html } from "@react-three/drei";
|
||||
|
||||
|
||||
const RADIUS = 0.0025;
|
||||
const OPACITY = 0.8;
|
||||
@@ -28,16 +28,10 @@ const BakedHeatMap = () => {
|
||||
data[index] = (p.points.x + width / 2) / width;
|
||||
data[index + 1] = (p.points.y + height / 2) / height;
|
||||
data[index + 2] = 0.3;
|
||||
data[index + 3] = 0.0;
|
||||
data[index + 3] = 0.0;
|
||||
});
|
||||
|
||||
const texture = new THREE.DataTexture(
|
||||
data,
|
||||
filteredPoints.length,
|
||||
1,
|
||||
THREE.RGBAFormat,
|
||||
THREE.FloatType
|
||||
);
|
||||
const texture = new THREE.DataTexture(data, filteredPoints.length, 1, THREE.RGBAFormat, THREE.FloatType);
|
||||
texture.needsUpdate = true;
|
||||
return texture;
|
||||
},
|
||||
@@ -52,7 +46,6 @@ const BakedHeatMap = () => {
|
||||
u_growthRate: { value: GROWTH_RATE },
|
||||
});
|
||||
|
||||
|
||||
const renderHeatmapToImage = useCallback(
|
||||
(type: string) => {
|
||||
if (!meshRef.current) return null;
|
||||
@@ -66,18 +59,10 @@ const BakedHeatMap = () => {
|
||||
uniformsRef.current.u_points.value = pointTexture;
|
||||
uniformsRef.current.u_count.value = filteredPoints.length;
|
||||
|
||||
const exportCamera = new THREE.OrthographicCamera(
|
||||
width / -2,
|
||||
width / 2,
|
||||
height / 2,
|
||||
height / -2,
|
||||
0.1,
|
||||
10
|
||||
);
|
||||
const exportCamera = new THREE.OrthographicCamera(width / -2, width / 2, height / 2, height / -2, 0.1, 10);
|
||||
exportCamera.position.set(0, 1, 0);
|
||||
exportCamera.lookAt(0, 0, 0);
|
||||
|
||||
|
||||
const renderTarget = new THREE.WebGLRenderTarget(1024, 1024, {
|
||||
format: THREE.RGBAFormat,
|
||||
type: THREE.UnsignedByteType,
|
||||
@@ -90,7 +75,6 @@ const BakedHeatMap = () => {
|
||||
gl.render(tempScene, exportCamera);
|
||||
gl.setRenderTarget(null);
|
||||
|
||||
|
||||
const pixels = new Uint8Array(1024 * 1024 * 4);
|
||||
gl.readRenderTargetPixels(renderTarget, 0, 0, 1024, 1024, pixels);
|
||||
|
||||
@@ -111,7 +95,6 @@ const BakedHeatMap = () => {
|
||||
[gl, width, height, bakedPoints, createPointTexture]
|
||||
);
|
||||
|
||||
|
||||
const downloadImage = (base64: string, filename: string) => {
|
||||
const link = document.createElement("a");
|
||||
link.href = base64;
|
||||
@@ -136,7 +119,6 @@ const BakedHeatMap = () => {
|
||||
return result;
|
||||
}, [renderHeatmapToImage]);
|
||||
|
||||
|
||||
const pointTexture = useMemo(() => createPointTexture(bakedPoints), [bakedPoints, createPointTexture]);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -146,7 +128,6 @@ const BakedHeatMap = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
<mesh ref={meshRef} rotation={[Math.PI / 2, 0, 0]} position={[0, 0.025, 0]}>
|
||||
<planeGeometry args={[width, height]} />
|
||||
<shaderMaterial
|
||||
@@ -208,25 +189,6 @@ const BakedHeatMap = () => {
|
||||
`}
|
||||
/>
|
||||
</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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user