import { ContactShadowsProps, CubicBezierLineProps, StageProps, StarsProps, TrailProps, RoundedBoxProps, BackdropProps, BBAnchorProps, CenterProps } from '@react-three/drei'; import { PropsWithChildren } from 'react'; import { TransformProps } from '../three_transforms/interfaces'; export { Splat } from './Splats'; export { SimplePerspectiveCamera } from './SimplePerspectiveCamera'; export { SimpleOrthographicCamera } from './SimpleOrthographicCamera'; export { AccumulativeShadows, AdaptiveDpr, AdaptiveEvents, AsciiRenderer, BakeShadows, Billboard, Bounds, Bvh as BvhHelper, CameraShake, CatmullRomLine, Caustics, Clone, Cloud, ComputedAttribute, CurveModifier, CycleRaycast, Decal, Detailed, Effects, Environment, FaceLandmarker, Facemesh, Fisheye, Float, GradientTexture, Html, Hud, Instances, Lightformer, MarchingCubes, Mask, Merged, MeshDiscardMaterial, MeshDistortMaterial, MeshPortalMaterial, MeshReflectorMaterial, MeshRefractionMaterial, MeshTransmissionMaterial, MeshWobbleMaterial, Outlines, PerformanceMonitor, PointMaterial, Points, PositionalAudio, Preload, QuadraticBezierLine, RandomizedLight, RenderCubeTexture, RenderTexture, Resize, Sampler, ScreenQuad, ScreenSpace, Segments, Select, Shadow, Sky, SoftShadows, Sparkles, SpotLightShadow, SpriteAnimator, Svg, Text, Text3D, View, } from '@react-three/drei'; interface ContactShadowsPropsWithDial extends Omit, Omit { /** * Shadow opacity * @dial-dtype number * @dial-default 1 * @dial-min 0 * @dial-max 1 * @dial-step 0.01 */ opacity?: number; /** * Shadow blur amount * @dial-dtype number * @dial-default 1 * @dial-min 0 * @dial-max 10 * @dial-step 0.1 */ blur?: number; /** * Number of frames to render (Infinity for dynamic) * @dial-dtype int * @dial-default 1 * @dial-min 1 * @dial-max 120 */ frames?: number; /** * Shadow map resolution * @dial-dtype int * @dial-default 512 * @dial-options [128, 256, 512, 1024, 2048] */ resolution?: number; /** * Shadow scale (uniform or [width, height]) * @dial transform * @dial-dtype number * @dial-default 10 * @dial-min 0.1 * @dial-max 100 * @dial-step 0.1 */ scale?: number | [number, number]; /** * Shadow width (alternative to scale) * @dial-dtype number * @dial-default 1 * @dial-min 0.1 * @dial-max 100 * @dial-step 0.1 */ width?: number; /** * Shadow height (alternative to scale) * @dial-dtype number * @dial-default 1 * @dial-min 0.1 * @dial-max 100 * @dial-step 0.1 */ height?: number; /** * Far plane for shadow camera * @dial-dtype number * @dial-default 10 * @dial-min 0.1 * @dial-max 100 * @dial-step 0.1 */ far?: number; /** * Near plane for shadow camera * @dial-dtype number * @dial-default 0 * @dial-min 0 * @dial-max 10 * @dial-step 0.01 */ near?: number; /** * Shadow color * @dial-dtype color * @dial-default "#000000" */ color?: string; /** * Enable smooth shadows * @dial-dtype boolean * @dial-default true */ smooth?: boolean; /** * Depth write for shadow plane * @dial-dtype boolean * @dial-default false */ depthWrite?: boolean; } /** * Contact shadows for grounding objects on a surface. * * Renders soft, blurred shadows beneath objects to create a sense of contact * with the ground plane. Supports customizable opacity, blur, color, and * resolution for realistic shadow effects without raytracing. * * @dial contact_shadows */ export declare const ContactShadows: (props: ContactShadowsPropsWithDial) => import("react/jsx-runtime").JSX.Element; interface CubicBezierLinePropsWithDial extends Omit, TransformProps { /** * Start point of the curve * @dial-dtype vector3 * @dial-default [0, 0, 0] */ start: [number, number, number]; /** * End point of the curve * @dial-dtype vector3 * @dial-default [1, 0, 0] */ end: [number, number, number]; /** * First control point * @dial-dtype vector3 * @dial-default [0.25, 0.5, 0] */ midA: [number, number, number]; /** * Second control point * @dial-dtype vector3 * @dial-default [0.75, 0.5, 0] */ midB: [number, number, number]; /** * Line color * @dial-dtype color * @dial-default "#ffffff" */ color?: string; /** * Width of the line * @dial-dtype number * @dial-default 1 * @dial-min 0.1 * @dial-max 10 * @dial-step 0.1 */ lineWidth?: number; } /** * Cubic bezier curve rendered as a 3D line. * * Draws a smooth curve between start and end points using two control points * (midA, midB) to define the curve shape. Useful for visualizing paths, * connections, or decorative curves in 3D space. * * @dial cubic_bezier_line */ export declare const CubicBezierLine: (props: CubicBezierLinePropsWithDial) => import("react/jsx-runtime").JSX.Element; interface LinePropsWithDial { /** * Array of points defining the line * @dial-dtype array */ points: Array<[number, number, number]>; /** * Line color * @dial-dtype color * @dial-default "#ffffff" */ color?: string; /** * Width of the line * @dial-dtype number * @dial-default 1 * @dial-min 0.1 * @dial-max 10 * @dial-step 0.1 */ lineWidth?: number; /** * Whether the line should be dashed * @dial-dtype boolean * @dial-default false */ dashed?: boolean; /** * Custom raycast function * @dial-ignore */ raycast?: any; [key: string]: any; } /** * Line component with VR-aware rendering. * * Renders a line through an array of 3D points. Automatically adjusts line * width and disables raycasting in VR/AR mode to prevent camera errors. * Supports color, dashing, and custom line widths. * * @dial line */ export declare const Line: ({ lineWidth, raycast, ...rest }: LinePropsWithDial) => import("react/jsx-runtime").JSX.Element; interface StagePropsWithDial extends Omit, TransformProps { /** * Stage preset for lighting configuration * @dial-dtype select * @dial-options ["rembrandt", "portrait", "upfront", "soft"] * @dial-default "rembrandt" */ preset?: 'rembrandt' | 'portrait' | 'upfront' | 'soft'; /** * Lighting intensity * @dial-dtype number * @dial-default 0.5 * @dial-min 0 * @dial-max 2 * @dial-step 0.1 */ intensity?: number; /** * Enable shadows * @dial-dtype boolean * @dial-default true */ shadows?: boolean | 'contact' | 'accumulative'; /** * Adjust camera to fit content * @dial-dtype boolean * @dial-default true */ adjustCamera?: boolean; /** * Environment map preset * @dial-dtype select * @dial-options ["apartment", "city", "dawn", "forest", "lobby", "night", "park", "studio", "sunset", "warehouse"] * @dial-default "city" */ environment?: 'apartment' | 'city' | 'dawn' | 'forest' | 'lobby' | 'night' | 'park' | 'studio' | 'sunset' | 'warehouse' | null; } /** * Stage component for quick scene setup with professional lighting. * * Provides pre-configured lighting rigs (rembrandt, portrait, upfront, soft), * environment maps, shadows, and automatic camera framing. Ideal for product * visualization, model previews, and any scene requiring polished lighting * without manual light placement. * * @dial stage */ export declare const Stage: (props: PropsWithChildren) => import("react/jsx-runtime").JSX.Element; interface StarsPropsWithDial extends Omit, TransformProps { /** * Radius of the starfield sphere * @dial-dtype number * @dial-default 100 * @dial-min 1 * @dial-max 500 * @dial-step 1 */ radius?: number; /** * Number of stars * @dial-dtype int * @dial-default 5000 * @dial-min 100 * @dial-max 50000 * @dial-step 100 */ count?: number; /** * Star size factor * @dial-dtype number * @dial-default 1 * @dial-min 0.1 * @dial-max 10 * @dial-step 0.1 */ factor?: number; /** * Animation saturation (0 = no movement) * @dial-dtype number * @dial-default 0 * @dial-min 0 * @dial-max 1 * @dial-step 0.01 */ saturation?: number; /** * Enable fading at edges * @dial-dtype boolean * @dial-default true */ fade?: boolean; /** * Animation speed * @dial-dtype number * @dial-default 1 * @dial-min 0 * @dial-max 10 * @dial-step 0.1 */ speed?: number; } /** * Procedural starfield background. * * Generates a sphere of randomly positioned stars around the scene. Supports * configurable star count, size, fade effects, and optional animation for * twinkling. Perfect for space scenes or night sky backgrounds. * * @dial stars */ export declare const Stars: (props: StarsPropsWithDial) => import("react/jsx-runtime").JSX.Element; interface TrailPropsWithDial extends Omit, TransformProps { /** * Trail width * @dial-dtype number * @dial-default 0.2 * @dial-min 0.01 * @dial-max 2 * @dial-step 0.01 */ width?: number; /** * Trail length (number of segments) * @dial-dtype int * @dial-default 100 * @dial-min 10 * @dial-max 500 * @dial-step 10 */ length?: number; /** * Trail color * @dial-dtype color * @dial-default "#ffffff" */ color?: string | number; /** * Trail attenuation function * @dial-dtype select * @dial-options ["linear", "squared", "cubed"] * @dial-default "linear" */ attenuation?: (width: number) => number; /** * Decay speed (0-1) * @dial-dtype number * @dial-default 1 * @dial-min 0 * @dial-max 1 * @dial-step 0.01 */ decay?: number; } /** * Motion trail effect for moving objects. * * Renders a ribbon-like trail behind child objects as they move. Configurable * width, length, color, and decay rate. Ideal for visualizing motion paths, * particle effects, or adding dynamic visual feedback to animations. * * @dial trail */ export declare const Trail: (props: PropsWithChildren) => import("react/jsx-runtime").JSX.Element; interface RoundedBoxPropsWithDial extends Omit, TransformProps { /** * Box width * @dial geometry * @dial-group-grid-cols 3 * @dial-dtype number * @dial-default 1 * @dial-min 0.01 * @dial-max 100 * @dial-step 0.01 */ width?: number; /** * Box height * @dial geometry * @dial-dtype number * @dial-default 1 * @dial-min 0.01 * @dial-max 100 * @dial-step 0.01 */ height?: number; /** * Box depth * @dial geometry * @dial-dtype number * @dial-default 1 * @dial-min 0.01 * @dial-max 100 * @dial-step 0.01 */ depth?: number; /** * Corner radius * @dial geometry * @dial-dtype number * @dial-default 0.05 * @dial-min 0 * @dial-max 0.5 * @dial-step 0.01 */ radius?: number; /** * Smoothness of corners (segments) * @dial geometry * @dial-dtype int * @dial-default 4 * @dial-min 1 * @dial-max 16 */ smoothness?: number; /** * Bevel segments for rounded edges * @dial geometry * @dial-dtype int * @dial-default 4 * @dial-min 1 * @dial-max 16 */ bevelSegments?: number; /** * Apply flat shading * @dial geometry * @dial-dtype boolean * @dial-default false */ creaseAngle?: number; /** * Material color * @dial Material * @dial-dtype color * @dial-default #ffffff */ materialColor?: string; } /** * Box geometry with rounded corners and edges. * * Creates a box mesh with customizable dimensions and corner radius. Supports * smoothness control for corner quality. Useful for UI elements, buttons, * containers, or any design requiring softer geometric forms. * * @dial rounded_box */ export declare const RoundedBox: ({ width, height, depth, materialColor, children, ...rest }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element; interface BackdropPropsWithDial extends Omit, TransformProps { /** * Backdrop floor size * @dial-dtype vector2 * @dial-default [4, 3] */ floor?: number; /** * Number of segments for the curve * @dial-dtype int * @dial-default 20 * @dial-min 1 * @dial-max 100 */ segments?: number; /** * Enable shadow receiving * @dial-dtype boolean * @dial-default true */ receiveShadow?: boolean; } /** * Curved backdrop for product photography and studio setups. * * Creates a seamless curved surface that transitions from floor to background, * commonly used in product visualization. Supports shadow receiving and * customizable curvature. Pairs well with Stage for complete studio lighting. * * @dial backdrop */ export declare const Backdrop: ({ children, receiveShadow, ...rest }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element; interface BBAnchorPropsWithDial extends Omit, TransformProps { /** * Anchor offset multipliers for positioning relative to bounding box. * Each value (-1 to 1) positions children along that axis: * -1 = negative edge, 0 = center, 1 = positive edge * @dial-dtype vector3 * @dial-default [0, 0, 0] */ anchor: [number, number, number]; } /** * Bounding box anchor for positioning children relative to parent bounds. * * Uses axis-aligned bounding box (AABB) to offset children by anchor multipliers * (-1 to 1) on each axis. Useful for pinning HTML labels, UI elements, or * annotations to corners or edges of 3D objects without manual positioning. * * @dial bb_anchor */ export declare const BBAnchor: (props: PropsWithChildren) => import("react/jsx-runtime").JSX.Element; interface CenterPropsWithDial extends Omit, TransformProps { /** * Center on X axis * @dial-dtype boolean * @dial-default true */ left?: boolean; /** * Center on X axis (alias for left) * @dial-dtype boolean * @dial-default true */ right?: boolean; /** * Center on Y axis (top) * @dial-dtype boolean * @dial-default true */ top?: boolean; /** * Center on Y axis (bottom) * @dial-dtype boolean * @dial-default true */ bottom?: boolean; /** * Center on Z axis (front) * @dial-dtype boolean * @dial-default true */ front?: boolean; /** * Center on Z axis (back) * @dial-dtype boolean * @dial-default true */ back?: boolean; /** * Disable all centering * @dial-dtype boolean * @dial-default false */ disable?: boolean; /** * Disable X axis centering * @dial-dtype boolean * @dial-default false */ disableX?: boolean; /** * Disable Y axis centering * @dial-dtype boolean * @dial-default false */ disableY?: boolean; /** * Disable Z axis centering * @dial-dtype boolean * @dial-default false */ disableZ?: boolean; /** * Precise centering using geometry bounds * @dial-dtype boolean * @dial-default true */ precise?: boolean; } /** * Center children within their combined bounding box. * * Automatically calculates the bounding box of all children and centers them * at the origin. Supports selective axis centering (disable X/Y/Z) and precise * mode for geometry-based bounds. Essential for positioning imported models * or groups of objects at a known origin point. * * @dial center */ export declare const Center: (props: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;