Marc Mintel
97e76c7cac
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 6s
Build & Deploy / 🧪 QA (push) Failing after 38s
Build & Deploy / 🏗️ Build (push) Has been skipped
Build & Deploy / 🚀 Deploy (push) Has been skipped
Build & Deploy / 🧪 Post-Deploy Verification (push) Has been skipped
Build & Deploy / 🔔 Notify (push) Successful in 2s
644 lines
30 KiB
TypeScript
644 lines
30 KiB
TypeScript
/* eslint-disable react/no-unknown-property */
|
|
'use client';
|
|
|
|
import React, { useRef, useMemo, useState, useEffect } from 'react';
|
|
import { Canvas, useFrame } from '@react-three/fiber';
|
|
import { OrbitControls, PerspectiveCamera, Stars, Line } from '@react-three/drei';
|
|
import { EffectComposer, Bloom } from '@react-three/postprocessing';
|
|
import * as THREE from 'three';
|
|
|
|
// ═══════════════════════════════════════════════════════════════
|
|
// CORE ALGORITHMS
|
|
// ═══════════════════════════════════════════════════════════════
|
|
|
|
// Deterministic hash
|
|
function sr(seed: number) {
|
|
const x = Math.sin(seed * 127.1 + 311.7) * 43758.5453;
|
|
return x - Math.floor(x);
|
|
}
|
|
|
|
// ── TERRAIN HEIGHT FUNCTION ──
|
|
// This is the SINGLE SOURCE OF TRUTH for terrain elevation.
|
|
// Used by BOTH the terrain mesh AND all object placement.
|
|
const TERRAIN_R = 260;
|
|
function terrainY(x: number, z: number): number {
|
|
const dist = Math.sqrt(x * x + z * z);
|
|
const edge = Math.min(1, dist / TERRAIN_R);
|
|
const h = Math.max(0, 1 - edge * 1.3);
|
|
let y = 0;
|
|
y += Math.sin(x * 0.05) * Math.cos(z * 0.04) * 1.3 * h;
|
|
y += Math.sin(x * 0.1 + 2) * Math.cos(z * 0.08 + 1) * 0.5 * h;
|
|
y += Math.sin(x * 0.02 + 5) * Math.cos(z * 0.025 + 3) * 1.0 * h;
|
|
y -= edge * edge * 25;
|
|
return y;
|
|
}
|
|
|
|
// Place on terrain — EVERY object uses this
|
|
function onTerrain(x: number, z: number): THREE.Vector3 {
|
|
return new THREE.Vector3(x, terrainY(x, z), z);
|
|
}
|
|
|
|
// ── CATENARY CABLE ──
|
|
// Real catenary droop: cosh-based sag between two attachment points
|
|
function catenarySag(t: number): number {
|
|
// t: 0→1 along cable. Returns droop factor: 0 at ends, -1 at center
|
|
const u = t * 2 - 1; // -1 → 1
|
|
const cEdge = Math.cosh(2.5);
|
|
return -(cEdge - Math.cosh(u * 2.5)) / (cEdge - 1);
|
|
}
|
|
|
|
function catenaryPoints(
|
|
p1: THREE.Vector3, p2: THREE.Vector3,
|
|
sag: number, segments: number = 20,
|
|
): THREE.Vector3[] {
|
|
const pts: THREE.Vector3[] = [];
|
|
for (let i = 0; i <= segments; i++) {
|
|
const t = i / segments;
|
|
pts.push(new THREE.Vector3(
|
|
p1.x + (p2.x - p1.x) * t,
|
|
p1.y + (p2.y - p1.y) * t + catenarySag(t) * sag,
|
|
p1.z + (p2.z - p1.z) * t,
|
|
));
|
|
}
|
|
return pts;
|
|
}
|
|
|
|
// ── POISSON DISC SAMPLING (approximate) for natural spacing ──
|
|
function poissonDisc(
|
|
count: number, radius: number, bounds: number, seed: number,
|
|
exclusions: THREE.Vector3[] = [], exRadius = 12,
|
|
): THREE.Vector3[] {
|
|
const pts: THREE.Vector3[] = [];
|
|
const attempts = count * 12;
|
|
for (let i = 0; i < attempts && pts.length < count; i++) {
|
|
const x = (sr(seed + i * 17) - 0.5) * bounds * 2;
|
|
const z = (sr(seed + i * 23 + 1000) - 0.5) * bounds * 2;
|
|
if (Math.sqrt(x * x + z * z) > TERRAIN_R * 0.75) continue;
|
|
if (pts.some(p => Math.hypot(x - p.x, z - p.z) < radius)) continue;
|
|
if (exclusions.some(p => Math.hypot(x - p.x, z - p.z) < exRadius)) continue;
|
|
pts.push(onTerrain(x, z));
|
|
}
|
|
return pts;
|
|
}
|
|
|
|
function nearest(pt: THREE.Vector3, list: THREE.Vector3[]): THREE.Vector3 {
|
|
let best = list[0], bestD = Infinity;
|
|
for (const c of list) { const d = Math.hypot(pt.x - c.x, pt.z - c.z); if (d < bestD) { bestD = d; best = c; } }
|
|
return best;
|
|
}
|
|
|
|
// ═══════════════════════════════════════════════════════════════
|
|
// PROCEDURAL WORLD — all computed from algorithms
|
|
// ═══════════════════════════════════════════════════════════════
|
|
|
|
// Step 1: Place hub substations at fixed strategic positions
|
|
const HUBS = [onTerrain(-6, 14), onTerrain(50, -2)];
|
|
|
|
// Step 2: Place cities at the periphery
|
|
const CITY_DATA = [
|
|
{ city: onTerrain(100, -55), sub: onTerrain(84, -46) },
|
|
{ city: onTerrain(96, 58), sub: onTerrain(82, 50) },
|
|
{ city: onTerrain(-4, -102), sub: onTerrain(-3, -86) },
|
|
];
|
|
|
|
// Step 3: Wind farm zones — use noise to find suitable areas
|
|
type WindFarm = {
|
|
sub: THREE.Vector3;
|
|
turbines: THREE.Vector3[];
|
|
chains: THREE.Vector3[][]; // turbine→turbine→sub rows
|
|
};
|
|
|
|
function placeWindFarm(
|
|
cx: number, cz: number,
|
|
cols: number, rows: number,
|
|
spacing: number,
|
|
subOffX: number, subOffZ: number,
|
|
rotDeg: number, seed: number,
|
|
): WindFarm {
|
|
const rad = (rotDeg * Math.PI) / 180;
|
|
const co = Math.cos(rad), si = Math.sin(rad);
|
|
const grid: THREE.Vector3[][] = [];
|
|
const turbines: THREE.Vector3[] = [];
|
|
|
|
for (let r = 0; r < rows; r++) {
|
|
const row: THREE.Vector3[] = [];
|
|
for (let c = 0; c < cols; c++) {
|
|
const lx = (c - (cols - 1) / 2) * spacing + (sr(seed + r * 10 + c) - 0.5) * 2;
|
|
const lz = (r - (rows - 1) / 2) * spacing + (sr(seed + r * 10 + c + 50) - 0.5) * 2;
|
|
const wx = cx + lx * co - lz * si;
|
|
const wz = cz + lx * si + lz * co;
|
|
const pos = onTerrain(wx, wz);
|
|
turbines.push(pos);
|
|
row.push(pos);
|
|
}
|
|
grid.push(row);
|
|
}
|
|
|
|
const sub = onTerrain(cx + subOffX, cz + subOffZ);
|
|
|
|
// Chain: each row connects turbine→turbine→sub
|
|
const chains: THREE.Vector3[][] = grid.map(row => [...row, sub]);
|
|
|
|
return { sub, turbines, chains };
|
|
}
|
|
|
|
const WIND_FARMS: WindFarm[] = [
|
|
placeWindFarm(-82, 62, 3, 2, 14, 32, -10, 5, 101),
|
|
placeWindFarm(16, 90, 3, 2, 13, -22, -16, 12, 201),
|
|
placeWindFarm(-50, -22, 2, 3, 12, 20, 12, -8, 301),
|
|
placeWindFarm(70, 52, 3, 2, 12, -24, -14, 3, 401),
|
|
placeWindFarm(-100, -8, 2, 2, 14, 22, 8, 0, 501),
|
|
placeWindFarm(90, -64, 3, 2, 12, -26, 10, -6, 601),
|
|
placeWindFarm(-60, 92, 2, 2, 13, 18, -16, 18, 701),
|
|
placeWindFarm(44, -84, 2, 3, 12, -18, 20, 0, 801),
|
|
];
|
|
|
|
// Step 4: Solar parks with subs at edge
|
|
type SolarPark = { pos: THREE.Vector3; sub: THREE.Vector3; rows: number; cols: number };
|
|
|
|
const SOLAR_PARKS: SolarPark[] = [
|
|
{ pos: onTerrain(-114, -56), sub: onTerrain(-98, -48), rows: 6, cols: 8 },
|
|
{ pos: onTerrain(-104, -72), sub: onTerrain(-98, -48), rows: 5, cols: 7 },
|
|
{ pos: onTerrain(100, 18), sub: onTerrain(88, 12), rows: 5, cols: 7 },
|
|
{ pos: onTerrain(-48, -70), sub: onTerrain(-40, -58), rows: 4, cols: 6 },
|
|
{ pos: onTerrain(58, -20), sub: onTerrain(52, -14), rows: 5, cols: 6 },
|
|
{ pos: onTerrain(-84, 34), sub: onTerrain(-74, 30), rows: 4, cols: 5 },
|
|
];
|
|
|
|
// Deduplicated solar subs
|
|
const solarSubSet = new Set<string>();
|
|
const SOLAR_SUBS: THREE.Vector3[] = [];
|
|
SOLAR_PARKS.forEach(sp => {
|
|
const k = `${sp.sub.x.toFixed(1)},${sp.sub.z.toFixed(1)}`;
|
|
if (!solarSubSet.has(k)) { solarSubSet.add(k); SOLAR_SUBS.push(sp.sub); }
|
|
});
|
|
|
|
// Step 5: Collect all gen subs and auto-route to hubs
|
|
const ALL_GEN_SUBS = [...WIND_FARMS.map(f => f.sub), ...SOLAR_SUBS];
|
|
const ALL_CITY_SUBS = CITY_DATA.map(c => c.sub);
|
|
const ALL_SUBS = [...ALL_GEN_SUBS, ...HUBS, ...ALL_CITY_SUBS];
|
|
|
|
// Step 6: HSVL tower routes
|
|
const TWR_H = 9;
|
|
function lerpRoute(from: THREE.Vector3, to: THREE.Vector3, n: number): THREE.Vector3[] {
|
|
const pts = [from];
|
|
for (let i = 1; i <= n; i++) {
|
|
const t = i / (n + 1);
|
|
pts.push(onTerrain(from.x + (to.x - from.x) * t, from.z + (to.z - from.z) * t));
|
|
}
|
|
pts.push(to);
|
|
return pts;
|
|
}
|
|
function autoTowerCount(a: THREE.Vector3, b: THREE.Vector3) {
|
|
return Math.max(2, Math.floor(Math.hypot(a.x - b.x, a.z - b.z) / 22));
|
|
}
|
|
|
|
const HSVL_ROUTES: THREE.Vector3[][] = [];
|
|
ALL_GEN_SUBS.forEach(sub => {
|
|
const hub = nearest(sub, HUBS);
|
|
HSVL_ROUTES.push(lerpRoute(sub, hub, autoTowerCount(sub, hub)));
|
|
});
|
|
HSVL_ROUTES.push(lerpRoute(HUBS[0], HUBS[1], autoTowerCount(HUBS[0], HUBS[1])));
|
|
CITY_DATA.forEach(cd => {
|
|
const hub = nearest(cd.sub, HUBS);
|
|
HSVL_ROUTES.push(lerpRoute(hub, cd.sub, autoTowerCount(hub, cd.sub)));
|
|
});
|
|
|
|
// Step 7: All cable pairs
|
|
const DIST_CABLES: [THREE.Vector3, THREE.Vector3][] = [
|
|
...SOLAR_PARKS.map(sp => [sp.pos, sp.sub] as [THREE.Vector3, THREE.Vector3]),
|
|
...CITY_DATA.map(cd => [cd.sub, cd.city] as [THREE.Vector3, THREE.Vector3]),
|
|
];
|
|
|
|
// Step 8: All infra for exclusion
|
|
const ALL_INFRA: THREE.Vector3[] = [
|
|
...ALL_SUBS,
|
|
...CITY_DATA.map(c => c.city),
|
|
...WIND_FARMS.flatMap(f => f.turbines),
|
|
...SOLAR_PARKS.map(s => s.pos),
|
|
];
|
|
|
|
// Step 9: Poisson-disc distributed forests
|
|
const FOREST_POSITIONS = poissonDisc(55, 18, 140, 5000, ALL_INFRA, 14);
|
|
|
|
// ═══════════════════════════════════════════════════════════════
|
|
// TERRAIN MESH — uses the same terrainY() function
|
|
// ═══════════════════════════════════════════════════════════════
|
|
const Terrain = () => {
|
|
const geometry = useMemo(() => {
|
|
const geo = new THREE.CircleGeometry(TERRAIN_R, 200);
|
|
const pos = geo.attributes.position;
|
|
for (let i = 0; i < pos.count; i++) {
|
|
const x = pos.getX(i);
|
|
const z = -pos.getY(i);
|
|
pos.setX(i, x);
|
|
pos.setY(i, terrainY(x, z));
|
|
pos.setZ(i, z);
|
|
}
|
|
geo.computeVertexNormals();
|
|
return geo;
|
|
}, []);
|
|
return (
|
|
<group>
|
|
<mesh geometry={geometry}><meshStandardMaterial color="#020a16" roughness={0.95} metalness={0.05} /></mesh>
|
|
<mesh geometry={geometry} position={[0, 0.05, 0]}><meshBasicMaterial color="#0a2a50" wireframe transparent opacity={0.15} /></mesh>
|
|
</group>
|
|
);
|
|
};
|
|
|
|
// ═══════════════════════════════════════════════════════════════
|
|
// COMPONENTS
|
|
// ═══════════════════════════════════════════════════════════════
|
|
|
|
const SolarField = ({ position, rows = 5, cols = 7 }: { position: THREE.Vector3; rows?: number; cols?: number }) => (
|
|
<group position={position}>
|
|
{Array.from({ length: rows }).map((_, r) =>
|
|
Array.from({ length: cols }).map((_, c) => (
|
|
<group key={`${r}-${c}`} position={[c * 2.2 - (cols * 2.2) / 2, 0, r * 2 - (rows * 2) / 2]}>
|
|
<mesh position={[0, 0.35, 0]}><cylinderGeometry args={[0.02, 0.02, 0.7, 3]} /><meshBasicMaterial color="#1a4a70" transparent opacity={0.3} /></mesh>
|
|
<group position={[0, 0.7, 0]} rotation={[-Math.PI / 5, 0, 0]}>
|
|
<mesh><boxGeometry args={[1.8, 1.1, 0.04]} /><meshStandardMaterial color="#0a1e3d" emissive="#002244" emissiveIntensity={0.3} metalness={0.9} roughness={0.1} /></mesh>
|
|
<mesh position={[0, 0, 0.025]}><boxGeometry args={[1.8, 1.1, 0.01]} /><meshBasicMaterial color="#3388cc" wireframe transparent opacity={0.15} toneMapped={false} /></mesh>
|
|
</group>
|
|
</group>
|
|
))
|
|
)}
|
|
</group>
|
|
);
|
|
|
|
const TH = 6, BLade = 3;
|
|
const WindTurbine = ({ position, seed = 0 }: { position: THREE.Vector3; seed?: number }) => {
|
|
const bladesRef = useRef<THREE.Group>(null);
|
|
const speed = 1.8 + sr(seed * 7) * 1.2;
|
|
useFrame((s) => { if (bladesRef.current) bladesRef.current.rotation.z = s.clock.elapsedTime * speed; });
|
|
return (
|
|
<group position={position}>
|
|
<mesh position={[0, TH / 2, 0]}><cylinderGeometry args={[0.07, 0.14, TH, 6]} /><meshBasicMaterial color="#4488cc" transparent opacity={0.55} toneMapped={false} /></mesh>
|
|
<mesh position={[0, TH, -0.15]}><boxGeometry args={[0.2, 0.18, 0.4]} /><meshBasicMaterial color="#5599dd" transparent opacity={0.55} toneMapped={false} /></mesh>
|
|
<group position={[0, TH, 0.08]} ref={bladesRef}>
|
|
<mesh><sphereGeometry args={[0.1, 6, 6]} /><meshBasicMaterial color="#80ccff" toneMapped={false} /></mesh>
|
|
{[0, 1, 2].map(i => (
|
|
<group key={i} rotation={[0, 0, (i * Math.PI * 2) / 3]}>
|
|
<mesh position={[0, BLade / 2 + 0.1, 0]}><boxGeometry args={[0.12, BLade, 0.02]} /><meshBasicMaterial color="#70ccff" transparent opacity={0.45} toneMapped={false} /></mesh>
|
|
</group>
|
|
))}
|
|
</group>
|
|
</group>
|
|
);
|
|
};
|
|
|
|
const Substation = ({ position, size = 'small' }: { position: THREE.Vector3; size?: 'small' | 'large' }) => {
|
|
const s = size === 'large' ? 1.3 : 0.8;
|
|
const pulseRef = useRef<THREE.Mesh>(null);
|
|
useFrame((st) => { if (pulseRef.current) pulseRef.current.scale.setScalar(1 + Math.sin(st.clock.elapsedTime * 2.5) * 0.15); });
|
|
return (
|
|
<group position={position}>
|
|
<mesh position={[0, 0.8 * s, 0]}><boxGeometry args={[4 * s, 1.6 * s, 3 * s]} /><meshBasicMaterial color="#3388aa" wireframe transparent opacity={0.2} toneMapped={false} /></mesh>
|
|
<mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, 0.05, 0]}><planeGeometry args={[4 * s, 3 * s]} /><meshStandardMaterial color="#0a1825" roughness={0.9} metalness={0.1} /></mesh>
|
|
{[[-0.8 * s, -0.5 * s], [0.8 * s, -0.5 * s], [0, 0.6 * s]].map(([x, z], i) => (
|
|
<group key={i} position={[x, 0, z]}>
|
|
<mesh position={[0, 0.5 * s, 0]}><boxGeometry args={[0.8 * s, 1 * s, 0.6 * s]} /><meshStandardMaterial color="#0c1e35" emissive="#0a1828" emissiveIntensity={0.3} metalness={0.6} roughness={0.4} /></mesh>
|
|
<mesh position={[0, 0.5 * s, 0]}><boxGeometry args={[0.85 * s, 1.05 * s, 0.65 * s]} /><meshBasicMaterial color="#4488aa" wireframe transparent opacity={0.15} toneMapped={false} /></mesh>
|
|
<mesh position={[0, 1.1 * s, 0]}><cylinderGeometry args={[0.04 * s, 0.06 * s, 0.3 * s, 4]} /><meshBasicMaterial color="#77ccee" transparent opacity={0.5} toneMapped={false} /></mesh>
|
|
</group>
|
|
))}
|
|
<mesh position={[0, 1.2 * s, -0.5 * s]} rotation={[0, 0, Math.PI / 2]}><cylinderGeometry args={[0.03, 0.03, 2.5 * s, 3]} /><meshBasicMaterial color="#60eeaa" transparent opacity={0.4} toneMapped={false} /></mesh>
|
|
<mesh position={[0, 1.6 * s, 0]} ref={pulseRef}><sphereGeometry args={[0.2 * s, 8, 8]} /><meshBasicMaterial color="#60ff90" toneMapped={false} /></mesh>
|
|
</group>
|
|
);
|
|
};
|
|
|
|
const City = ({ position, seed = 0 }: { position: THREE.Vector3; seed?: number }) => {
|
|
const buildings = useMemo(() => {
|
|
const items = [];
|
|
const count = 10 + Math.floor(sr(seed * 3) * 8);
|
|
for (let i = 0; i < count; i++) {
|
|
const angle = sr(seed * 100 + i * 17) * Math.PI * 2;
|
|
const radius = 0.5 + sr(seed * 100 + i * 29) * 6;
|
|
const height = 1 + sr(seed * 100 + i * 37) * 4;
|
|
items.push({
|
|
x: Math.cos(angle) * radius, z: Math.sin(angle) * radius,
|
|
height, width: 0.4 + sr(seed * 100 + i * 43) * 0.8,
|
|
depth: 0.4 + sr(seed * 100 + i * 47) * 0.6,
|
|
rows: Math.max(1, Math.floor(height / 0.8)),
|
|
});
|
|
}
|
|
return items;
|
|
}, [seed]);
|
|
|
|
return (
|
|
<group position={position}>
|
|
{buildings.map((b, i) => (
|
|
<group key={i} position={[b.x, 0, b.z]}>
|
|
<mesh position={[0, b.height / 2, 0]}><boxGeometry args={[b.width, b.height, b.depth]} /><meshStandardMaterial color="#040810" emissive="#081530" emissiveIntensity={0.15} metalness={0.9} roughness={0.1} /></mesh>
|
|
{Array.from({ length: b.rows }).map((_, row) => {
|
|
const wc = Math.max(1, Math.floor(b.width / 0.35));
|
|
return Array.from({ length: wc }).map((_, col) => {
|
|
if (sr(seed * 1000 + i * 100 + row * 10 + col) < 0.25) return null;
|
|
const color = sr(seed * 2000 + i * 50 + row + col) > 0.45 ? '#ffdd44' : '#aaddff';
|
|
const xP = wc > 1 ? (col / (wc - 1) - 0.5) * (b.width * 0.7) : 0;
|
|
return (
|
|
<group key={`w-${row}-${col}`}>
|
|
<mesh position={[xP, 0.35 + row * 0.8, b.depth / 2 + 0.01]}><planeGeometry args={[0.22, 0.28]} /><meshBasicMaterial color={color} toneMapped={false} /></mesh>
|
|
<mesh position={[xP, 0.35 + row * 0.8, -b.depth / 2 - 0.01]} rotation={[0, Math.PI, 0]}><planeGeometry args={[0.22, 0.28]} /><meshBasicMaterial color={color} toneMapped={false} /></mesh>
|
|
</group>
|
|
);
|
|
});
|
|
})}
|
|
<mesh position={[0, b.height + 0.08, 0]}><sphereGeometry args={[0.05, 4, 4]} /><meshBasicMaterial color="#ff4444" toneMapped={false} /></mesh>
|
|
</group>
|
|
))}
|
|
<pointLight position={[0, 5, 0]} intensity={8} color="#ffaa44" distance={80} />
|
|
</group>
|
|
);
|
|
};
|
|
|
|
// ═══════════════════════════════════════════════════════════════
|
|
// HOCHSPANNUNGSMAST — tapered pylon
|
|
// ═══════════════════════════════════════════════════════════════
|
|
const TransmissionTower = ({ position }: { position: THREE.Vector3 }) => (
|
|
<group position={position}>
|
|
<mesh position={[0, TWR_H / 2, 0]}><cylinderGeometry args={[0.15, 0.6, TWR_H, 4]} /><meshBasicMaterial color="#5599bb" transparent opacity={0.5} toneMapped={false} /></mesh>
|
|
<mesh position={[0, TWR_H / 2, 0]}><cylinderGeometry args={[0.18, 0.65, TWR_H, 4]} /><meshBasicMaterial color="#4488aa" wireframe transparent opacity={0.2} toneMapped={false} /></mesh>
|
|
<mesh position={[0, TWR_H, 0]} rotation={[0, 0, Math.PI / 2]}><cylinderGeometry args={[0.04, 0.04, 3.5, 4]} /><meshBasicMaterial color="#6699cc" transparent opacity={0.55} toneMapped={false} /></mesh>
|
|
<mesh position={[0, TWR_H * 0.7, 0]} rotation={[0, 0, Math.PI / 2]}><cylinderGeometry args={[0.03, 0.03, 2.5, 4]} /><meshBasicMaterial color="#5588aa" transparent opacity={0.4} toneMapped={false} /></mesh>
|
|
{[-1.6, 1.6].map((xOff, i) => (
|
|
<mesh key={i} position={[xOff, TWR_H - 0.3, 0]}><cylinderGeometry args={[0.02, 0.04, 0.4, 4]} /><meshBasicMaterial color="#88ccee" transparent opacity={0.5} toneMapped={false} /></mesh>
|
|
))}
|
|
<mesh position={[0, TWR_H + 0.3, 0]}><sphereGeometry args={[0.1, 6, 6]} /><meshBasicMaterial color="#ff4444" toneMapped={false} /></mesh>
|
|
</group>
|
|
);
|
|
|
|
// ═══════════════════════════════════════════════════════════════
|
|
// CABLE NETWORK — all use catenary algorithm
|
|
// ═══════════════════════════════════════════════════════════════
|
|
const CableNetwork = () => {
|
|
// Pre-compute all cable point arrays
|
|
const cables = useMemo(() => {
|
|
const result: { points: THREE.Vector3[]; color: string; width: number; opacity: number }[] = [];
|
|
|
|
// HSVL cables: tower-top to tower-top with catenary sag
|
|
HSVL_ROUTES.forEach(route => {
|
|
for (let i = 1; i < route.length; i++) {
|
|
const a = route[i - 1].clone(); a.y += TWR_H;
|
|
const b = route[i].clone(); b.y += TWR_H;
|
|
result.push({
|
|
points: catenaryPoints(a, b, 2.5, 20),
|
|
color: '#6699cc', width: 1.5, opacity: 0.4,
|
|
});
|
|
}
|
|
});
|
|
|
|
// Distribution cables: solar→sub, sub→city (elevated)
|
|
DIST_CABLES.forEach(([from, to]) => {
|
|
const a = from.clone(); a.y += 5;
|
|
const b = to.clone(); b.y += 5;
|
|
result.push({
|
|
points: catenaryPoints(a, b, 1.5, 16),
|
|
color: '#55cc88', width: 1.2, opacity: 0.35,
|
|
});
|
|
});
|
|
|
|
// Wind farm internal chains: ground-level cables
|
|
WIND_FARMS.forEach(farm => {
|
|
farm.chains.forEach(chain => {
|
|
for (let i = 1; i < chain.length; i++) {
|
|
const a = chain[i - 1].clone(); a.y += 0.3;
|
|
const b = chain[i].clone(); b.y += 0.3;
|
|
result.push({
|
|
points: catenaryPoints(a, b, 0.3, 8),
|
|
color: '#30ff70', width: 1, opacity: 0.2,
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
return result;
|
|
}, []);
|
|
|
|
// Towers at intermediate route points
|
|
const towers = useMemo(() => {
|
|
const pts: THREE.Vector3[] = [];
|
|
HSVL_ROUTES.forEach(route => {
|
|
for (let i = 1; i < route.length - 1; i++) pts.push(route[i]);
|
|
});
|
|
return pts;
|
|
}, []);
|
|
|
|
return (
|
|
<group>
|
|
{towers.map((pos, i) => <TransmissionTower key={`t-${i}`} position={pos} />)}
|
|
{cables.map((c, i) => (
|
|
<Line key={`c-${i}`} points={c.points} color={c.color} lineWidth={c.width} transparent opacity={c.opacity} />
|
|
))}
|
|
</group>
|
|
);
|
|
};
|
|
|
|
// ═══════════════════════════════════════════════════════════════
|
|
// FOREST — Poisson-disc distributed, terrain-aware
|
|
// ═══════════════════════════════════════════════════════════════
|
|
const Forest = ({ position, seed = 0, count = 30 }: { position: THREE.Vector3; seed?: number; count?: number }) => {
|
|
const trees = useMemo(() => {
|
|
const items = [];
|
|
for (let i = 0; i < count; i++) {
|
|
// Use noise for natural clumping
|
|
const angle = sr(seed * 200 + i * 11) * Math.PI * 2;
|
|
const radius = sr(seed * 200 + i * 23) * 14;
|
|
const wx = position.x + Math.cos(angle) * radius;
|
|
const wz = position.z + Math.sin(angle) * radius;
|
|
// Skip if near infrastructure
|
|
if (ALL_INFRA.some(p => Math.hypot(wx - p.x, wz - p.z) < 10)) continue;
|
|
// Skip if too far from terrain center
|
|
if (Math.sqrt(wx * wx + wz * wz) > TERRAIN_R * 0.72) continue;
|
|
|
|
const localY = terrainY(wx, wz) - position.y; // height relative to parent group
|
|
const trunkH = 0.4 + sr(seed * 200 + i * 31) * 1;
|
|
const canopyH = 0.6 + sr(seed * 200 + i * 37) * 1.5;
|
|
const canopyR = 0.2 + sr(seed * 200 + i * 43) * 0.4;
|
|
const shade = sr(seed * 200 + i * 47);
|
|
items.push({
|
|
x: Math.cos(angle) * radius, y: localY, z: Math.sin(angle) * radius,
|
|
trunkH, canopyH, canopyR, shade,
|
|
brightness: 0.2 + sr(seed * 200 + i * 41) * 0.3,
|
|
});
|
|
}
|
|
return items;
|
|
}, [seed, count, position]);
|
|
|
|
return (
|
|
<group position={position}>
|
|
{trees.map((t, i) => (
|
|
<group key={i} position={[t.x, t.y, t.z]}>
|
|
<mesh position={[0, t.trunkH / 2, 0]}><cylinderGeometry args={[0.03, 0.06, t.trunkH, 4]} /><meshBasicMaterial color="#1a3328" transparent opacity={0.6} /></mesh>
|
|
<mesh position={[0, t.trunkH + t.canopyH / 2, 0]}><coneGeometry args={[t.canopyR, t.canopyH, 5]} /><meshBasicMaterial color={t.shade > 0.6 ? '#15aa45' : t.shade > 0.3 ? '#1a9050' : '#10804a'} transparent opacity={t.brightness} toneMapped={false} /></mesh>
|
|
<mesh position={[0, t.trunkH + t.canopyH * 0.65, 0]}><coneGeometry args={[t.canopyR * 0.6, t.canopyH * 0.5, 5]} /><meshBasicMaterial color={t.shade > 0.5 ? '#20cc55' : '#18bb50'} transparent opacity={t.brightness * 0.7} toneMapped={false} /></mesh>
|
|
</group>
|
|
))}
|
|
</group>
|
|
);
|
|
};
|
|
|
|
// ═══════════════════════════════════════════════════════════════
|
|
// ENERGY PARTICLES — flow along catenary cables
|
|
// ═══════════════════════════════════════════════════════════════
|
|
const EnergyParticles = () => {
|
|
const meshRef = useRef<THREE.InstancedMesh>(null);
|
|
const dummy = useMemo(() => new THREE.Object3D(), []);
|
|
|
|
// Build all curves from cable segments for particle paths
|
|
const curves = useMemo(() => {
|
|
const all: THREE.CatmullRomCurve3[] = [];
|
|
// HSVL
|
|
HSVL_ROUTES.forEach(route => {
|
|
for (let i = 1; i < route.length; i++) {
|
|
const a = route[i - 1].clone(); a.y += TWR_H;
|
|
const b = route[i].clone(); b.y += TWR_H;
|
|
all.push(new THREE.CatmullRomCurve3(catenaryPoints(a, b, 2.5, 12)));
|
|
}
|
|
});
|
|
// Distribution
|
|
DIST_CABLES.forEach(([from, to]) => {
|
|
const a = from.clone(); a.y += 5;
|
|
const b = to.clone(); b.y += 5;
|
|
all.push(new THREE.CatmullRomCurve3(catenaryPoints(a, b, 1.5, 10)));
|
|
});
|
|
// Farm chains
|
|
WIND_FARMS.forEach(farm => {
|
|
farm.chains.forEach(chain => {
|
|
for (let i = 1; i < chain.length; i++) {
|
|
const a = chain[i - 1].clone(); a.y += 0.3;
|
|
const b = chain[i].clone(); b.y += 0.3;
|
|
all.push(new THREE.CatmullRomCurve3(catenaryPoints(a, b, 0.3, 6)));
|
|
}
|
|
});
|
|
});
|
|
return all;
|
|
}, []);
|
|
|
|
const perCurve = 4;
|
|
const total = curves.length * perCurve;
|
|
const data = useMemo(() => {
|
|
const items = [];
|
|
for (let c = 0; c < curves.length; c++)
|
|
for (let p = 0; p < perCurve; p++)
|
|
items.push({ curve: c, t: p / perCurve, speed: 0.3 + sr(c * 100 + p * 7) * 0.35, phase: sr(c * 100 + p * 13) * Math.PI * 2 });
|
|
return items;
|
|
}, [curves]);
|
|
|
|
useFrame((state, delta) => {
|
|
if (!meshRef.current) return;
|
|
data.forEach((d, i) => {
|
|
d.t += delta * d.speed; if (d.t > 1) d.t -= 1;
|
|
const p = curves[d.curve].getPointAt(d.t);
|
|
dummy.position.copy(p);
|
|
dummy.scale.setScalar(0.5 + Math.sin(state.clock.elapsedTime * 6 + d.phase) * 0.3);
|
|
dummy.updateMatrix();
|
|
meshRef.current!.setMatrixAt(i, dummy.matrix);
|
|
});
|
|
meshRef.current.instanceMatrix.needsUpdate = true;
|
|
});
|
|
|
|
return (
|
|
<instancedMesh ref={meshRef} args={[undefined, undefined, total]}>
|
|
<sphereGeometry args={[0.18, 8, 8]} />
|
|
<meshBasicMaterial color="#80ffbb" toneMapped={false} />
|
|
</instancedMesh>
|
|
);
|
|
};
|
|
|
|
// ═══════════════════════════════════════════════════════════════
|
|
// AMBIENT MOTES
|
|
// ═══════════════════════════════════════════════════════════════
|
|
const AmbientMotes = () => {
|
|
const meshRef = useRef<THREE.InstancedMesh>(null);
|
|
const count = 250;
|
|
const dummy = useMemo(() => new THREE.Object3D(), []);
|
|
const motes = useMemo(() => Array.from({ length: count }, (_, i) => ({
|
|
x: (sr(i * 7 + 1) - 0.5) * 220, y: 3 + sr(i * 13 + 2) * 18, z: (sr(i * 19 + 3) - 0.5) * 220,
|
|
speed: 0.1 + sr(i * 23 + 4) * 0.3, phase: sr(i * 29 + 5) * Math.PI * 2,
|
|
})), []);
|
|
|
|
useFrame((state) => {
|
|
if (!meshRef.current) return;
|
|
motes.forEach((m, i) => {
|
|
dummy.position.set(m.x + Math.sin(state.clock.elapsedTime * m.speed + m.phase) * 3, m.y + Math.sin(state.clock.elapsedTime * m.speed * 0.7 + m.phase) * 2, m.z + Math.cos(state.clock.elapsedTime * m.speed + m.phase) * 3);
|
|
dummy.scale.setScalar(0.3 + Math.sin(state.clock.elapsedTime * 2 + m.phase) * 0.2);
|
|
dummy.updateMatrix(); meshRef.current!.setMatrixAt(i, dummy.matrix);
|
|
});
|
|
meshRef.current.instanceMatrix.needsUpdate = true;
|
|
});
|
|
|
|
return (
|
|
<instancedMesh ref={meshRef} args={[undefined, undefined, count]}>
|
|
<sphereGeometry args={[0.06, 5, 5]} /><meshBasicMaterial color="#50ffa0" transparent opacity={0.35} toneMapped={false} />
|
|
</instancedMesh>
|
|
);
|
|
};
|
|
|
|
// ═══════════════════════════════════════════════════════════════
|
|
// SCENE
|
|
// ═══════════════════════════════════════════════════════════════
|
|
const Scene = () => (
|
|
<>
|
|
<PerspectiveCamera makeDefault position={[0, 80, 130]} fov={50} />
|
|
<OrbitControls enableZoom={false} enablePan={false} autoRotate autoRotateSpeed={0.3} maxPolarAngle={Math.PI / 2.1} minPolarAngle={Math.PI / 6} />
|
|
<ambientLight intensity={0.3} />
|
|
<directionalLight position={[50, 80, 40]} intensity={1.5} color="#aaddff" />
|
|
<pointLight position={[-60, 40, -40]} intensity={2} color="#40ff80" distance={150} />
|
|
<pointLight position={[60, 30, 50]} intensity={1.5} color="#2060ff" distance={130} />
|
|
<Stars radius={250} depth={100} count={18000} factor={5} saturation={0} fade speed={0.3} />
|
|
<fog attach="fog" args={['#020e1e', 50, 180]} />
|
|
|
|
<Terrain />
|
|
|
|
{/* Solar parks */}
|
|
{SOLAR_PARKS.map((sp, i) => <SolarField key={`sp-${i}`} position={sp.pos} rows={sp.rows} cols={sp.cols} />)}
|
|
|
|
{/* Wind farms */}
|
|
{WIND_FARMS.flatMap((farm, fi) =>
|
|
farm.turbines.map((pos, ti) => <WindTurbine key={`wt-${fi}-${ti}`} position={pos} seed={fi * 100 + ti} />)
|
|
)}
|
|
|
|
{/* Substations */}
|
|
{WIND_FARMS.map((f, i) => <Substation key={`ws-${i}`} position={f.sub} size="small" />)}
|
|
{SOLAR_SUBS.map((s, i) => <Substation key={`ss-${i}`} position={s} size="small" />)}
|
|
{HUBS.map((h, i) => <Substation key={`hub-${i}`} position={h} size="large" />)}
|
|
{CITY_DATA.map((cd, i) => <Substation key={`cs-${i}`} position={cd.sub} size="small" />)}
|
|
|
|
{/* Cities */}
|
|
{CITY_DATA.map((cd, i) => <City key={`city-${i}`} position={cd.city} seed={i + 1} />)}
|
|
|
|
{/* All cables with catenary physics */}
|
|
<CableNetwork />
|
|
|
|
{/* Forests — Poisson-disc placed */}
|
|
{FOREST_POSITIONS.map((pos, i) => (
|
|
<Forest key={`f-${i}`} position={pos} seed={i + 1} count={20 + Math.floor(sr(i * 61 + 700) * 25)} />
|
|
))}
|
|
|
|
{/* Energy flow */}
|
|
<EnergyParticles />
|
|
<AmbientMotes />
|
|
|
|
<EffectComposer>
|
|
<Bloom luminanceThreshold={0.2} mipmapBlur intensity={3} luminanceSmoothing={0.8} />
|
|
</EffectComposer>
|
|
</>
|
|
);
|
|
|
|
// ═══════════════════════════════════════════════════════════════
|
|
export default function HeroIllustration() {
|
|
const [mounted, setMounted] = useState(false);
|
|
useEffect(() => { setMounted(true); }, []); // eslint-disable-line react-hooks/set-state-in-effect
|
|
if (!mounted) return null;
|
|
return (
|
|
<div className="absolute inset-0 z-0 bg-gradient-to-b from-[#010810] via-[#05162e] to-[#0a2a50] w-full h-full cursor-grab active:cursor-grabbing">
|
|
<Canvas gl={{ antialias: true, alpha: false, powerPreference: 'high-performance' }}>
|
|
<Scene />
|
|
</Canvas>
|
|
<div className="absolute inset-0 pointer-events-none bg-[radial-gradient(ellipse_at_center,transparent_30%,#002b49_120%)]" />
|
|
</div>
|
|
);
|
|
}
|