@vctrl/viewer/vectreal-viewer.d.ts

vctrl/viewer is a React component library for rendering and interacting with 3D models. It's part of the vectreal ecosystem and is designed to work seamlessly with the vctrl/hooks package for model loading and management.

import { PropsWithChildren } from 'react';
import { Object3D } from 'three';
import { CameraProps, ControlsProps, EnvProps, GridProps } from './components/scene';
import { InfoPopoverProps } from './components';
interface VectrealViewerProps extends PropsWithChildren {
    /**
     * The 3D model to render in the viewer. (three.js `Object3D`)
     */
    model?: Object3D;
    /**
     * An optional className to apply to the outermost container of the viewer.
     */
    className?: string;
    /**
     * Options for the camera.
     */
    cameraOptions?: CameraProps;
    /**
     * Options for the OrbitControls.
     */
    controlsOptions?: ControlsProps;
    /**
     * Options for the react-three environment and stage components.
     */
    envOptions?: EnvProps;
    /**
     * Options for the grid.
     *
     * @see {@link https://drei.docs.pmnd.rs/gizmos/grid}
     */
    gridOptions?: GridProps;
    /**
     * Options for the info popover.
     */
    infoPopoverOptions?: InfoPopoverProps;
    /**
     * JSX element to render while the model is loading.
     */
    loader?: JSX.Element;
}
/**
 * A React component for rendering 3D models.
 *
 * This component is designed to be easily extensible and customizable. It uses the
 * `@react-three/drei` library to render the 3D scene.
 *
 * The component also accepts the following props:
 *
 * - `children`: Any React children to render inside the canvas.
 * - `model`: A 3D model to render as three `Object3D`.
 * - `className`: An optional className to apply to the outermost container element.
 * - `cameraOptions`: An optional object containing options for the camera.
 * - `controlsOptions`: An optional object containing options for the OrbitControls.
 * - `envOptions`: An optional object containing options for the environment.
 * - `gridOptions`: An optional object containing options for the grid.
 * - `infoPopoverOptions`: An optional object containing options for the info popover.
 * - `loader`: An optional JSX element to render while the model is loading.
 *
 * The component will render any provided children inside the canvas.
 *
 * See [The official website]({@link https://core.vectreal.com}) or the [vctrl/viewer README]({@link https://github.com/vectreal/vectreal-core/blob/main/packages/viewer/README.md}) for more information.
 *
 * @example
 * import { VectrealViewer } from '@vctrl/viewer';
 *
 * const MyComponent = () => {
 *   return (
 *     <VectrealViewer
 *       model={model}
 *       controlsOptions={{ maxPolarAngle: Math.PI / 2 }}
 *       envOptions={{ stage: { preset: 'sunset' } }}
 *     />
 *   );
 * };
 */
declare const VectrealViewer: ({ model, ...props }: VectrealViewerProps) => import("react/jsx-runtime").JSX.Element;
export default VectrealViewer;