THREE.InfiniteGridHelper (anti-aliased)

Resources
, ,
21

Wow it works Thank you :blush:

1 Like
22

@Fyrestar
I just find this video, and I am very curious about what is shown here, and want to know how this effect is achieved.

2 Likes
23

Wouldn’t you just At every Nth power, make the larger squares lines a bit thicker than before?

1 Like
24

Or change size1, size2 respectively.

1 Like
25

Yesn’t, it requires some shader work, i added this to Tesseract a while ago since it’s straight necessary at the scale, gonna add it to the repo when i update it again. There also will be grid levels to define (currently it’s 2 by default) dashed lines, control of feather (blurriness) and thickness as well as dashed lines.

2 Likes
26

I try use it in Vue.

and use

import “./InfiniteGridHelper”;

write it
"
this.grid = new THREE.InfiniteGridHelper(10, 100);
this.grid_color = {value: 0xffffff};

this.scene.add(this.grid);

"
but when it run “THREE.Mesh.call( this, geometry, material );” in InfiniteGridHelper.js

it show error : “Class constructor Mesh cannot be invoked without ‘new’”
do i have any problem?

27

Try using the latest update, it has a fix to ensure compatibility with new ES6 classes but also work with older releases.

28

Struggling to use it in a module (where I included three.module.js).
I’m always obtaining the error: Cannot add property InfiniteGridHelper, object is not extensible.
what am I doing wrong?

29

I’ll add a separate module file later, it’s currently implemented as regular plugin file that adds itself to the THREE scope, the ES6 classes fix is for compatibility with the classes, for the modules i need to put it into a module file.

31

Thank you Fyrestar, very nice asset.

32

image
image1516×658 33.6 KB

I used this grid, but why does it look like a dotted line.What caused this？

33

Any way to use it as a node package? Any implementation for this in typescript, and/or in react three fiber?

34

I have a situation, where I have white plane on the ground and above it the grid. I had to enable WebGL paramater - logarithmicDepthBuffer: true, but with this the white plane is always rendered over the grid :frowning: so the grid is not visible. Cant figure it out to make it work with logarithmicDepthBuffer.

Did someone solve similar problem? Thx.

See the Pen InfiniteGridHelper with logarithmicDepthBuffer by Jiri (@Tvarosh) on CodePen.

35

I was looking at potentially using this after spotting a similar thing now for drei

2 questions…

are they using the same approach, or is one better than the other (performance-wise)

In the git repository for this, it says Version 1 update soon. I assume that’s not the case and this is now not actively maintained?

36

i wasn’t aware that this is the source, saw on threlte but feel a bit dumb now, i think i’ll rewrite credits now. it seems it’s the same with a few additions, i don’t think there’s any performance difference.

edit: credits fixed.

ps @TresAbhi look up, it’s fully typed

37

It is, i’ve been just busy with other things and didn’t like the alternations.

38

Hello, I was wondering if you found a way to import it into your app, I get the same error as you but I’m using Vite, thank you

39

it’s not a module, it’s iife. copy it into your project. i think you only need the class THREE.InfiniteGridHelper/InfiniteGridHelper.js at a486ac373125c844d53f8c5da8e0937c2c194487 · Fyrestar/THREE.InfiniteGridHelper · GitHub i don’t know what the prototype stuff is about but the class already extends THREE.Mesh, which already contains O3D and EventDispatcher.

40

that worked, IDK what I was thingking, thank you so much!!

42

Why does it keep saying THREE is not defined?