CAD_kevin/frontend/src/components/Viewer3D.jsx

/// <reference types="@react-three/fiber" />
import React, { useRef, useMemo } from 'react';
import { Canvas } from '@react-three/fiber';
import { OrbitControls, Grid, GizmoHelper, GizmoViewport } from '@react-three/drei';
import { Box, Typography, Paper } from '@mui/material';
import * as THREE from 'three';

interface Viewer3DProps {
  geometryId: string | null;
}

const Viewer3D: React.FC<Viewer3DProps> = ({ geometryId }) => {
  return (
    <Box sx={{ flexGrow: 1, position: 'relative', bgcolor: '#f5f5f5' }}>
      <Canvas
        camera={{ position: [3, 3, 3], fov: 50 }}
        style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}
      >
        <ambientLight intensity={0.5} />
        <pointLight position={[10, 10, 10]} intensity={1} />
        <pointLight position={[-10, -10, -10]} intensity={0.5} />
        
        {geometryId === null && (
          <mesh position={[0, 0, 0]}>
            <boxGeometry args={[1, 1, 1]} />
            <meshStandardMaterial color="#1976d2" side={THREE.DoubleSide} />
          </mesh>
        )}
        
        {geometryId?.startsWith('box') && (
          <mesh position={[0, 0.5, 0]}>
            <boxGeometry args={[1, 1, 1]} />
            <meshStandardMaterial color="#1976d2" side={THREE.DoubleSide} />
          </mesh>
        )}
        
        {geometryId?.startsWith('cylinder') && (
          <mesh position={[0, 1, 0]}>
            <cylinderGeometry args={[0.5, 0.5, 2, 32]} />
            <meshStandardMaterial color="#1976d2" side={THREE.DoubleSide} />
          </mesh>
        )}
        
        {geometryId?.startsWith('sphere') && (
          <mesh position={[0, 0.5, 0]}>
            <sphereGeometry args={[0.5, 32, 32]} />
            <meshStandardMaterial color="#1976d2" side={THREE.DoubleSide} />
          </mesh>
        )}
        
        <Grid
          args={[10, 10]}
          cellSize={0.5}
          cellThickness={0.5}
          cellColor="#cccccc"
          sectionSize={1}
          sectionThickness={1}
          sectionColor="#999999"
          fadeDistance={30}
          fadeStrength={1}
          followCamera={false}
          infiniteGrid
        />
        
        <OrbitControls makeDefault />
        <GizmoHelper>
          <GizmoViewport labelColor="white" axisHeadScale={1} />
        </GizmoHelper>
      </Canvas>
      
      <Paper
        elevation={0}
        sx={{
          position: 'absolute',
          top: 10,
          left: 10,
          padding: 1,
          bgcolor: 'rgba(255,255,255,0.9)',
        }}
      >
        <Typography variant="caption" color="textSecondary">
          Clic droit + glisser : Rotation | Molette : Zoom | Shift + Clic : Pan
        </Typography>
      </Paper>
    </Box>
  );
};

export default Viewer3D;