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

我想将文本附加到环的底部（切割处），如下图所示。你可以看到我用来画环的代码。我想写下切割处的半径（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);

---

您可以添加带有平面几何体的网格对象和带有CanvaTexture对象纹理的基本材质。将它们放置在剪切中，并使用显示大小的文本更新纹理内容

---

如果希望它们始终面向屏幕，可以使用精灵对象而不是网格

您可以添加具有平面几何体的网格对象，以及使用CanvaTexture对象进行纹理处理的基本材质。将它们放置在剪切中，并使用显示大小的文本更新纹理内容

---

如果希望它们始终面向屏幕，则可以使用精灵对象而不是网格

对于任何其他正在查找答案的人，我最终使用以下功能创建文本标签：

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

   var geometry = new THREE.ShapeBufferGeometry(shapes);

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

   return new THREE.Mesh(geometry, mat);
}

这就是我最终所做的，它对我起了作用：

// Rings

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

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

// 20m ring
const 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 mesh
const 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);

// Labels

const 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);

---

我从

中获得了字体。对于其他正在寻找答案的人，我最终使用此函数创建了文本标签：

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

   var geometry = new THREE.ShapeBufferGeometry(shapes);

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

   return new THREE.Mesh(geometry, mat);
}

这就是我最终所做的，它对我起了作用：

// Rings

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

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

// 20m ring
const 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 mesh
const 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);

// Labels

const 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);

---

我从

得到字体，如果你喜欢这个答案，请考虑这个投票。如果你喜欢这个答案，请考虑这个投票。