文本几何体的中心网格位置

Question

我正在努力解决一些aframe文本几何形状的定位，并且想知道我是否以错误的方式处理这个问题😅

我发现当盒子渲染时，中心点位于所有轴的最小点（左下角）。这意味着文本向右上角扩展的程度超出了我的预期。这与中心点位于所有轴的正中心的框架几何实体不同。

抱歉，如果上面的措辞令人困惑，我仍然不确定如何最好地描述 3D 空间中的事物😆

我认为我需要做的是在元素加载后计算边界框并将位置更改为中心。我的方法基于此处的答案 AFRAME 文本几何组件从中心旋转？.

这看起来是正确的方向吗？如果是这样，我目前正在尝试通过 aframe 组件来做到这一点

aframe.registerComponent('center-all', {
  update() {
    // Need to wait for the element to be loaded
    setTimeout(() => {
      const mesh = this.el.getObject3D('mesh');
      const bbox = new THREE.Box3().setFromObject(this.el.object3D);
      const offsetX = (bbox.min.x - bbox.max.x) / 2;
      const offsetY = (bbox.min.y - bbox.max.y) / 2;
      const offsetZ = (bbox.min.z - bbox.max.z) / 2;
      mesh.position.set(offsetX, offsetY, offsetZ);
    }, 0);
  }
});

这段代码说明了我遇到的问题

此代码显示了我尝试的解决方案

这段代码（翻译硬编码）更像是我想要的

Answer 1

TextGeometry

和

TextBufferGeometry

都是各自几何类的子类，因此都具有

boundingBox

属性。你只需要计算它，然后得到它的中心点：

textGeo.computeBoundingBox();
const center = textGeo.boundingBox.getCenter(new Vector3());

然后

center

将在局部空间中准确反映几何体的中心。如果您在全局空间中需要它，则需要将包含

textGeo

的网格矩阵应用于

center

向量，例如

textMesh.updateMatrixWorld();
center.applyMatrix4(textMesh.matrixWorld);

Answer 2

这是我向场景添加文本并将其居中的方法。

const fontLoader = new FontLoader();

fontLoader.load( “/fonts/droid/droid_sans_bold.typeface.json”， 函数（字体）{ const 几何 = new TextGeometry("Hello World", { 字体： 字体， 尺寸：4， 高度：4， });

  const mesh = new THREE.MeshBasicMaterial({ color: 0xffffff });
  const text = new THREE.Mesh(geometry, mesh);

   // options if necessary to rotate text
  //text.position.set(0, 0.5, 11.5);
  //text.rotation.x = -Math.PI / 2;

  geometry.computeBoundingBox();

  if (geometry.boundingBox) {
    geometry.translate(-geometry.boundingBox.max.x / 2, 0, 0);
  }

  scene.add(text);
}

）；