frontend/DecisionPath3DSimple.tsx

/**
 * Simplified Decision Path 3D Test
 * Testing basic Three.js rendering
 */

"use client";

import { useRef, useState, useEffect } from "react";
import { Canvas } from "@react-three/fiber";
import { OrbitControls, Box, Text } from "@react-three/drei";
import * as THREE from "three";

function SimpleScene() {
  const meshRef = useRef<THREE.Mesh>(null);
  
  return (
    <>
      <ambientLight intensity={0.5} />
      <pointLight position={[10, 10, 10]} />
      
      <Box ref={meshRef} position={[0, 0, 0]} args={[2, 2, 2]}>
        <meshStandardMaterial color="orange" />
      </Box>
      
      <Text position={[0, 3, 0]} fontSize={0.5} color="white">
        Test 3D Rendering
      </Text>
      
      <gridHelper args={[10, 10]} />
    </>
  );
}

export default function DecisionPath3DSimple() {
  const [mounted, setMounted] = useState(false);
  
  useEffect(() => {
    setMounted(true);
  }, []);
  
  if (!mounted) {
    return (
      <div className="h-[400px] bg-black rounded-lg flex items-center justify-center">
        <div className="text-gray-400">Loading...</div>
      </div>
    );
  }
  
  return (
    <div className="h-[400px] bg-black rounded-lg">
      <Canvas camera={{ position: [5, 5, 5], fov: 50 }}>
        <SimpleScene />
        <OrbitControls />
      </Canvas>
    </div>
  );
}