Add Text With Geometry In Threejs

I want to attach text to the bottom part of the rings (where the cuts are) as you can see in the image below. You can see the code I am using to draw the rings. I want to write the

Solution 1:

You can add Mesh objects with PlaneGeometry and Basic material textured with a CanvasTexture objects. Position them in the cuts and update the texture content with text showing the size.

If you want them to be always facing screen, you can use Sprite objects instead of Mesh

Solution 2:

For anyone else looking for the answer, I ended up creating text labels using this function:

createTextMesh(text, font, size, mat) {
   var shapes = font.generateShapes(text, size);

   var geometry = newTHREE.ShapeBufferGeometry(shapes);

   geometry.center();
   geometry.computeBoundingBox();

   returnnewTHREE.Mesh(geometry, mat);
}

and this is what I end up doing and it worked for me:

// Rings// 40m ringconst geometry40m = new THREE.RingGeometry(
  RADIUS_40M,
  RADIUS_40M + 0.6,
  30,
  8,
  4.85,
  6);

// 30m ringconst geometry30m = new THREE.RingGeometry(
  RADIUS_30M,
  RADIUS_30M + 0.6,
  30,
  8,
  4.85,
  6);
geometry30m.merge(geometry40m);

// 20m ringconst geometry20m = new THREE.RingGeometry(
  RADIUS_20M,
  RADIUS_20M + 0.6,
  30,
  8,
  4.85,
  6
);
geometry20m.merge(geometry30m);

// adding 40m, 30m and 20m to one meshconst ringMesh40_30_20m = new THREE.Mesh(geometry20m, whiteMaterial);
ringMesh40_30_20m.layers.set(16);
ringMesh40_30_20m.visible = true;
ringMesh40_30_20m.name = "rings";

this.rings = new THREE.Object3D();
this.rings.add(ringMesh40_30_20m);

// Labelsconst fontJson = require("../../../assets/helvetiker_regular.typeface.json");
const font = new THREE.Font(fontJson);

let label20m = this.createTextMesh("20m", font, 0.5, whiteMaterial);
label20m.layers.set(16);
label20m.visible = true;
label20m.name = "label20m";

let label30m = this.createTextMesh("30m", font, 2.2, whiteMaterial);
label30m.layers.set(16);
label30m.visible = true;
label30m.name = "label30m";

let label40m = this.createTextMesh("40m", font, 2.5, whiteMaterial);
label40m.layers.set(16);
label40m.visible = true;
label40m.name = "label40m";

this.rings.add(label20m);
this.rings.add(label30m);
this.rings.add(label40m);

this.rings.getObjectByName("label20m").position.y = -RADIUS_20M;
this.rings.getObjectByName("label30m").position.y = -RADIUS_30M;
this.rings.getObjectByName("label40m").position.y = -RADIUS_40M;
this.rings.lookAt(this.CAMERA_POSITION);
this.scene.add(this.rings);

I got the font from the three.js official Repo