Using TextGeometry to Create 2D Labels and Animated Numbers

Showcase
, ,
1

After much trial and error, I finally discovered how to use TextGeometry to create 2D Labels and Animated Numbers. This is probably not recommended where you are creating a complex 3D scene - because it requires a bit of time and space. However, I am using this in a tutorial that is not very graphics intensive.

Here is a CodePen example and here is a demo program.

With the animated numbers, the program pre-loads the numbers and, for display purposes, sets a framework for displaying the numbers. To change the numbers, you simply swap geometries.

One advantage of using this method is that you can use this while running your program locally.

EDIT (02/29/24)
Thanks to an official Three.js example that I had previously not seen, I have been able to eliminate the tricks I was using to try to extract a flat geometry. These following commands accomplish the same thing, but without errors:

	let shape = font.generateShapes(text, textsize);
	let geometry = new THREE.ShapeGeometry(shape);

You can also use any of the available fonts and lowercase text without error.

These new commands are incorporated in both the CodePen example and the demo program.

ADDITION (3 Mar 24)
You should be able to improve performance by adding a curve segment modifier to ShapeGeometry, such as:

	let geometry = new THREE.ShapeGeometry(shape,2);

This should reduce the points in the geometry. According to the documentation, the default is 12. Reducing this to 1 creates blocky shapes - but 2 seems to be adequate for most purposes.

7 Likes