# Grid

Class · category: Graphics

Source: https://github.com/playcanvas/engine/blob/64089771243fe28a9b9d2b4de538b99b07c75097/src/extras/grid/grid.js#L55

An anti-aliased reference grid whose levels of lines follow the zoom. It follows the camera and
fades out with distance, or is sized by its node's scale when not [Grid#infinite](https://api.playcanvas.com/engine/classes/Grid.md#infinite). It lies
at its node's position and rotation; use [Grid#spacing](https://api.playcanvas.com/engine/classes/Grid.md#spacing) to size the cells.

```javascript
const grid = new Grid(app.graphicsDevice);
entity.addComponent('render', {
    meshInstances: grid.meshInstances,
    castShadows: false
});
```

Relevant Engine API examples:

- [Grid](https://playcanvas.github.io/#/graphics/grid)

## Constructors

### constructor

```ts
new Grid(device: GraphicsDevice)
```

Creates a new Grid instance.

**Parameters**

- `device` ([`GraphicsDevice`](https://api.playcanvas.com/engine/classes/GraphicsDevice.md)): The graphics device.

**Example**

```ts
const grid = new Grid(app.graphicsDevice);
grid.spacing = 1;
grid.plane = 'xy';
```

## Accessors

### axisLineThickness

```ts
get axisLineThickness(): number
set axisLineThickness(value: number)
```

Gets the axis line thickness in CSS pixels.

### contrast

```ts
get contrast(): boolean
set contrast(value: boolean)
```

Gets whether the lines contrast with the scene.

### depthDither

```ts
get depthDither(): boolean
set depthDither(value: boolean)
```

Gets whether the written depth is dithered.

### depthOffset

```ts
get depthOffset(): number
set depthOffset(value: number)
```

Gets the fraction of the camera distance the grid's depth moves toward the camera by.

### depthTest

```ts
get depthTest(): boolean
set depthTest(value: boolean)
```

Gets whether the grid is depth tested against the scene.

### depthWrite

```ts
get depthWrite(): boolean
set depthWrite(value: boolean)
```

Gets whether the lines write depth.

### fadeRange

```ts
get fadeRange(): Vec2
set fadeRange(value: Vec2)
```

Gets the distances from the camera where the grid starts and finishes fading out.

### infinite

```ts
get infinite(): boolean
set infinite(value: boolean)
```

Gets whether the grid has no edge.

### majorLineThickness

```ts
get majorLineThickness(): number
set majorLineThickness(value: number)
```

Gets the major line thickness in CSS pixels.

### meshInstances

```ts
get meshInstances(): MeshInstance[]
```

Gets the mesh instances to add to a render component or layer: the lines and their depth
pass. They have no node, so set one when adding them to a layer directly.

### minorLineThickness

```ts
get minorLineThickness(): number
set minorLineThickness(value: number)
```

Gets the minor line thickness in CSS pixels.

### plane

```ts
get plane(): GridPlane
set plane(value: GridPlane)
```

Gets the plane.

### showAxes

```ts
get showAxes(): boolean
set showAxes(value: boolean)
```

Gets whether the lines through the origin use the axis colors.

### spacing

```ts
get spacing(): number
set spacing(value: number)
```

Gets the cell size the levels are scaled from.

### subdivisions

```ts
get subdivisions(): number
set subdivisions(value: number)
```

Gets how many cells of a level fit across one of the level above.

### theme

```ts
get theme(): GridTheme
```

Gets the theme.

### visible

```ts
get visible(): boolean
set visible(value: boolean)
```

Gets whether the grid is visible.

## Methods

### destroy

```ts
destroy(): void
```

Destroys the mesh instances and materials. Remove the mesh instances from use first.

### setTheme

```ts
setTheme(partial: object): void
```

Sets the theme or part of it. Each color's alpha sets its lines' opacity.

**Parameters**

- `partial` (`object`): The
  theme to set.
    - `partial.axis` (`Partial<{ x: Color; y: Color; z: Color }>`, optional)
    - `partial.major` ([`Color`](https://api.playcanvas.com/engine/classes/Color.md), optional)
    - `partial.minor` ([`Color`](https://api.playcanvas.com/engine/classes/Color.md), optional)

**Example**

```ts
grid.setTheme({
    axis: { x: new Color(1, 0, 0) },
    minor: new Color(0.5, 0.5, 0.5, 0.5)
});
```