videx-3d
    Preparing search index...

    Function Grid

    • Renders an axis aligned grid plane (xz, xy or zy).

      Parameters

      • __namedParameters: GridProps

        Grid props

        • OptionalaxesColor?: string | number | Color

          axes color

        • OptionalaxesLineWidth?: number

          axes line width as a factor of cell size

        • OptionalaxesOffset?: Vec2

          the relative offset of the axes in local coordinates

        • OptionalaxesTickSize?: number

          the axes tick size as a factor of cell size

        • Optionalbackground?: string | Color | number

          background color of the grid plane

        • OptionalbackgroundOpacity?: number

          opacity of the grid plane background color

        • OptionalcellSize?: number

          the size of a grid cell in world units

        • OptionalcellSizeDistanceFactors?: number[][]

          control thresholds and extremes when dynamic cell size is enabled

        • OptionaldynamicCellSize?: boolean

          dynamically change cell size depending on camera distance (if set to true)

        • OptionaldynamicSegments?: boolean

          progressively adds new segments as distance from the center increases when using radial grid

        • OptionalenableProjection?: boolean

          if enabled, project a shade of the objects within range onto the grid plane, using an orthographic camera

        • OptionalgridColorMajor?: string | number | Color

          the color of the major grid lines

        • OptionalgridColorMinor?: string | number | Color

          the color of the minor/sub division grid lines

        • OptionalgridLineWidth?: number

          line width as a factor of the cell size

        • OptionalgridOrigin?: Vec2

          world coordinates of the grid origin (origo)

        • OptionalgridScale?: Vec2

          scale determining axes values and direction along each axis

        • OptionalonRulerUpdate?: ((coords: Vec2 | null) => void) | null

          callback function for retrieving the grid coordinates when grid rulers are enabled

        • Optionalopacity?: number

          opacity of the grid plane (including grid lines)

        • OptionaloriginValue?: Vec2

          the axes values at the specified origin (default 0,0)

        • plane: "xz" | "xy" | "zy"

          which 2D plane to use for the grid (xz, xy or zy)

        • OptionalplaneOffset?: number

          offset along the axis perpendicular to the plane

        • OptionalprojectionColor?: string | number | Color

          the color of the projected shade when projection is enabled

        • OptionalprojectionDistance?: number

          determines the range used for projecting objects onto the plane when enableProjection is set to true

        • OptionalprojectionRefreshRate?: number

          the update frequency of the projected texture when projection is enabled (ms)

        • OptionalprojectionResolution?: number

          the quality/size of the projection texture used when projection is enabled

        • Optionalradial?: boolean

          shows a radial grid if set to true

        • OptionalrulerColor?: string | number | Color

          the color of the rulers

        • OptionalrulerLineWidth?: number

          the ruler line width as a factor of the cell size

        • OptionalrulerOpacity?: number

          the ruler opacity

        • OptionalshowAxes?: boolean

          show/hide axes including labels

        • OptionalshowAxesLabels?: boolean

          show/hide axes labels if showAxes is true

        • OptionalshowRulers?: boolean

          show rulers on the grid plane at the intersection point of the pointer

        • Optionalside?: "front" | "back" | "both"

          side to render

        • size: Vec2

          size of the grid plane in world units

        • OptionalsubDivisions?: number

          number of sub divisions of a grid cell

        • Optionaltexture?: Texture

          allow a texture to be added to the grid plane

        • OptionaltextureMix?: number

          mixing factor for blending texture (if present) with the grid plane (0..1)

        • OptionaltrimAxesLabels?: boolean

          omit the first and last axis label if enabled

      Returns Element

      <Grid plane="xz" size={[1000, 1000]} cellSize={10} />
      

      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.