THREE.InfiniteGridHelper

Infinite anti-aliased grid.

Original demo (you'll need to use an older version of ThreeJS for this)

2024 update by @plackyfantacky

Pretty much all credit/blame belongs to Fyrestar. I just forked their work, updated it to work with more recent versions of ThreeJS and made it into an npm package for easy import. Nothing major.

Install

npm i @plackyfantacky/three.infinitegridhelper

Usage

import InfiniteGridHelper from 'InfiniteGridHelper';

Use it in your ThreeJS scene like this:

// assuming you have already written...
// let scene = new THREE.Scene()

/* arguments are:
	- size1 (minor lines)
	- size2 (major lines)
	- color (must be a THREE.Color)
	- distance (default is 8000, but I find 30 'fades things out' nicely)
	- and axes
*/
let grid = new InfiniteGridHelper(0.1, 1, new THREE.Color('black'), 30, 'xzy');
scene.add(grid);