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
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.
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.
