Grid props
OptionalaxesColor?: string | number | Coloraxes color
OptionalaxesLineWidth?: numberaxes line width as a factor of cell size
OptionalaxesOffset?: Vec2the relative offset of the axes in local coordinates
OptionalaxesTickSize?: numberthe axes tick size as a factor of cell size
Optionalbackground?: string | Color | numberbackground color of the grid plane
OptionalbackgroundOpacity?: numberopacity of the grid plane background color
OptionalcellSize?: numberthe size of a grid cell in world units
OptionalcellSizeDistanceFactors?: number[][]control thresholds and extremes when dynamic cell size is enabled
OptionaldynamicCellSize?: booleandynamically change cell size depending on camera distance (if set to true)
OptionaldynamicSegments?: booleanprogressively adds new segments as distance from the center increases when using radial grid
OptionalenableProjection?: booleanif enabled, project a shade of the objects within range onto the grid plane, using an orthographic camera
OptionalgridColorMajor?: string | number | Colorthe color of the major grid lines
OptionalgridColorMinor?: string | number | Colorthe color of the minor/sub division grid lines
OptionalgridLineWidth?: numberline width as a factor of the cell size
OptionalgridOrigin?: Vec2world coordinates of the grid origin (origo)
OptionalgridScale?: Vec2scale determining axes values and direction along each axis
OptionalonRulerUpdate?: (coords: Vec2 | null) => void | nullcallback function for retrieving the grid coordinates when grid rulers are enabled
Optionalopacity?: numberopacity of the grid plane (including grid lines)
OptionaloriginValue?: Vec2the axes values at the specified origin (default 0,0)
which 2D plane to use for the grid (xz, xy or zy)
OptionalplaneOffset?: numberoffset along the axis perpendicular to the plane
OptionalprojectionColor?: string | number | Colorthe color of the projected shade when projection is enabled
OptionalprojectionDistance?: numberdetermines the range used for projecting objects onto the plane when enableProjection is set to true
OptionalprojectionRefreshRate?: numberthe update frequency of the projected texture when projection is enabled (ms)
OptionalprojectionResolution?: numberthe quality/size of the projection texture used when projection is enabled
Optionalradial?: booleanshows a radial grid if set to true
OptionalrulerColor?: string | number | Colorthe color of the rulers
OptionalrulerLineWidth?: numberthe ruler line width as a factor of the cell size
OptionalrulerOpacity?: numberthe ruler opacity
OptionalshowAxes?: booleanshow/hide axes including labels
OptionalshowAxesLabels?: booleanshow/hide axes labels if showAxes is true
OptionalshowRulers?: booleanshow rulers on the grid plane at the intersection point of the pointer
Optionalside?: "front" | "back" | "both"side to render
size of the grid plane in world units
OptionalsubDivisions?: numbernumber of sub divisions of a grid cell
Optionaltexture?: Textureallow a texture to be added to the grid plane
OptionaltextureMix?: numbermixing factor for blending texture (if present) with the grid plane (0..1)
OptionaltrimAxesLabels?: booleanomit the first and last axis label if enabled
Renders an axis aligned grid plane (xz, xy or zy).
Example
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