Function CoffeeMachine

src/components/Office3D/CoffeeMachine.tsx:13–137

({ position, onClick }: CoffeeMachineProps)

}

export default function CoffeeMachine({ position, onClick }: CoffeeMachineProps) {
  const [hovered, setHovered] = useState(false);
  const steamRef = useRef<Mesh>(null);

  // Animate steam
  useFrame((state) => {
    if (steamRef.current) {
      steamRef.current.position.y = 1.3 + Math.sin(state.clock.elapsedTime * 2) * 0.05;
      steamRef.current.scale.x = 1 + Math.sin(state.clock.elapsedTime * 3) * 0.1;
      steamRef.current.scale.z = 1 + Math.cos(state.clock.elapsedTime * 3) * 0.1;
    }
  });

  return (
    <group position={position}>
      {/* Main body */}
      <Box
        args={[0.5, 0.8, 0.4]}
        position={[0, 0.4, 0]}
        castShadow
        receiveShadow
        onClick={onClick}
        onPointerOver={() => setHovered(true)}
        onPointerOut={() => setHovered(false)}
      >
        <meshStandardMaterial
          color={hovered ? '#dc2626' : '#991b1b'}
          metalness={0.6}
          roughness={0.3}
        />
      </Box>

      {/* Water tank (back) */}
      <Box
        args={[0.35, 0.5, 0.1]}
        position={[0, 0.55, -0.15]}
        castShadow
      >
        <meshStandardMaterial
          color="#93c5fd"
          transparent
          opacity={0.4}
          metalness={0.1}
          roughness={0.1}
        />
      </Box>

      {/* Spout */}
      <Box
        args={[0.08, 0.15, 0.08]}
        position={[0, 0.7, 0.2]}
        castShadow
      >
        <meshStandardMaterial color="#1f2937" metalness={0.8} roughness={0.2} />
      </Box>

      {/* Drip tray */}
      <Box