diff --git a/src/components/WebGLBackground.tsx b/src/components/WebGLBackground.tsx index ec6fb4d..16936d9 100644 --- a/src/components/WebGLBackground.tsx +++ b/src/components/WebGLBackground.tsx @@ -30,29 +30,29 @@ let scrollProgress = 0; /* ---------- PCB Trace path (the main route the camera follows) ---------- */ const TRACE_POINTS = [ - // Start — top of board + // Start — top of board (wide open) new THREE.Vector3(0, 0, 0), - new THREE.Vector3(2, 0, -4), - new THREE.Vector3(5, 0, -5), + new THREE.Vector3(3, 0, -6), + new THREE.Vector3(6, 0, -10), // First bend (Hero section) - new THREE.Vector3(8, 0, -5), - new THREE.Vector3(8, 0, -8), - // Horizontal run (About) - new THREE.Vector3(5, 0, -12), - new THREE.Vector3(0, 0, -14), + new THREE.Vector3(10, 0, -12), + new THREE.Vector3(10, 0, -18), + // Long run to About + new THREE.Vector3(6, 0, -26), + new THREE.Vector3(0, 0, -32), // Via + layer change (Cases) - new THREE.Vector3(-3, -0.1, -16), - new THREE.Vector3(-6, -0.1, -18), + new THREE.Vector3(-4, -0.1, -38), + new THREE.Vector3(-8, -0.1, -44), // Right angle bend (Photos) - new THREE.Vector3(-6, -0.1, -22), - new THREE.Vector3(-3, 0, -24), + new THREE.Vector3(-8, -0.1, -52), + new THREE.Vector3(-4, 0, -58), // Long straight (Sprints) - new THREE.Vector3(2, 0, -26), - new THREE.Vector3(6, 0, -28), + new THREE.Vector3(3, 0, -64), + new THREE.Vector3(8, 0, -70), // Final destination (Contact) - new THREE.Vector3(6, 0, -32), - new THREE.Vector3(3, 0, -35), - new THREE.Vector3(0, 0, -38), + new THREE.Vector3(8, 0, -78), + new THREE.Vector3(4, 0, -84), + new THREE.Vector3(0, 0, -90), ]; function createTraceCurve() { @@ -99,20 +99,20 @@ function SecondaryTraces() { // Branch traces at various points along the main route const branches = [ // Hero area branches - [new THREE.Vector3(3, 0, -4), new THREE.Vector3(3, 0, -2), new THREE.Vector3(5, 0, -1)], - [new THREE.Vector3(5, 0, -5), new THREE.Vector3(7, 0, -3), new THREE.Vector3(10, 0, -3)], + [new THREE.Vector3(5, 0, -8), new THREE.Vector3(5, 0, -4), new THREE.Vector3(8, 0, -2)], + [new THREE.Vector3(7, 0, -11), new THREE.Vector3(10, 0, -7), new THREE.Vector3(13, 0, -6)], // About area - [new THREE.Vector3(2, 0, -12), new THREE.Vector3(2, 0, -10), new THREE.Vector3(4, 0, -9)], - [new THREE.Vector3(-1, 0, -13), new THREE.Vector3(-3, 0, -11), new THREE.Vector3(-5, 0, -11)], + [new THREE.Vector3(3, 0, -28), new THREE.Vector3(3, 0, -24), new THREE.Vector3(6, 0, -22)], + [new THREE.Vector3(-2, 0, -31), new THREE.Vector3(-5, 0, -27), new THREE.Vector3(-7, 0, -26)], // Cases area - [new THREE.Vector3(-4, -0.1, -17), new THREE.Vector3(-2, -0.1, -15), new THREE.Vector3(0, -0.1, -15)], - [new THREE.Vector3(-6, -0.1, -20), new THREE.Vector3(-8, -0.1, -19), new THREE.Vector3(-10, -0.1, -18)], + [new THREE.Vector3(-5, -0.1, -40), new THREE.Vector3(-3, -0.1, -36), new THREE.Vector3(0, -0.1, -35)], + [new THREE.Vector3(-8, -0.1, -46), new THREE.Vector3(-11, -0.1, -44), new THREE.Vector3(-13, -0.1, -42)], // Sprints area - [new THREE.Vector3(4, 0, -27), new THREE.Vector3(4, 0, -25), new THREE.Vector3(6, 0, -24)], - [new THREE.Vector3(1, 0, -27), new THREE.Vector3(-1, 0, -25), new THREE.Vector3(-3, 0, -25)], + [new THREE.Vector3(6, 0, -65), new THREE.Vector3(6, 0, -61), new THREE.Vector3(9, 0, -59)], + [new THREE.Vector3(2, 0, -67), new THREE.Vector3(-1, 0, -63), new THREE.Vector3(-4, 0, -62)], // Contact area - [new THREE.Vector3(4, 0, -33), new THREE.Vector3(6, 0, -31), new THREE.Vector3(8, 0, -31)], - [new THREE.Vector3(1, 0, -36), new THREE.Vector3(-1, 0, -34), new THREE.Vector3(-3, 0, -34)], + [new THREE.Vector3(5, 0, -80), new THREE.Vector3(8, 0, -76), new THREE.Vector3(10, 0, -75)], + [new THREE.Vector3(1, 0, -85), new THREE.Vector3(-2, 0, -82), new THREE.Vector3(-5, 0, -81)], ]; branches.forEach(pts => { @@ -233,8 +233,8 @@ function Substrate() { return ( {/* Main board */} - - + + {/* Solder mask grid pattern */} {Array.from({ length: 20 }).map((_, i) => ( - - + + ))} {Array.from({ length: 14 }).map((_, i) => ( - + ))} @@ -261,12 +261,12 @@ function Substrate() { /* ---------- Vias (through-hole connections) ---------- */ function Vias() { const positions: [number, number, number][] = [ - [8, 0, -6], [5, 0, -8], [2, 0, -11], - [-2, 0, -15], [-5, 0, -17], [-4, 0, -21], - [0, 0, -25], [4, 0, -29], [2, 0, -33], + [10, 0, -14], [8, 0, -18], [3, 0, -28], + [-3, 0, -36], [-7, 0, -42], [-6, 0, -50], + [0, 0, -60], [5, 0, -68], [3, 0, -80], // Extra decorative vias - [10, 0, -4], [-7, 0, -12], [7, 0, -22], - [-8, 0, -27], [8, 0, -35], [-2, 0, -38], + [12, 0, -10], [-9, 0, -28], [9, 0, -52], + [-10, 0, -65], [10, 0, -82], [-3, 0, -88], ]; return ( @@ -306,7 +306,7 @@ function ICComponent({ position, size = [2, 0.3, 1.2], label, color = '#1a1a1a' useFrame(({ clock }) => { if (!groupRef.current) return; - const cameraZ = -scrollProgress * 38; + const cameraZ = -scrollProgress * 90; const dist = Math.abs(position[2] - cameraZ); const glow = Math.max(0, 1 - dist / 6); // Subtle float when active @@ -369,7 +369,7 @@ function Capacitor({ position, radius = 0.25, height = 0.5, color = '#2a4a8a' }: useFrame(({ clock }) => { if (!ref.current) return; - const cameraZ = -scrollProgress * 38; + const cameraZ = -scrollProgress * 90; const dist = Math.abs(position[2] - cameraZ); const glow = Math.max(0, 1 - dist / 6); (ref.current.material as THREE.MeshStandardMaterial).emissiveIntensity = glow * 0.5; @@ -424,7 +424,7 @@ function LED({ position, color = '#5bd1d8' }: { position: [number, number, numbe useFrame(({ clock }) => { if (!ref.current) return; const t = clock.getElapsedTime(); - const cameraZ = -scrollProgress * 38; + const cameraZ = -scrollProgress * 90; const dist = Math.abs(position[2] - cameraZ); const proximity = Math.max(0, 1 - dist / 5); (ref.current.material as THREE.MeshStandardMaterial).emissiveIntensity = proximity * (1.5 + Math.sin(t * 3) * 0.5); @@ -472,7 +472,7 @@ function SectionLabel({ position, text, subtitle }: { position: [number, number, useFrame(() => { if (!ref.current) return; - const cameraZ = -scrollProgress * 38; + const cameraZ = -scrollProgress * 90; const dist = Math.abs(position[2] - cameraZ); const glow = Math.max(0, 1 - dist / 6); ref.current.children.forEach(child => { @@ -523,94 +523,94 @@ function PCBComponents() { return ( {/* ── HERO — Main MCU ── */} - - - - - - - - - - + + + + + + + + + + {/* ── ABOUT — Approche & expertise ── */} - - - - - - - - - - - - + + + + + + + + + + + + {/* ── CASES — Cas concrets ── */} - - - - - - - - - - + + + + + + + + + + {/* ── MEDIA — Photos & videos ── */} - - - - - - + + + + + + {/* ── SPRINTS — Missions ── */} - - - - - - - - - - + + + + + + + + + + {/* ── CONTACT — Energy storage ── */} - - - - - - - - - - - + + + + + + + + + + + {/* ── Extra scattered passives ── */} - - - - - - - - - - - + + + + + + + + + + + {/* ── Board title silkscreen ── */} - - - - + + + + ); } @@ -661,14 +661,14 @@ function AmbientDust({ count = 200 }) { // Define zoom stops — camera zooms in when scroll reaches each section const ZOOM_STOPS = [ - { scroll: 0.00, pos: [0, 4, 2], look: [2, 0, -4], fov: 50 }, // Overview start - { scroll: 0.10, pos: [6, 1.8, -4], look: [6, 0, -6], fov: 40 }, // HERO — zoom on ESP32 - { scroll: 0.25, pos: [1, 1.5, -11], look: [1, 0, -13], fov: 42 }, // ABOUT — zoom on LM358 - { scroll: 0.40, pos: [-5, 1.8, -17], look: [-5, 0, -19], fov: 40 }, // CASES — zoom on MOSFET - { scroll: 0.52, pos: [-2, 1.5, -21.5], look: [-2, 0, -23], fov: 42 }, // MEDIA — zoom on USB-C - { scroll: 0.65, pos: [4, 1.5, -25], look: [4, 0, -27], fov: 42 }, // SPRINTS — zoom on 7805 - { scroll: 0.80, pos: [1, 2, -33], look: [1, 0, -36], fov: 45 }, // CONTACT — zoom on caps - { scroll: 1.00, pos: [0, 5, -20], look: [0, 0, -20], fov: 55 }, // End — pull out overview + { scroll: 0.00, pos: [0, 6, 4], look: [3, 0, -8], fov: 55 }, // Overview start + { scroll: 0.08, pos: [10, 2.5, -10], look: [10, 0, -14], fov: 38 }, // HERO — zoom on ESP32 + { scroll: 0.22, pos: [0, 2.2, -28], look: [0, 0, -32], fov: 40 }, // ABOUT — zoom on LM358 + { scroll: 0.36, pos: [-7, 2.5, -40], look: [-8, 0, -44], fov: 38 }, // CASES — zoom on MOSFET + { scroll: 0.48, pos: [-4, 2, -52], look: [-4, 0, -56], fov: 40 }, // MEDIA — zoom on USB-C + { scroll: 0.62, pos: [5, 2.2, -64], look: [6, 0, -68], fov: 40 }, // SPRINTS — zoom on 7805 + { scroll: 0.78, pos: [2, 2.5, -80], look: [2, 0, -84], fov: 42 }, // CONTACT — zoom on caps + { scroll: 1.00, pos: [0, 8, -45], look: [0, 0, -45], fov: 60 }, // End — pull out overview ]; function TraceCamera() {