order | category | name | sourcePath | type | componentSignature | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
7.17 |
@threlte/extras |
<Grid> |
packages/extras/src/lib/components/Grid/Grid.svelte |
component |
|
A robust grid implementation with multiple tweakable parameters.
This component provides sensible defaults. You can initialize the default grid with just <Grid>
. ref
passes a reference from the <T.Mesh/>
the grid is constructed on.
The grid type can be selected by setting the type
parameter. The available grid types are:
grid
: represents a standard box grid. It does not require any additional properties. (default)lines
: grid consisting of lines that align along a single world axis. You specify this axis by providing eitherx
,y
orz
to theaxis
property.circular
: grid formed of concentric circles. It includes amaxRadius
property that sets the maximum growth extent for the grid. A value of0
removes this limit, allowing the grid to occupy the entire geometry, even if it results in incomplete circles.polar
: similar to the circular type, but it also features lines that subdivide the concentric circles. It too has amaxRadius
property. Additionally, it has two properties for specifying dividers:cellDivider
andsectionDivider
. These determine how many lines will segment the circle into various sectors. For example, 2 lines result in 4 segments at 90° each, while 6 lines create 12 sectors at 30° apiece.
Grid | Lines | Circular | Polar |
---|---|---|---|
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 cellSize
and 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 cellColor
, cellThickness
, sectionColor
, sectionThickness
.
The <Grid>
component is a THREE.Mesh
with a PlaneGeometry
attached to it. The gridSize
parameter defines the size of the PlaneGeometry
.
You can extend the grid into infinity if you set the infiniteGrid
parameter to true
.
Changing 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).
You have the option to insert your own custom geometry into the <Grid/>
slot. The preceding example demonstrates this by showcasing a preview of a terrain-like geometry generated using Perlin noise.
<Grid>
<T.BoxGeometry />
</Grid>
Setting followCamera
to true applies a transform that moves the grid to the camera's position on the chosen plane
.