在Threejs中添加带有几何图形的文本

Question

我想在圆环的底部（有切口的地方）附加文字，如下图所示。您可以看到我用来绘制圆环的代码。我想写出切口所在的半径（40m，30m，20m），我希望将它们合并，因为我将放大和缩小它们并希望它们保持与环的连接。

// Rings
// 40m ring
const geometry40m = new THREE.RingGeometry(35, 35.6, 30, 8, 4.85, 6);
geometry40m.lookAt(this.CAMERA_POSITION);
const ringMesh40m = new THREE.Mesh(geometry40m, whiteMaterial);

ringMesh40m.updateMatrix();
// geometry40m.mergeMesh(new THREE.Mesh(textGeometry, whiteMaterial));

// 30m ring
const geometry30m = new THREE.RingGeometry(26, 26.6, 30, 8, 4.85, 6);
geometry30m.lookAt(this.CAMERA_POSITION);

geometry30m.mergeMesh(ringMesh40m); // adding 40m and 30m to one mesh

const ringMesh40_30m = new THREE.Mesh(geometry30m, whiteMaterial);
ringMesh40_30m.updateMatrix();

// 20m ring
const geometry20m = new THREE.RingGeometry(16, 16.6, 30, 8, 4.85, 6);
geometry20m.lookAt(this.CAMERA_POSITION);

geometry20m.mergeMesh(ringMesh40_30m); // adding 40m, 30m and 20m to one mesh

const ringMesh40_30_20m = new THREE.Mesh(geometry20m, whiteMaterial);
this.rings = ringMesh40_30_20m;
this.rings.layers.set(15);
this.rings.visible = true;
this.scene.add(this.rings);

Answer 1

您可以添加具有PlaneGeometry的Mesh对象和使用CanvasTexture对象纹理化的Basic材质。将它们放置在切口中，并使用显示尺寸的文本更新纹理内容。

如果希望它们始终面对屏幕，则可以使用Sprite对象而不是Mesh。>

Answer 2

对于寻找答案的其他人，我最终使用此功能创建了文本标签：