A robust grid implementation with multiple tweakable parameters.
This component provides sensible defaults. You can initialize the default grid with just
Cells and Sections
Grid is split into cells and sections. Cell is meant to represent the smallest units on your grid, whereas section is a group of cells. You can adjust the size of the grid by changing the
sectionSize parameters. Size is in Three world units, so for example a mesh with
BoxGeometry(1,1,1) will fit perfectly into a size 1 cell. By default a cell is 1 unit and a section 10, which means that a grid of 10x10 cells will be outlined with a section line.
You can adjust the color and thickness of cell and section lines with
Grid size and fading
<Grid/> component is a
THREE.Mesh with a
PlaneGeometry attached to it. The
gridSize parameter defines the size of the
You can extend the grid into infinity if you set the
infiniteGrid parameter to
fadeDistance sets how far from the camera position the grid begins to fade by having its alpha reduced.
fadeStrength determines how fast it happens (exponent).
fadeStrength = 0 means that there is no fading (not recommended for large grids).
followCamera to true applies a transform that moves the grid to the camera's position on the chosen
ref passes a reference from the `<T.Mesh/> the grid is constructed on.
axes: 'xzy' | 'xyz' | 'zyx' = 'xzy' cellColor: ColorRepresentation = '#000000' cellSize: number = 1 cellThickness: number = 1 sectionColor: ColorRepresentation = '#0000ee' sectionSize: number = 10 sectionThickness: number = 2 gridSize: number | [number, number] = [20,20] followCamera: boolean = false infiniteGrid: boolean = false fadeDistance: number = 100 fadeStrength: number = 1