如何在Three.js中居中文本网格

我目前正在使用

Three.js

构建一个工具。 我想把点s与相应的数字s（点计数）放在一起。 下面的代码是我如何实现的。（如果有更好的方法，请教我）

为了对齐两个网格，我重新定位了它们，以便文本（编号）可以位于点的中心但是，问题是文本的位置是基于网格左侧，而不是中心。因此，如果数字增加更多位数，它们将不会像我预期的那样对齐

是否有更好的方法对齐文本网格，使其位于圆的中心

var totalDotCount = 0;
function addDotMeshToGroup(x, y) { // x,y coordinate
  ...
  // Dot
  var geometry = new THREE.CircleGeometry(0.4, 32);
  var material = new THREE.MeshBasicMaterial({color: 0xFFFF00});
  var dotMesh = new THREE.Mesh(geometry, material)

  // Number Text
  var textGeo = new THREE.TextGeometry(totalDotCount.toString(10), textParm);
  var textMesh = new THREE.Mesh(textGeo, material);

  // Relocation
  dotMesh.position.set(x, y, 0);
  textMesh.position.set(x - 0.2, y - 0.2, 0);

  totalDotCount += 1;
  ...
}

图片01[预计]

图片02[意外]

---

在这种特殊情况下，将圆和数字建模为3d对象可能有点过分了。相反，您可以创建一个简单的平面，并使用纹理向其添加圆和编号。可以使用画布元素动态创建纹理，如下所示：

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

canvas.width = canvas.height = 256;

// draw/fill the circle
ctx.beginPath();
ctx.arc(128, 128, 128, 0, 2 * Math.PI);
ctx.fillStyle = 'yellow';
ctx.fill();

// draw the number
ctx.fillStyle = 'black';
ctx.font = '64px sans-serif';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText('12', 128, 128);

// create mesh with texture
const mesh = new Mesh(
  new PlaneGeometry(1,1),
  new MeshBasicMaterial({transparent: true, map: new CanvasTexture(canvas)})
);

---

非常感谢你。这实际上是一个更好的方式为我的案件。