Merge e_bike + gps into develop #7
BIN
Binary file not shown.
@@ -9,7 +9,7 @@ export interface EbikeGPSMapProps {
|
||||
* If omitted, snaps to [0,0,0]
|
||||
*/
|
||||
startPos?: { x: number; y: number; z: number };
|
||||
|
||||
|
||||
/**
|
||||
* 3D world position of the destination/target (GPS end point)
|
||||
*/
|
||||
@@ -59,7 +59,7 @@ export const EbikeGPSMap: React.FC<EbikeGPSMapProps> = ({
|
||||
}) => {
|
||||
const [waypoints, setWaypoints] = useState<Waypoint[]>([]);
|
||||
const [mapImage, setMapImage] = useState<HTMLImageElement | null>(null);
|
||||
|
||||
|
||||
// Offscreen high-res canvas for crystal clear rendering
|
||||
const [offscreenCanvas] = useState(() => {
|
||||
const canvas = document.createElement('canvas');
|
||||
@@ -110,7 +110,6 @@ export const EbikeGPSMap: React.FC<EbikeGPSMapProps> = ({
|
||||
}
|
||||
|
||||
const img = new Image();
|
||||
img.crossOrigin = 'anonymous';
|
||||
img.onload = () => setMapImage(img);
|
||||
img.onerror = () => {
|
||||
console.warn(`[GPS Component] Failed to load map background image from ${mapImageUrl}. Falling back to dynamic vector map.`);
|
||||
@@ -175,6 +174,7 @@ export const EbikeGPSMap: React.FC<EbikeGPSMapProps> = ({
|
||||
const draw = () => {
|
||||
const canvas = offscreenCanvas;
|
||||
const ctx = canvas.getContext('2d');
|
||||
ctx.globalAlpha = 0.5;
|
||||
if (!ctx) return;
|
||||
|
||||
const size = canvas.width;
|
||||
@@ -336,7 +336,7 @@ export const EbikeGPSMap: React.FC<EbikeGPSMapProps> = ({
|
||||
|
||||
if (startPosSnapped) {
|
||||
const pt = worldToCanvas(startPosSnapped.x, startPosSnapped.z, size);
|
||||
|
||||
|
||||
// Start Marker (Player Arrow/Dot)
|
||||
ctx.beginPath();
|
||||
ctx.arc(pt.x, pt.y, 8, 0, 2 * Math.PI);
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -7,6 +7,7 @@ import {
|
||||
import { HomePage } from "@/pages/page";
|
||||
import { EditorPage } from "@/pages/editor/page";
|
||||
import { WaypointEditorPage } from "@/pages/waypoint/page";
|
||||
import { BackgroundMapPage } from "@/pages/backgroundmap/page";
|
||||
import {
|
||||
DocsAnimationRoute,
|
||||
DocsAudioRoute,
|
||||
@@ -50,6 +51,12 @@ const waypointRoute = createRoute({
|
||||
component: WaypointEditorPage,
|
||||
});
|
||||
|
||||
const backgroundMapRoute = createRoute({
|
||||
getParentRoute: () => rootRoute,
|
||||
path: "/backgroundmap",
|
||||
component: BackgroundMapPage,
|
||||
});
|
||||
|
||||
const docsRoute = createRoute({
|
||||
getParentRoute: () => rootRoute,
|
||||
path: "/docs",
|
||||
@@ -86,6 +93,7 @@ const routeTree = rootRoute.addChildren([
|
||||
indexRoute,
|
||||
editorRoute,
|
||||
waypointRoute,
|
||||
backgroundMapRoute,
|
||||
docsRoute.addChildren(docsChildRoutes),
|
||||
]);
|
||||
|
||||
|
||||
@@ -147,7 +147,7 @@ export function TestMap({ onOctreeReady }: TestMapProps): React.JSX.Element {
|
||||
{/* Render Pathfinder Maps Waypoints & Routes visually */}
|
||||
<group name="pathfinder-maps-visuals">
|
||||
{/* Render Connection Lines */}
|
||||
{waypoints.flatMap((wp) =>
|
||||
{waypoints.flatMap((wp) =>
|
||||
wp.connections.map((connId) => {
|
||||
const other = waypoints.find((w) => w.id === connId);
|
||||
// Draw each line only once by enforcing wp.id < other.id
|
||||
@@ -174,7 +174,7 @@ export function TestMap({ onOctreeReady }: TestMapProps): React.JSX.Element {
|
||||
{waypoints.map((wp) => (
|
||||
<mesh key={`wp-sphere-${wp.id}`} position={[wp.x, wp.y + 0.3, wp.z]}>
|
||||
<sphereGeometry args={[0.35, 16, 16]} />
|
||||
<meshBasicMaterial
|
||||
<meshBasicMaterial
|
||||
color="#059669" // Deep emerald green
|
||||
transparent
|
||||
opacity={0.8}
|
||||
@@ -250,11 +250,18 @@ export function TestMap({ onOctreeReady }: TestMapProps): React.JSX.Element {
|
||||
</mesh>
|
||||
{/* GPS Map screen plane */}
|
||||
<group position={[0, 0, 0.06]}>
|
||||
<EbikeGPSMap
|
||||
<EbikeGPSMap
|
||||
width={4}
|
||||
height={4}
|
||||
startPos={{ x: 10, y: 0, z: -10 }}
|
||||
destPos={{ x: -40, y: 0, z: 30 }}
|
||||
mapImageUrl="/map_background.png"
|
||||
worldBounds={{
|
||||
minX: -146, // Les valeurs exactes
|
||||
maxX: 131, // que l'outil t'aura
|
||||
minZ: -139, // affiché en temps réel !
|
||||
maxZ: 138
|
||||
}}
|
||||
/>
|
||||
</group>
|
||||
</group>
|
||||
|
||||
Reference in New Issue
Block a user