math-pixel
252 lines
9.6 KiB
TypeScript
252 lines
9.6 KiB
TypeScript
import React, { useState, useEffect, useRef, useMemo } from 'react';
|
|
import { Canvas, useFrame, useThree } from '@react-three/fiber';
|
|
import { MapControls, OrthographicCamera, useGLTF } from '@react-three/drei';
|
|
import * as THREE from 'three';
|
|
|
|
// ----------------------------------------------------------------------------
|
|
// 1. Terrain Scene
|
|
// ----------------------------------------------------------------------------
|
|
function TerrainScene() {
|
|
const { scene } = useGLTF('/models/terrain/terrain.glb');
|
|
return (
|
|
<group>
|
|
<ambientLight intensity={1.5} />
|
|
<directionalLight position={[10, 20, 10]} intensity={2} />
|
|
<primitive object={scene} />
|
|
</group>
|
|
);
|
|
}
|
|
|
|
// ----------------------------------------------------------------------------
|
|
// 2. Waypoint Overlay (Debug visualization)
|
|
// ----------------------------------------------------------------------------
|
|
function WaypointOverlay({ waypoints, visible }: { waypoints: any[], visible: boolean }) {
|
|
if (!visible) return null;
|
|
return (
|
|
<group>
|
|
{waypoints.map((w) => (
|
|
<mesh key={w.id} position={[w.x, w.y + 1, w.z]}>
|
|
<sphereGeometry args={[0.3, 16, 16]} />
|
|
<meshBasicMaterial color="#10b981" />
|
|
</mesh>
|
|
))}
|
|
</group>
|
|
);
|
|
}
|
|
|
|
// ----------------------------------------------------------------------------
|
|
// 3. Camera Manager (Handles Orthographic Math & Downloads)
|
|
// ----------------------------------------------------------------------------
|
|
function CameraManager({
|
|
autoBounds,
|
|
boundsTextRef
|
|
}: {
|
|
autoBounds: any,
|
|
boundsTextRef: React.RefObject<HTMLPreElement>
|
|
}) {
|
|
const { camera, gl, scene } = useThree();
|
|
const controlsRef = useRef<any>(null);
|
|
|
|
// Apply Auto-Bounds function
|
|
useEffect(() => {
|
|
const applyAutoBounds = () => {
|
|
if (camera instanceof THREE.OrthographicCamera && autoBounds) {
|
|
const width = autoBounds.maxX - autoBounds.minX;
|
|
const height = autoBounds.maxZ - autoBounds.minZ;
|
|
const centerX = (autoBounds.minX + autoBounds.maxX) / 2;
|
|
const centerZ = (autoBounds.minZ + autoBounds.maxZ) / 2;
|
|
|
|
camera.position.set(centerX, 200, centerZ);
|
|
camera.left = -width / 2;
|
|
camera.right = width / 2;
|
|
camera.top = height / 2;
|
|
camera.bottom = -height / 2;
|
|
camera.zoom = 1;
|
|
camera.updateProjectionMatrix();
|
|
|
|
if (controlsRef.current) {
|
|
controlsRef.current.target.set(centerX, 0, centerZ);
|
|
controlsRef.current.update();
|
|
}
|
|
}
|
|
};
|
|
|
|
(window as any).applyAutoBounds = applyAutoBounds;
|
|
// Initial apply
|
|
applyAutoBounds();
|
|
|
|
return () => { delete (window as any).applyAutoBounds; };
|
|
}, [camera, autoBounds]);
|
|
|
|
// Track dynamic bounds without triggering React re-renders!
|
|
useFrame(() => {
|
|
if (camera instanceof THREE.OrthographicCamera && boundsTextRef.current) {
|
|
const width = (camera.right - camera.left) / camera.zoom;
|
|
const height = (camera.top - camera.bottom) / camera.zoom;
|
|
const minX = Math.round(camera.position.x - width / 2);
|
|
const maxX = Math.round(camera.position.x + width / 2);
|
|
const minZ = Math.round(camera.position.z - height / 2);
|
|
const maxZ = Math.round(camera.position.z + height / 2);
|
|
|
|
// Direct DOM mutation for 60fps performance (prevents WebGL Context Lost!)
|
|
boundsTextRef.current.innerText = JSON.stringify({ minX, maxX, minZ, maxZ }, null, 2);
|
|
}
|
|
});
|
|
|
|
// Attach screenshot capture logic
|
|
useEffect(() => {
|
|
(window as any).downloadMapScreenshot = () => {
|
|
// Force an immediate render frame to ensure no UI overlays are missing
|
|
gl.render(scene, camera);
|
|
const dataUrl = gl.domElement.toDataURL("image/png");
|
|
const a = document.createElement("a");
|
|
a.href = dataUrl;
|
|
a.download = "map_background.png";
|
|
a.click();
|
|
};
|
|
return () => { delete (window as any).downloadMapScreenshot; };
|
|
}, [gl, camera, scene]);
|
|
|
|
return <MapControls ref={controlsRef} enableRotate={false} dampingFactor={0.05} />;
|
|
}
|
|
|
|
// ----------------------------------------------------------------------------
|
|
// 4. Main Page Route Component
|
|
// ----------------------------------------------------------------------------
|
|
export function BackgroundMapPage() {
|
|
const [waypoints, setWaypoints] = useState<any[]>([]);
|
|
const [showWaypoints, setShowWaypoints] = useState(true);
|
|
const boundsTextRef = useRef<HTMLPreElement>(null);
|
|
|
|
// Load road network waypoints to compute perfect GPS bounds
|
|
useEffect(() => {
|
|
const saved = localStorage.getItem('la-fabrik-waypoints');
|
|
if (saved) {
|
|
setWaypoints(JSON.parse(saved));
|
|
} else {
|
|
fetch('/roadNetwork.json')
|
|
.then(res => res.json())
|
|
.then(data => setWaypoints(data))
|
|
.catch(() => { });
|
|
}
|
|
}, []);
|
|
|
|
// Compute exact bounds that the EbikeGPSMap will use by default
|
|
const autoBounds = useMemo(() => {
|
|
if (waypoints.length === 0) return null;
|
|
const xs = waypoints.map(w => w.x);
|
|
const zs = waypoints.map(w => w.z);
|
|
const minX = Math.min(...xs);
|
|
const maxX = Math.max(...xs);
|
|
const minZ = Math.min(...zs);
|
|
const maxZ = Math.max(...zs);
|
|
|
|
// CRITICAL: We MUST force the camera bounds to be a PERFECT SQUARE.
|
|
// If the camera is rectangular, the exported PNG will be distorted when drawn
|
|
// on the EbikeGPSMap's 1024x1024 canvas!
|
|
const width = maxX - minX;
|
|
const height = maxZ - minZ;
|
|
const maxDim = Math.max(width, height);
|
|
|
|
const centerX = (minX + maxX) / 2;
|
|
const centerZ = (minZ + maxZ) / 2;
|
|
|
|
const paddedDim = maxDim * 1.15 || 100;
|
|
|
|
return {
|
|
minX: centerX - paddedDim / 2,
|
|
maxX: centerX + paddedDim / 2,
|
|
minZ: centerZ - paddedDim / 2,
|
|
maxZ: centerZ + paddedDim / 2,
|
|
};
|
|
}, [waypoints]);
|
|
|
|
return (
|
|
<div style={{ width: '100vw', height: '100vh', background: '#050505', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
|
|
{/*
|
|
CRITICAL: The DOM element MUST be a perfect square so the resulting PNG
|
|
is exactly 1:1, preventing stretching in the EbikeGPSMap canvas texture!
|
|
*/}
|
|
<div style={{ width: 'min(100vw, 100vh)', height: 'min(100vw, 100vh)', background: '#000', position: 'relative' }}>
|
|
<Canvas gl={{ preserveDrawingBuffer: true, antialias: true, alpha: false }}>
|
|
<OrthographicCamera makeDefault position={[0, 200, 0]} near={0.1} far={1000} />
|
|
<TerrainScene />
|
|
<WaypointOverlay waypoints={waypoints} visible={showWaypoints} />
|
|
<CameraManager autoBounds={autoBounds} boundsTextRef={boundsTextRef} />
|
|
</Canvas>
|
|
</div>
|
|
|
|
{/* Premium Glassmorphic UI Dashboard */}
|
|
<div style={{
|
|
position: 'absolute', top: 24, left: 24,
|
|
background: 'rgba(15, 23, 42, 0.85)', padding: 24,
|
|
borderRadius: 16, border: '1px solid #334155',
|
|
color: 'white', fontFamily: 'system-ui, sans-serif',
|
|
backdropFilter: 'blur(12px)', width: 360,
|
|
boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.5)'
|
|
}}>
|
|
<h2 style={{ margin: '0 0 16px 0', fontSize: '1.4rem', color: '#38bdf8' }}>GPS Map Generator</h2>
|
|
|
|
<p style={{ fontSize: '0.9rem', color: '#94a3b8', marginBottom: 20, lineHeight: 1.5 }}>
|
|
1. Cadrez votre carte (ou utilisez le <b>Cadrage Automatique</b>).<br />
|
|
2. Masquez les waypoints (fond visuel seul).<br />
|
|
3. Cliquez sur <b>Capturer la carte</b>.
|
|
</p>
|
|
|
|
<button
|
|
onClick={() => setShowWaypoints(!showWaypoints)}
|
|
style={{
|
|
width: '100%', padding: '12px', marginBottom: 12,
|
|
background: showWaypoints ? '#1e293b' : '#334155',
|
|
border: '1px solid #475569', color: 'white',
|
|
borderRadius: 8, cursor: 'pointer', fontWeight: 600,
|
|
transition: 'all 0.2s'
|
|
}}
|
|
>
|
|
{showWaypoints ? '👁️ Masquer Waypoints' : '👁️🗨️ Afficher Waypoints'}
|
|
</button>
|
|
|
|
<button
|
|
onClick={() => {
|
|
if ((window as any).applyAutoBounds) (window as any).applyAutoBounds();
|
|
}}
|
|
style={{
|
|
width: '100%', padding: '12px', marginBottom: 16,
|
|
background: '#1e293b', border: '1px solid #475569',
|
|
color: '#10b981', borderRadius: 8, cursor: 'pointer', fontWeight: 600,
|
|
transition: 'all 0.2s'
|
|
}}
|
|
>
|
|
🎯 Cadrage Automatique
|
|
</button>
|
|
|
|
<button
|
|
onClick={() => {
|
|
if ((window as any).downloadMapScreenshot) (window as any).downloadMapScreenshot();
|
|
}}
|
|
style={{
|
|
width: '100%', padding: '14px', background: '#0ea5e9',
|
|
border: 'none', color: 'white', borderRadius: 8,
|
|
cursor: 'pointer', fontWeight: 'bold', fontSize: '1rem',
|
|
boxShadow: '0 4px 6px -1px rgba(14, 165, 233, 0.4)'
|
|
}}
|
|
>
|
|
📸 Capturer la carte (.png)
|
|
</button>
|
|
|
|
<div style={{ marginTop: 24, padding: 16, background: '#020617', borderRadius: 10, fontSize: '0.85rem' }}>
|
|
<div style={{ color: '#64748b', marginBottom: 8, fontWeight: 600 }}>Limites Actuelles (worldBounds):</div>
|
|
<pre ref={boundsTextRef} style={{ margin: 0, color: '#10b981', fontFamily: 'monospace' }}>
|
|
Calcul...
|
|
</pre>
|
|
<div style={{ color: '#ef4444', marginTop: 12, fontSize: '0.75rem', lineHeight: 1.4 }}>
|
|
*Si vous décadrez à la souris, vous devrez copier ces valeurs exactes dans la prop <code>worldBounds</code> de votre composant <b>EbikeGPSMap</b> !
|
|
<br /><br />
|
|
Astuce : Utilisez le <b>Cadrage Automatique</b> pour ne rien avoir à configurer.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|