Grid props
Optional
axesColor?: string | number | Coloraxes color
Optional
axesLineWidth?: numberaxes line width as a factor of cell size
Optional
axesOffset?: Vec2the relative offset of the axes in local coordinates
Optional
axesTickSize?: numberthe axes tick size as a factor of cell size
Optional
background?: string | Color | numberbackground color of the grid plane
Optional
backgroundOpacity?: numberopacity of the grid plane background color
Optional
cellSize?: numberthe size of a grid cell in world units
Optional
cellSizeDistanceFactors?: number[][]control thresholds and extremes when dynamic cell size is enabled
Optional
dynamicCellSize?: booleandynamically change cell size depending on camera distance (if set to true)
Optional
dynamicSegments?: booleanprogressively adds new segments as distance from the center increases when using radial grid
Optional
enableProjection?: booleanif enabled, project a shade of the objects within range onto the grid plane, using an orthographic camera
Optional
gridColorMajor?: string | number | Colorthe color of the major grid lines
Optional
gridColorMinor?: string | number | Colorthe color of the minor/sub division grid lines
Optional
gridLineWidth?: numberline width as a factor of the cell size
Optional
gridOrigin?: Vec2world coordinates of the grid origin (origo)
Optional
gridScale?: Vec2scale determining axes values and direction along each axis
Optional
onRulerUpdate?: (coords: Vec2 | null) => void | nullcallback function for retrieving the grid coordinates when grid rulers are enabled
Optional
opacity?: numberopacity of the grid plane (including grid lines)
Optional
originValue?: Vec2the axes values at the specified origin (default 0,0)
which 2D plane to use for the grid (xz, xy or zy)
Optional
planeOffset?: numberoffset along the axis perpendicular to the plane
Optional
projectionColor?: string | number | Colorthe color of the projected shade when projection is enabled
Optional
projectionDistance?: numberdetermines the range used for projecting objects onto the plane when enableProjection is set to true
Optional
projectionRefreshRate?: numberthe update frequency of the projected texture when projection is enabled (ms)
Optional
projectionResolution?: numberthe quality/size of the projection texture used when projection is enabled
Optional
radial?: booleanshows a radial grid if set to true
Optional
rulerColor?: string | number | Colorthe color of the rulers
Optional
rulerLineWidth?: numberthe ruler line width as a factor of the cell size
Optional
rulerOpacity?: numberthe ruler opacity
Optional
showAxes?: booleanshow/hide axes including labels
Optional
showAxesLabels?: booleanshow/hide axes labels if showAxes is true
Optional
showRulers?: booleanshow rulers on the grid plane at the intersection point of the pointer
Optional
side?: "front" | "back" | "both"side to render
size of the grid plane in world units
Optional
subDivisions?: numbernumber of sub divisions of a grid cell
Optional
texture?: Textureallow a texture to be added to the grid plane
Optional
textureMix?: numbermixing factor for blending texture (if present) with the grid plane (0..1)
Optional
trimAxesLabels?: 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