Three.js Blocks

Home
Documentation
Examples
Tools

GridPristine

@three-blocks/coreWebGPUWebGL
new GridPristine()
Extends
THREE.Mesh

Infinite grid mesh with anti-aliased lines and dual-layer composition.

Features

  • Two independent grid layers (A and B) with configurable cell size, width, color, and opacity
  • Analytic derivative-based rendering keeps line thickness stable across all zoom levels
  • World-space positioning using positionWorld (grid doesn't move with camera)
  • Smooth anti-aliasing at any distance or angle
  • Full TSL/NodeMaterial implementation for WebGPU compatibility

Rendering

  • Uses fragment shader derivatives (dFdx/dFdy) to compute pixel-space line width
  • Lines automatically adapt thickness based on screen-space density
  • Composite blend: background → layer B → layer A
  • No texture lookups or geometry subdivision required

Use Cases

  • Scene reference grids with major/minor divisions
  • CAD/3D editor floor grids
  • Architectural visualization ground planes
  • Debug visualizations requiring stable grid lines
Example
import { GridPristine } from '@three-blocks/core';
import * as THREE from 'three/webgpu';

// Basic grid with default settings
const grid = new GridPristine();
scene.add(grid);

Methods

attachGUI#

attachGUI(gui : *) : GridPristine

Attach a GUI folder with common controls. Compatible with lil-gui, dat.gui, and Three.js Inspector.

Parameters
gui*
GUI instance (e.g., lil-gui/dat.gui or renderer.inspector.createParameters()).
Returns
GridPristine

dispose#

dispose() : void

Dispose GPU resources and detach GUI.

Returns
void

Type Definitions

GridPristineOptions#

width:number, height:number, cellSizeA:number, lineWidthA:number, +7 more
Properties
widthoptionalnumber
Plane width in world units.
Default is 9999.
heightoptionalnumber
Plane height in world units.
Default is 9999.
cellSizeAoptionalnumber
Cell size for layer A (world units).
Default is 10.0.
lineWidthAoptionalnumber
Line width for layer A (world units).
Default is 0.03.
colorAoptionalnumber | string | THREE.Color
Line color for layer A.
Default is 0xffffff.
opacityAoptionalnumber
Opacity for layer A in [0,1].
Default is 1.0.
cellSizeBoptionalnumber
Cell size for layer B (world units).
Default is 1.0.
lineWidthBoptionalnumber
Line width for layer B (world units).
Default is 0.02.
colorBoptionalnumber | string | THREE.Color
Line color for layer B.
Default is 0xcccccc.
opacityBoptionalnumber
Opacity for layer B in [0,1].
Default is 0.45.
bgColoroptionalnumber | string | THREE.Color
Background color.
Default is 0x000000.