Here’s a infinite anti-aliased grid helper which fades out in distance. It doesn’t rely on lines, instead uses a single quad, so you can have a very dense huge grid without creating lines you can also change on the fly.
new THREE.InfiniteGridHelper(size1, size2, color, distance);
(current version 1, updating soon)
Cool! 
Reminded me of this topic: How to achieve this material effect [gif image]? - #5 by prisoner849
Yeah this is the technique for the grid, for editors/games this is technically better suited for my needs than lines.
I have some shakes on some lines passing through in the middle with these. Any reason for that?
Note: I have added device orientation controls to my code as well.
https://project-lg.glitch.me/
Your linked site doesn’t seem to work, is geolocation necessary?
The grid is technically a plane on the xz axes around the camera, so if you have other lines/planes on y=0 that might be z-fighting.
Just tried and it works. Maybe from a desktop you only see a line which is due to the orientation of desktop computers are different than mobile ones. It would be well oriented if you could try from mobile device. Yes geolocation is necessary.Can I learn why did you ask if it is necessary?
I can place some cube and sphere meshes on the xz plane. Can that cause it?
thank you very much, works perfect, that was exactly what i was looking for.
Does the linked codepen look like this for you too? Did you made changes?
yes i removed the sky add webgl2 and changed the camera position
Seems fine here, do you get any warnings or something? Seems like derivatives aren’t working for you, which browser/device?
Do you get thick kinda glowing lines in this one?
Should look like
warnings i get in chrome console
system:
X.Org
GL_RENDERER AMD Radeon ™ RX 460 Graphics (POLARIS11, DRM 3.36.0, 5.6.10-300.fc32.x86_64, LLVM 10.0.0)
GL_VERSION 4.6 (Core Profile) Mesa 20.0.6
Chrome/81.0.4044.138
your sample looks fine here too!
I’ve been using this for one of my projects, but I really need to make the origin X and Y lines different colors. The included grid helper for Three JS allows for changing the color of the main axes so it would be great if this could too. I’d also like to make the X and Y axes different colors like Blender3D where they are red and green.
I tried modifying the shader to do this and I could kind of get it to work but the lines just because super jagged. I’ve never done any shader programming before and was just kind of winging it so any idea on how to do this for just the main axes?
after importing it says
Uncaught TypeError: Cannot add property InfiniteGridHelper, object is not extensible
You need to provide more information, preferably a pen or fiddle that reproduces your isse.
i create a file called InfiniteGridHelper.js and i added that code inside it
// Author: Fyrestar https://mevedia.com (https://github.com/Fyrestar/THREE.InfiniteGridHelper)
import * as THREE from "three";
THREE.InfiniteGridHelper = function InfiniteGridHelper(size1, size2, color, distance) {
color = color || new THREE.Color('white');
size1 = size1 || 10;
size2 = size2 || 100;
distance = distance || 8000;
const geometry = new THREE.PlaneBufferGeometry(2, 2, 1, 1);
const material = new THREE.ShaderMaterial({
side: THREE.DoubleSide,
uniforms: {
uSize1: {
value: size1
},
uSize2: {
value: size2
},
uColor: {
value: color
},
uDistance: {
value: distance
}
},
transparent: true,
vertexShader: `
varying vec3 worldPosition;
uniform float uDistance;
void main() {
vec3 pos = position.xzy * uDistance;
pos.xz += cameraPosition.xz;
worldPosition = pos;
gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
}
`,
fragmentShader: `
varying vec3 worldPosition;
uniform float uSize1;
uniform float uSize2;
uniform vec3 uColor;
uniform float uDistance;
float getGrid(float size) {
vec2 r = worldPosition.xz / size;
vec2 grid = abs(fract(r - 0.5) - 0.5) / fwidth(r);
float line = min(grid.x, grid.y);
return 1.0 - min(line, 1.0);
}
void main() {
float d = 1.0 - min(distance(cameraPosition.xz, worldPosition.xz) / uDistance, 1.0);
float g1 = getGrid(uSize1);
float g2 = getGrid(uSize2);
gl_FragColor = vec4(uColor.rgb, mix(g2, g1, g1) * pow(d, 3.0));
gl_FragColor.a = mix(0.5 * gl_FragColor.a, gl_FragColor.a, g2);
if ( gl_FragColor.a <= 0.0 ) discard;
}
`,
extensions: {
derivatives: true
}
});
THREE.Mesh.call(this, geometry, material);
this.frustumCulled = false;
};
THREE.InfiniteGridHelper.prototype = {
...THREE.Mesh.prototype,
...THREE.Object3D.prototype,
...THREE.EventDispatcher.prototype
};
Then i import it inside my project with that line
import "../modules/InfiniteGridHelper";
i didn’t call it yet and i start getting that error
[ESM-HMR] Hot Update Error TypeError: Cannot add property InfiniteGridHelper, object is not extensible
at InfiniteGridHelper.js:3
Note:
am using snowpack a bundlers like webpack am not sure if that maybe cause the problem
Thank you
Yes, that’s not related to the helper, i can’t provide help for the bundlers you need to investigate their docs or ask on a related platform.
However the error already says you can’t just add a property to the THREE object as regular plugin, for ES6 modules or bundlers using import/export you need to export the function instead.
Thank you for confirmation i really appreciate that 
i just found small problem
InfiniteGridHelper (Y Axis problem) (codepen.io)
if you keep dragging at Y axis you will reach the end
the X axis is infinite work good
any advice to fix that
Thank you
It’s not supposed to be rotated, i’ve added a parameter you can define which axes order to use with the first 2 being the plane axes, so in your case you set it to ‘xyz’.