Publish to NPM?

[joezappie]

This is awesome work! Would be great if it was added to NPM

[ZinMinn-Resonest]

How to import this InfiniteGridHelper to my three scene?

[joezappie]

Hey @ZinMinn-Resonest, not sure if you figured it out but you can treat this like any other 3d object. Heres how I used it in my project:

setGrid(size1, size2, gridColor, distance) {
    const color = new THREE.Color(gridColor);
    const grid = new THREE.InfiniteGridHelper(size1, size2, color, distance, 0);
    scene.add(grid);
}

[tresabhi]

@jrj2211 Any idea of how to implement this in react-three-fiber?

[joezappie]

@tresabhi Sorry, I do not

[tresabhi]

I'm pretty new to react and three, but I think I can do it. Let's give it a try, I would love to see this as a NPM package.

[tresabhi]

I got it to work! I know the license says that I can re-distribute without permission, however, I think it is ethical for me to ask you before I do it. Can I make this an NPM package (with significantly refactored code and support for typescript and react-three-fiber)?

[Fyrestar]

Sorry no, i'm already preparing the update with a NPM package. However @tresabhi you could provide the base for react-fiber and typescript if you like, the update has a larger amount of changes i need to adapt then.

ES6 Module and backwards compatibility comes as well.

[tresabhi]

Edit: Get the latest iteration here

---

Original response

interface IInfiniteGridHelper {
  size1?: number;
  size2?: number;
  color?: THREE.Color;
  distance?: number;
  axes?: string;
}
const InfiniteGridHelper: FC<IInfiniteGridHelper> = ({ size1 = 10, size2 = 100, color = new THREE.Color('white'), distance = 8000, axes = 'xzy' }) => {
  const planeAxes = axes.substr(0, 2);

  return (
    <mesh>
      <shaderMaterial
        args={[
          {
            side: THREE.DoubleSide,
            uniforms: {
              uSize1: { value: size1 },
              uSize2: { value: size2 },
              uColor: { value: color },
              uDistance: { value: distance },
            },
            extensions: { derivatives: true },
            transparent: true,

            vertexShader: `// vertex shader here`,

            fragmentShader: `// fragment shader here`,
          },
        ]}
      />
      <planeBufferGeometry />
      {/* <cylinderGeometry /> */}
    </mesh>
  );
};

[jessefischer]

Hi all, just discovered this awesome package. Has there been any progress on publishing it on NPM and/or making it work with react-three-fiber? thanks! 🙌🏻

[berry4u]

Hi, since there's no news about the NPM publishing, please @tresabhi could you share privately the package?

Thank you

[tresabhi]

@berry4u My app has it implemented as a component: https://github.com/TresAbhi/Stellar/blob/main/src/components/InfiniteGridHelper.tsx

[ToonKru3]

I found this fork from @dkaraush https://github.com/dkaraush/THREE.InfiniteGridHelper , He creates a typescript for port, you can import InfiniteGridHelper from './InfiniteGridHelper.ts' and then when you want to call
let grid = new InfiniteGridHelper(0.5, 100, new THREE.Color(0xe30000), 40);
scene.add(grid)