videx-3d/dist/types/components/Grids/Grid/Grid.d.ts

React 3D component library designed for sub surface visualizations in the browser

import { Color, Texture } from 'three';
import { Vec2 } from '../../../sdk/types/common';
import { CommonComponentProps } from '../../common';
/**
 * Grid props
 * @expand
 */
export type GridProps = CommonComponentProps & {
    plane: 'xz' | 'xy' | 'zy';
    size: Vec2;
    cellSize?: number;
    subDivisions?: number;
    gridOrigin?: Vec2;
    gridScale?: Vec2;
    background?: string | Color | number;
    backgroundOpacity?: number;
    opacity?: number;
    gridColorMajor?: string | number | Color;
    gridColorMinor?: string | number | Color;
    gridLineWidth?: number;
    showAxes?: boolean;
    showAxesLabels?: boolean;
    trimAxesLabels?: boolean;
    axesOffset?: Vec2;
    axesColor?: string | number | Color;
    axesLineWidth?: number;
    axesTickSize?: number;
    originValue?: Vec2;
    radial?: boolean;
    dynamicSegments?: boolean;
    showRulers?: boolean;
    rulerColor?: string | number | Color;
    rulerLineWidth?: number;
    rulerOpacity?: number;
    planeOffset?: number;
    dynamicCellSize?: boolean;
    cellSizeDistanceFactors?: number[][];
    side?: 'front' | 'back' | 'both';
    texture?: Texture;
    textureMix?: number;
    enableProjection?: boolean;
    projectionDistance?: number;
    projectionColor?: string | number | Color;
    projectionResolution?: number;
    projectionRefreshRate?: number;
    onRulerUpdate?: ((coords: Vec2 | null) => void) | null;
};
/**
 * Renders an axis aligned grid plane (xz, xy or zy).
 *
 * @example
 * <Grid plane="xz" size={[1000, 1000]} cellSize={10} />
 *
 * @remarks
 * The Grid component is very flexible and has many different options which allows you
 * to customize both behaviours and appearances. See the storybook linked below for examples.
 *
 * @see [Storybook](/videx-3d/?path=/docs/components-grids-grid--docs)
 *
 * @group Components
 */
export declare const Grid: ({ plane, size, position, gridOrigin, gridScale, cellSize, subDivisions, background, backgroundOpacity, opacity, gridColorMajor, gridColorMinor, gridLineWidth, showAxes, showAxesLabels, trimAxesLabels, axesOffset, axesColor, axesLineWidth, axesTickSize, originValue, radial, dynamicSegments, showRulers, rulerColor, rulerLineWidth, rulerOpacity, planeOffset, dynamicCellSize, cellSizeDistanceFactors, side, onRulerUpdate, texture, textureMix, enableProjection, projectionDistance, projectionColor, projectionResolution, projectionRefreshRate, name, userData, renderOrder, visible, castShadow, receiveShadow, layers, }: GridProps) => import("react/jsx-runtime").JSX.Element;