// plant.jsx — Interactive isometric 3D infographic of a gold processing plant. // Composes equipment groups from plant-equipment.jsx, adds surroundings // (distant hills, tailings dam, access road, perimeter fence), and wraps // everything in an interactive explorer with four discipline toggles. const { useState: useState_pl, useMemo: useMemo_pl } = React; // ── Discipline data ──────────────────────────────────────────────────────── const DISCIPLINES = [ { id: 'electrical', label: 'Electrical & Control', tag: 'MV · LV · I&C', blurb: 'Medium-voltage reticulation, protection coordination, MCCs, drive packages and SCADA integration — for greenfield builds and live brownfield upgrades.', capabilities: [ 'Medium-voltage reticulation (11 / 22 / 33 kV)', 'Protection coordination & arc-flash studies', 'Motor control centres & VSD packages', 'Cable routing, racking & containment', 'Substation & transformer design', 'SCADA, PLC & instrumentation', 'Power-quality & harmonic studies', 'Earthing & lightning protection'] }, { id: 'bulk', label: 'Bulk Material Handling', tag: 'Conveyors · Crushing · Screening', blurb: 'Materials handling from ROM tip through to product stockpile. Conveyor design, transfer chute engineering, crushing & screening circuits and stockpile reclaim.', capabilities: [ 'Conveyor design (CEMA / DIN 22101)', 'Transfer chute engineering (DEM analysis)', 'Crushing — primary, secondary, tertiary', 'Screening & classification', 'Feeders, hoppers & surge bins', 'Stockpile geometry & reclaim systems', 'Stackers & boom conveyors', 'Dust management & enclosure'] }, { id: 'civils', label: 'Civils & Structural', tag: 'Foundations · Steel · Concrete', blurb: 'Earthworks through to the steel and concrete that carries the plant. Heavy industrial structures designed to category-4 standards.', capabilities: [ 'Earthworks, bulk & detail', 'Reinforced-concrete foundations', 'Heavy industrial steel structures', 'Mill, crusher & tank foundations', 'Conveyor gantries & support trestles', 'Buildings, control rooms & substations', 'Stormwater & containment', 'Geotechnical interface design'] }, { id: 'mechanical', label: 'Mechanical', tag: 'Rotating · Static · Process', blurb: 'Rotating and static equipment for mineral processing — mill packages, pump systems, leach & adsorption tanks, thickening and the piping that ties it together.', capabilities: [ 'Mill packages (SAG, ball, regrind)', 'Slurry & process pump systems', 'Leach & CIL/CIP adsorption circuits', 'Thickeners & clarifiers', 'Cyclone clusters & classification', 'Elution & electrowinning circuits', 'Static equipment — tanks, vessels, hoppers', 'Piping, valves, FEA & CFD'] }]; // ── Surroundings ────────────────────────────────────────────────────────── // Distant mountain ranges — drawn in SVG coordinates (not iso-projected). // Two ranges with different shade for depth perception. function SurroundingHills() { return ( {/* Sky atmospheric haze band */} {/* Far range — darker, almost silhouette */} {/* Near range */} {/* Ridgeline accents */} ); } // Distant tailings storage facility — a long embankment dam silhouette // drawn in iso world space at high y, beyond the plant. function SurroundingTSF() { // Embankment wall as a long box at very high y, low z. const x0 = 1800,y0 = 480,w = 1100,d = 80,h = 36; return ( {/* Suggestion of impounded slurry behind the wall (back side) */} {(() => { const a = iso(x0, y0, h),b = iso(x0 + w, y0, h); const c = iso(x0 + w, y0 - 200, h),d2 = iso(x0, y0 - 200, h); return ; })()} {/* Two haul-truck dots on top of dam (for scale) */} {[[x0 + 300, y0 + 30], [x0 + 700, y0 + 30]].map(([x, y], i) => { const a = iso(x, y, h); return ; })} {(() => {const lp = iso(x0 + w / 2, y0 + d + 20, h + 4);return ( TAILINGS STORAGE FACILITY); })()} ); } // Distant mine pit hint — small concentric ellipses on the upper-left, // rendered in screen-space. function SurroundingMinePit() { return ( {/* Switchback haul road */} MINE PIT ); } // Access road — flat strip on ground plane connecting plant to off-screen. function SurroundingRoad() { // World-space strip following y at ground level const a = iso(-200, 220, 0),b = iso(-50, 230, 0),c = iso(-50, 270, 0),d = iso(-200, 260, 0); const a2 = iso(180, 230, 0),b2 = iso(560, 240, 0),c2 = iso(560, 280, 0),d2 = iso(180, 270, 0); return ( {/* Centre dashed line */} {[ [[-180, 245], [-65, 250]], [[195, 250], [545, 260]]]. map(([a, b], i) => { const pa = iso(a[0], a[1], 0),pb = iso(b[0], b[1], 0); return ; })} ); } // Perimeter fence — thin lines around the plant boundary. function SurroundingFence() { // Simple rectangular fence around main plant footprint. // Drawn as low height (8 units) all the way around. const x1 = -240,x2 = 2960,y1 = -100,y2 = 410; const corners = [[x1, y1], [x2, y1], [x2, y2], [x1, y2]]; const lines = []; // Top rail corners.forEach((p, i) => { const np = corners[(i + 1) % 4]; const a = iso(p[0], p[1], 12),b = iso(np[0], np[1], 12); lines.push(); }); // Posts every 80 along each edge for (let xx = x1; xx <= x2; xx += 80) { const a = iso(xx, y1, 0),b = iso(xx, y1, 12); lines.push(); const c = iso(xx, y2, 0),d = iso(xx, y2, 12); lines.push(); } for (let yy = y1; yy <= y2; yy += 80) { const a = iso(x1, yy, 0),b = iso(x1, yy, 12); lines.push(); const c = iso(x2, yy, 0),d = iso(x2, yy, 12); lines.push(); } // Gate opening on the left (where the road comes in) // Just skip a post — visually the road already shows the entry point. return {lines}; } // ── Master plant scene ───────────────────────────────────────────────────── function PlantScene({ active }) { const styleFor = (discs) => { if (!active) return { opacity: 1, filter: 'none' }; const on = discs.split(' ').includes(active); return { opacity: on ? 1 : 0.16, filter: on ? 'url(#plantGlow)' : 'none', transition: 'opacity .55s, filter .55s' }; }; return ( {/* Distant atmosphere & landscape — drawn first, behind everything */} {/* Subtle floor grid */} {Array.from({ length: 25 }).map((_, i) => { const wx = i * 130 - 100; const a = iso(wx, -100, 0),b = iso(wx, 410, 0); return ; })} {Array.from({ length: 6 }).map((_, i) => { const wy = i * 100 - 100; const a = iso(-200, wy, 0),b = iso(2950, wy, 0); return ; })} {/* Access road from outside the plant */} {/* Underground cutaway — drawn FIRST so surface buildings (yard, workshop, admin, etc.) sit on top of it. The cavity's back wall extends across the full plant width in screen space; rendering it first prevents it from masking the back-row buildings. */} {/* Back-row buildings (high y, drawn before front equipment) */} {/* Process chain, left → right (front of plant) */} {/* Mine — headgear, winder house, ore-extraction conveyor (LEFT side of plant). Underground itself is now rendered earlier, before the back-row surface buildings, so the cutaway's back wall doesn't mask the yard. */} {/* Overhead infrastructure — drawn last so it sits on top */} {/* Living-plant motion overlays — drawn last */} ); } // ── Plant Explorer container ─────────────────────────────────────────────── function PlantExplorer({ embedded = false }) { const [active, setActive] = useState_pl(null); const disc = useMemo_pl(() => DISCIPLINES.find((d) => d.id === active) || null, [active]); return (
Enginuity engineering services

See what we engineer across a typical processing plant.

From the ROM tip through grinding, leaching, adsorption, elution and the gold room — select a discipline to highlight what we deliver, including the steel, the slurry circuit, the electrical reticulation and the support infrastructure.

{DISCIPLINES.map((d) => { const on = active === d.id; return ( ); })}
{!active &&
Select a discipline above to highlight what we engineer.
}
{disc &&
{disc.tag}

{disc.label}

{disc.blurb}

What we deliver
    {disc.capabilities.map((c, i) =>
  • {c}
    • )}
}
Active discipline
); } function PlantPage({ onNav }) { return ( <> ); } Object.assign(window, { PlantExplorer, PlantPage, PlantScene, DISCIPLINES });