Extend the GridHelper to add Axis Text Labels


I’m trying to achieve an effect similar to this coordinate grid. My use case is a 2D world, the grid would be parallel to the XY plane and I would like to label the X and Y axis in the grid. As opposed to the example, I don’t mind “overlapping” the labels with the actual lines of the grid if that makes it any easier. Also, the grid would be at a given position on the XY plane, not necessarily starting at 0 in any axis.

How would you approach this problem of adding text labels to a GridHelper?
I thought about rolling my own GridHelper and adding the text in the constructor, but I don’t understand what’s going on in the constructor well enough to extend it. The alternative would be to create a wrapper object with a GridHelper and draw the text independently and try to place it in the right place.

I would like to hear your opinions as you’re probably more experienced in Three.js than I am! Also, by discussing this we might propose a pull request and make subsequent problems like these easier to handle :slight_smile:


If this is really a 2D use case, it might make more sense to draw a coordinate system with the Canvas 2D API like explained here:

That’s an interesting approach but I’m already using a canvas with a WebGL context and I wouldn’t want to add another canvas for the 2D context.

Any reasons for this? It should be a performance problem since canvas elements are sometimes used as data sources for textures.

Don’t take it the wrong way, I just think it’s adding a lot of complexity to a project for a simple feature. Plus, the project has numerous scenes which are handled by a single webgl canvas and scissoring.

Well, okay. But I don’t think your use case justifies a PR since you can draw a coordinate system with existing primitives. I would create an instance of THREE.Group as a container element and then add the grid (from scratch since THREE.GridHelper does not fit in this use case), two lines representing the axes and finally the labels as simple sprite elements (or by using TextGeometry if they should have a 3D effect).

If you add all elements to a group, you can transform the group in 3D space and keep everything together as one logical component.

From my point of view, three.js should not provide application specific APIs for e.g. generate coordinate systems. Something like this should sit on top of three.js. And organized in a separate project/repository.

1 Like

Thank you for your insights!
Sprite elements aren’t only for images? I mean, text can be seen as a set of images.
I was looking into the official examples and saw the workflow of loading a font with FontLoader and then use Font.generateShapes which are then stored in a ShapeBufferGeometry. It appears to be a simple enough approach.

The idea is that you draw text on a canvas element and then use it as a texture. Your other mentioned approach is of course valid, too!

1 Like

Maybe you can use something from my examples. :slightly_smiling_face:

The two coordinate systems are without labeling. Should remain very simple.
Construction of frames with contour/profile
threejsResources/ConstructFrame at master · hofk/threejsResources · GitHub

In the Helper I created numbers from lines.
THREEf.js/THREEh.js at 976360a85a1797f28ef75c8fa29d8744af274a87 · hofk/THREEf.js · GitHub
north and south

It can be combined.