Interactive 3D Globe

"use client";
import { useRef, useEffect } from "react";

export default function Globe3D() {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const rotation = useRef({ x: 0.3, y: 0 });

  useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas?.getContext("2d");
    if (!ctx || !canvas) return;

    let raf: number;
    const draw = () => {
      rotation.current.y += 0.003;
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      const cx = canvas.width / 2, cy = canvas.height / 2, r = 120;
      // Dessiner grille de meridiens et paralleles
      // Projection 3D -> 2D pour chaque point
      // ctx.arc(projX, projY, 2, 0, Math.PI * 2);

      raf = requestAnimationFrame(draw);
    };
    raf = requestAnimationFrame(draw);
    return () => cancelAnimationFrame(raf);
  }, []);

  return <canvas ref={canvasRef} width={400} height={400} />;
}