@react-three/drei

import { OrbitControls, Text, Environment, useAnimations } from '@react-three/drei';

import { OrbitControls, Text, Environment } from '@react-three/drei/native';

import { Canvas } from '@react-three/fiber';
import { OrbitControls, Text, Environment, PerspectiveCamera } from '@react-three/drei';

function Scene() {
  return (
    <Canvas>
      <PerspectiveCamera makeDefault position={[0, 0, 5]} />
      <OrbitControls enableDamping />
      <Text fontSize={1} color="hotpink">
        Hello 3D World
      </Text>
      <Environment preset="sunset" />
    </Canvas>
  );
}

// Perspective camera with FOV-based projection
function PerspectiveCamera(props: PerspectiveCameraProps): JSX.Element;

// Orthographic camera with parallel projection  
function OrthographicCamera(props: OrthographicCameraProps): JSX.Element;

// Cube camera for environment mapping and reflections
function CubeCamera(props: CubeCameraProps): JSX.Element;

interface PerspectiveCameraProps extends Omit<ThreeElements['perspectiveCamera'], 'ref'> {
  /** Makes this camera the default camera, true */
  makeDefault?: boolean;
  /** The camera's field of view, 75 */
  fov?: number;
  /** Camera position */
  position?: [number, number, number];
}

// Orbit camera controls for rotating around a target
function OrbitControls(props: OrbitControlsProps): JSX.Element;

// Transform gizmo for object manipulation
function TransformControls(props: TransformControlsProps): JSX.Element;

// Advanced camera controls with smooth transitions
function CameraControls(props: CameraControlsProps): JSX.Element;

interface OrbitControlsProps extends Omit<ThreeElement<OrbitControlsImpl>, 'ref' | 'args'> {
  /** Makes this the default controls, false */
  makeDefault?: boolean;
  /** The camera to control */
  camera?: Camera;
  /** Enable damping, false */
  enableDamping?: boolean;
  /** Change event handler */
  onChange?: (e?: OrbitControlsChangeEvent) => void;
}

// 2D text rendering with font support
function Text(props: TextProps): JSX.Element;

// 3D extruded text
function Text3D(props: Text3DProps): JSX.Element;

// Image display with transparency support
function Image(props: ImageProps): JSX.Element;

// 3D positional audio
function PositionalAudio(props: PositionalAudioProps): JSX.Element;

interface TextProps extends Omit<ThreeElements['mesh'], 'ref'> {
  /** Text content */
  children: React.ReactNode;
  /** Font size, 1 */
  fontSize?: number;
  /** Text color */
  color?: ReactThreeFiber.Color;
  /** Font URL or font object */
  font?: string | FontData;
  /** Text alignment, 'left' */
  textAlign?: 'left' | 'right' | 'center' | 'justify';
}

// Mirror reflection material with blur and resolution control
function MeshReflectorMaterial(props: MeshReflectorMaterialProps): JSX.Element;

// Glass transmission material with thickness and roughness
function MeshTransmissionMaterial(props: MeshTransmissionMaterialProps): JSX.Element;

// Vertex distortion material with noise-based deformation
function MeshDistortMaterial(props: MeshDistortMaterialProps): JSX.Element;

interface MeshReflectorMaterialProps extends MaterialProps {
  /** Reflection resolution, 256 */
  resolution?: number;
  /** Blur amount [horizontal, vertical], [0, 0] */
  blur?: [number, number] | number;
  /** Mix with original material, 0 */
  mixBlur?: number;
  /** Mirror reflectivity, 0 */
  mirror?: number;
}

// Environment mapping and HDRI support
function Environment(props: EnvironmentProps): JSX.Element;

// Contact shadows for grounded objects
function ContactShadows(props: ContactShadowsProps): JSX.Element;

// Studio-style lighting setup
function Stage(props: StageProps): JSX.Element;

// Sky dome rendering
function Sky(props: SkyProps): JSX.Element;

interface EnvironmentProps {
  /** Environment preset name */
  preset?: PresetsType;
  /** Custom environment map files */
  files?: string | string[];
  /** Environment map path */
  path?: string;
  /** Skybox rendering, false */
  background?: boolean;
  /** Ground projection, false */
  ground?: boolean;
}

// Instanced mesh rendering for identical objects
function Instances(props: InstancesProps): JSX.Element;

// Point cloud rendering with efficient GPU processing
function Points(props: PointsProps): JSX.Element;

// Level-of-detail rendering based on distance
function Detailed(props: DetailedProps): JSX.Element;

// Performance monitoring with automatic degradation
function PerformanceMonitor(props: PerformanceMonitorProps): JSX.Element;

interface InstancesProps extends Omit<ThreeElements['instancedMesh'], 'ref' | 'args'> {
  /** Maximum number of instances */
  limit?: number;
  /** Instance range [start, count] */
  range?: [number, number];
  /** Frustum culling, true */
  frustumCulled?: boolean;
}

// Interactive pivot controls for object transformation
function PivotControls(props: PivotControlsProps): JSX.Element;

// Drag controls for object manipulation
function DragControls(props: DragControlsProps): JSX.Element;

// 3D grid helper
function Grid(props: GridProps): JSX.Element;

// 3D viewcube gizmo
function GizmoViewcube(props: GizmoViewcubeProps): JSX.Element;

interface PivotControlsProps {
  /** Enable/disable controls, true */
  enabled?: boolean;
  /** Gizmo scale, 1 */
  scale?: number;
  /** Line width, 2.5 */
  lineWidth?: number;
  /** Fixed screen size, false */
  fixed?: boolean;
  /** Position offset */
  offset?: [number, number, number];
}

// HTML overlay integration with 3D positioning
function Html(props: HtmlProps): JSX.Element;

// Scroll-based camera controls
function ScrollControls(props: ScrollControlsProps): JSX.Element;

// Loading UI component
function Loader(props: LoaderProps): JSX.Element;

// Cursor style hook
function useCursor(hovered: boolean, cursor?: string): void;

interface HtmlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'ref'> {
  /** Transform with object, false */
  transform?: boolean;
  /** Render as sprite, false */
  sprite?: boolean;
  /** Occlusion objects */
  occlude?: React.RefObject<Object3D>[] | boolean;
  /** Center content, false */
  center?: boolean;
}

// Font loading hook
function useFont(path: string): FontData;

// GLTF model loading hook
function useGLTF(path: string): GLTF & ObjectMap;

// Texture loading with format support
function useTexture(input: string | string[]): Texture | Texture[];

// Environment texture loading
function useEnvironment(props: EnvironmentLoaderProps): Texture;

interface FontData {
  data: any;
  glyphs: { [key: string]: Glyph };
}

interface Glyph {
  x: number;
  y: number;
  width: number;
  height: number;
}

// Animation control hook
function useAnimations<T extends AnimationClip>(
  clips: T[],
  root?: React.RefObject<Object3D>
): Api<T>;

// Aspect ratio calculation hook
function useAspect(width: number, height: number, factor?: number): [number, number, number];

// Camera hook for accessing current camera
function useCamera(): Camera;

// Intersection detection hook  
function useIntersect<T extends Object3D>(
  onChange: (visible: boolean) => void
): React.RefObject<T>;

interface Api<T extends AnimationClip> {
  ref: React.RefObject<Object3D>;
  clips: AnimationClip[];
  mixer: AnimationMixer;
  names: T['name'][];
  actions: { [key in T['name']]: AnimationAction | null };
}

// Utility type for component props with forwardRef
type ForwardRefComponent<P, T> = ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;

// Type overwriting utility
type Overwrite<T, O> = Omit<T, NonFunctionKeys<O>> & O;

// Environment preset names
type PresetsType = 'apartment' | 'city' | 'dawn' | 'forest' | 'lobby' | 'night' | 'park' | 'studio' | 'sunset' | 'warehouse';

// Gradient texture types
enum GradientType {
  Linear = 'linear',
  Radial = 'radial'
}

// Material base properties
interface MaterialProps extends Omit<ThreeElements['material'], 'ref'> {
  opacity?: number;
  transparent?: boolean;
  color?: ReactThreeFiber.Color;
}