Using InfiniteGridHelper in Three.js

It seems you're having trouble with THREE.InfiniteGridHelper in your project. The issue you're encountering is that InfiniteGridHelper is not actually part of the official Three.js library - it's a custom helper created by the community.

Solution

Since InfiniteGridHelper is not included in the core Three.js package, you need to:

1. Copy the implementation code from the forum post you referenced
2. Create a separate file for it in your project
3. Import it properly

Here's how to implement it:

Step 1: Create a new file called InfiniteGridHelper.js

JAVASCRIPTCopied
import * as THREE from 'three';

class InfiniteGridHelper extends THREE.Mesh {
  constructor(size1 = 1, size2 = 10, color = 0x444444, distance = 8000, axes = 'xzy') {
    const planeAxes = axes.substring(0, 2);

    const geometry = new THREE.PlaneGeometry(2, 2, 1, 1);
    const material = new THREE.ShaderMaterial({
      side: THREE.DoubleSide,
      uniforms: {
        uSize1: {
          value: size1
        },
        uSize2: {
          value: size2
        },
        uColor: {
          value: new THREE.Color(color)
        },
        uDistance: {
          value: distance
        }
      },
      transparent: true,
      vertexShader: `
        varying vec3 worldPosition;
        uniform float uDistance;
        
        void main() {
          vec3 pos = position.${axes} * uDistance;
          pos.${planeAxes} += cameraPosition.${planeAxes};
          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.${planeAxes} / 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.${planeAxes}, worldPosition.${planeAxes}) / 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
      }
    });

    super(geometry, material);

    this.frustumCulled = false;
  }
}

export { InfiniteGridHelper };

Step 2: Import and use it in your main file

JAVASCRIPTCopied
import * as THREE from 'three';
import { InfiniteGridHelper } from './InfiniteGridHelper.js';

// Your Three.js setup code...

// Create the infinite grid helper
const grid = new InfiniteGridHelper(1, 10, 0x444444, 8000);
scene.add(grid);

Alternative: Using the built-in GridHelper

If you're having trouble with the custom InfiniteGridHelper, you can use the built-in GridHelper that comes with Three.js:

JAVASCRIPTCopied
import * as THREE from 'three';

// Your Three.js setup code...

// Create a standard grid helper
const size = 100;
const divisions = 100;
const gridHelper = new THREE.GridHelper(size, divisions);
scene.add(gridHelper);

The built-in GridHelper is simpler but doesn't have the "infinite" effect that follows the camera. It creates a fixed-size grid centered at the origin.

Note

The InfiniteGridHelper implementation above is based on the community-created helper mentioned in the forum post. You may need to adjust parameters like size, color, and distance to suit your specific needs.