# Help with GridHelper - 3d coordinates

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);

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

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);
}
``````

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.

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)

2 Likes

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

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

1 Like

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

Note:` .addAttribute` is now `.setAttribute`

1 Like

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

1 Like

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!

1 Like

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]))
)
}
``````

``````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 ?

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.

1 Like

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!

1 Like

@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 });
``````

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

1 Like

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

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

1 Like

Do you happen to have a codepen of this?