Help with GridHelper - 3d coordinates

Hello, how are you doing?

I’m trying to build a 3d chart using some 3D libraries, which isn’t that trivial for me (a beginner). And I think a big demand for 3d graphics is ahead, and no specific 3d chart library has been able to supply what I need yet.


I made this using plotly.js, but I can’t go ahead. The library is kind of limited comparing to three.js and Babylon.

I could make a similar grid to what I want here using Three.js, but there I can’t place the stripes at the right point… And also, I can’t get the last line open as in the image above. Here is the fiddle with my three.js code:

Is there a better way to do this using Babylon? Leave the grid open and put these plotted values down there? I ask because if there is any easier way I would try to migrate to Babylon since I’m still at the beginning of development.

Thanks in advance!

Hey @MQDev!

If it were me, I’d probably create the grid using the Node Material Editor. It’s not the easiest solution in the world, but it’s also not super difficult either.

If you’re not already familiar with it, the Node Material Editor allows you to create custom glsl shaders for Babylon without having to write any code. It’s similar to shader-graphy in Unity…if you’ve ever used that.

There’s a whole bunch of documentation on the Node Material Editor here: Node Material | Babylon.js Documentation

There are also links to a bunch of video tutorials about it at the bottom of that page.

The other option you could look into is using the Babylon Grid Material

This is pre-setup for you, though I’m not sure about the open end thing that you’re after. That may require some customization to it.

Either way these two options should help get you started.

Hope this helps!


Thanks for your contribution, @PirateJC .
Sure that it’s going to help me.

I’ll try something here, if I have any further doubt I’ll write again here, thank you again for your time spent with that, it’s already a good way for me,

Have a nice week!