feature gps works
This commit is contained in:
math-pixel
@@ -0,0 +1,251 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user