I would like to create a map marker 3d object, in which a counter number will be displayed on it, meaning that I want to be able to increment that number.
Here’s an example
The only reason I want it to be a 3d object is to be able to set an altitude on that marker ( More details here ).
What I already create are some 3d rectangles by using new THREE.Mesh(boxGeometry,material) ,but that’s all I know.
How could I create a custom mesh that will have the shape of a map marker and be able to set/modify text on it?
I’ve seen that it’s possible to create a 3d object and append an html element on it, but I don’t have the knowledge to do it on my own.
Since such markers are likely to be flat / 2D - for as long as you stick to web / browser - using CSS2DRenderer (or CSS3DRenderer) may be the way to go (you can then use DOM elements - text, divs, img’s etc. to create the markers.) CSS2DObjects are easy to create, update, and they still have a position in 3D space.
If you really want it to be a Mesh, because life’s an adventure:
(1) It’s quite easy to create custom shapes using ShapeBufferGeometry. You can also solidify these shapes by extruding them.
(2) To create numbers you can use a TextBufferGeometry (this can also be extruded.) For an easier way to handle text you can also take a look at Troika-3d-text: library for SDF text rendering .
