@chronosai/three-infinite-grid
v0.1.1
Published
Infinite Grid
Downloads
87
Readme
Three infinite grid
Three.js extension to visualize customizable antialiased grid
Based on this article.
Installation
Install the dependencies
npm install @chronosai/three-infinite-grid
Usage
/*
* chunks - size of grid patches matrix (each patch is 20x20 units size)
* a hack with instanced mesh, used to gain more precision within UV coordinates.
*/
const grid = new ThreeInfiniteGrid({
chunks: new Vector2(100, 100), //2000x2000 units size
plane: PLANE.XZ,
scale: 1,
majorGridFactor: 10,
minorLineWidth: 0.01,
majorLineWidth: 0.015,
axisLineWidth: 0.05,
minorLineColor: new Color("#000000"),
majorLineColor: new Color("#000000"),
xAxisColor: new Color("#ff0000"),
yAxisColor: new Color("#00ff00"),
zAxisColor: new Color("#0000ff"),
centerColor: new Color("#ffff00"),
opacity: 1,
});
scene.add(grid);
To make it actually "infinite" move the grid object after orbitControls.target
, e.g:
//somewhere in update()
if (grid.plane === PLANE.XZ) {
grid.position.copy(orbitControls.target).setY(0);
}
if (grid.plane === PLANE.XY) {
grid.position.copy(orbitControls.target).setZ(0);
}
if (grid.plane === PLANE.ZY) {
grid.position.copy(orbitControls.target).setX(0);
}