Help with GridHelper - 3d coordinates

[MQdev]

Hey guys. How are you doing?

Well, I’m following the saga of this 3d graphic that I’m trying to draw, along with that I’m learning a little more than three.js each time.

I’m stuck now on the issue of grids of coordinates, I’m using gridHelper, would this be the best alternative?

I imagine there could be something easier, as I’m not managing to adapt the grid very well to what I need. This is the code I have:

function createAGrid(opts) {
    var gridXZ = new THREE.GridHelper(250, 6)
    gridXZ.scale.set(1, 0.5, 0.25);
    scene.add(gridXZ);

    var gridXY = new THREE.GridHelper(250, 6);
    gridXY.position.z = -31, 25
    gridXY.position.y = 125
    gridXY.rotation.x = Math.PI / 2;
    scene.add(gridXY);

    var gridYZ = new THREE.GridHelper(250, 3);
    gridYZ.position.x = -125
    gridYZ.position.y = 125
    gridYZ.rotation.z = Math.PI / 2;
    gridYZ.scale.set(1, 1, 0.25);
    scene.add(gridYZ);
}

Here is a live demo of my code:

And this is what I’m trying to achieve:

This kind of grids

Is there any way that grids are not “square”, that is, with the same amount of rows and columns? I needed there in the back 3 rows and 10 columns, to correspond with the 10 measurements I have.

Likewise, I would like to have the bottom 6x10.

Another thing I can’t do is leave the grid lines corresponding to the 10 plotted measurements, they don’t look right on top.

And, a last point would be to check the possibility of extending some lines of the grid, according to the template I showed above that I would like to get it working.

Any help would be most welcome.

[prisoner849]

Hi!
Just an option, based on this topic: Wireframe of quads
Example: https://jsfiddle.net/prisoner849/0q6npeky/
Picture:

Another option: use the source code of GridHelper and change it to make it to do what you want

One more option is to use this approach: THREE.InfiniteGridHelper (anti-aliased)

[MQdev]

Worked well! Thanks!
https://jsfiddle.net/mqdevWG/v95n0bgu/17/

For me to achieve this effect:

Would I need to modify the gridhelper code?

It seems to me that they are all closed and I wouldn’t be able to leave this line to link with the sprites

[prisoner849]

You’re the master of your scene
Feel free to build your own grid. For example, of LineSegments

[hofk]

Here is an example of grids according to personal preference.
From the Collection of examples from discourse.threejs.org

2019
ConstructionBasis

Note: .addAttribute is now .setAttribute

See also Construction of frames with contour/profile

[prisoner849]

@MQdev
Kind of a grid geometry, with some useful parameters
Example: https://jsfiddle.net/prisoner849/ces0pL1v/
Picture:

[MQdev]

Thank you! That helped me a lot!

I love this forum each time more! Thanks… With that, I can go away.
Some day I’ll be like you helping others.

Best regards!

[MQdev]

Only thing I would change:

Always leave a fixed size for external auxiliary lines.

I don’t know if this is the best way to do this, but I set a value for them already in the assembly loop:

for(let y = 0; y <= hSeg; y++){
  	pts.push(
    	new THREE.Vector2(0, y * seg.y),
      new THREE.Vector2(width + (0.5 * lExt[0]), y * seg.y)
    )
  }
  
  for(let x = 0; x <= wSeg; x++){
  	pts.push(
    	new THREE.Vector2(x * seg.x, 0),
      new THREE.Vector2(x * seg.x, height + (0.5 * lExt[1]))
    )
  }

Instead of:

new THREE.Vector2(x * seg.x, height + (hlfSeg.y * lExt[1]))

So I’m doing:

new THREE.Vector2(x * seg.x, height + (0.5 * lExt[1]))

Updated example with that: https://jsfiddle.net/mqdevWG/6g58aj4n/14/

What do you think, @prisoner849 ?

[prisoner849]

I tried to make it more flexible You can pass [2, 0.5] with my implementation and see how it looks like.
But if you want to hardcode it, it’s up to you
I gave you an option. Feel free to modify it at your will.

[MQdev]

Oops, you’re right.

Better in your way… For a moment I thought it was a boolean, just to see if it had that line or not, but you made it already flexible, and it really is better to let it like that.

Thanks again!

[MQdev]

@prisoner849 , just one thing, why I the linewidth property is not working in this case?

let m3 = new THREE.LineBasicMaterial({ color: "blue", linewidth: 0.5 });

[prisoner849]

Because of this: three.js docs

Due to limitations of the OpenGL Core Profile with the WebGL renderer on most platforms linewidth will always be 1 regardless of the set value

PS Don’t hesitate to read the docs

[SCDavison]

Is there a way to add accurate scene XYZ coordinates to a grid?

[prisoner849]

@SCDavison Some time ago, I tried to combine @Fyrestar’s grid with a code from shadertoy to achieve this:

[SCDavison]

Do you happen to have a codepen of this?