src/components/three/
├── SunScene.tsx           # Main R3F canvas + scene setup
├── Sun.tsx                # 3D sun with corona shader
├── EnergyParticles.tsx    # Particle system for energy rays
├── CloudLayer.tsx         # Animated cloud coverage
├── Ground.tsx             # Ground plane receiving energy
├── InteractiveCamera.tsx  # Mouse parallax camera controls
└── StatsOverlay.tsx       # Click-to-reveal energy stats

// src/components/three/ComponentName.tsx
import React, { useRef } from "react";
import { useFrame } from "@react-three/fiber";
import * as THREE from "three";

interface ComponentNameProps {
  // Data-driven props
  intensity?: number;
  color?: string;
  // Position/transform props
  position?: [number, number, number];
  scale?: number;
}

export function ComponentName({
  intensity = 1,
  color = "#ffffff",
  position = [0, 0, 0],
  scale = 1,
}: ComponentNameProps) {
  const meshRef = useRef<THREE.Mesh>(null);

  // Animation loop
  useFrame((state, delta) => {
    if (meshRef.current) {
      // Example: rotate based on time
      meshRef.current.rotation.y += delta * 0.5;
    }
  });

  return (
    <mesh ref={meshRef} position={position} scale={scale}>
      <sphereGeometry args={[1, 32, 32]} />
      <meshStandardMaterial color={color} emissive={color} emissiveIntensity={intensity} />
    </mesh>
  );
}

// src/components/three/SunScene.tsx
import React, { Suspense } from "react";
import { Canvas } from "@react-three/fiber";
import { OrbitControls, Environment } from "@react-three/drei";
import { EffectComposer, Bloom } from "@react-three/postprocessing";

interface SunSceneProps {
  ghi: number;        // Solar irradiance W/m²
  cloudCover: number; // 0-100%
  isDay: boolean;
}

export function SunScene({ ghi, cloudCover, isDay }: SunSceneProps) {
  return (
    <Canvas camera={{ position: [0, 0, 10], fov: 50 }}>
      <Suspense fallback={null}>
        <ambientLight intensity={0.2} />
        <pointLight position={[0, 0, 0]} intensity={ghi / 500} />

        {/* 3D Components */}
        <Sun intensity={ghi / 1000} />
        <EnergyParticles density={ghi / 100} />
        <CloudLayer opacity={cloudCover / 100} />
        <Ground />

        {/* Post-processing */}
        <EffectComposer>
          <Bloom luminanceThreshold={0.5} intensity={1.5} />
        </EffectComposer>

        {/* Controls */}
        <OrbitControls enableZoom={false} enablePan={false} />
      </Suspense>
    </Canvas>
  );
}

// Mouse parallax example
import { useThree } from "@react-three/fiber";

function InteractiveCamera() {
  const { camera } = useThree();

  useFrame(({ mouse }) => {
    camera.position.x = THREE.MathUtils.lerp(camera.position.x, mouse.x * 2, 0.05);
    camera.position.y = THREE.MathUtils.lerp(camera.position.y, mouse.y * 2, 0.05);
    camera.lookAt(0, 0, 0);
  });

  return null;
}