我正在努力解决一些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);
}
});
这段代码说明了我遇到的问题
此代码显示了我尝试的解决方案
这段代码(翻译硬编码)更像是我想要的
TextGeometry
和 TextBufferGeometry
都是各自几何类的子类,因此都具有 boundingBox
属性。你只需要计算它,然后得到它的中心点:
textGeo.computeBoundingBox();
const center = textGeo.boundingBox.getCenter(new Vector3());
然后
center
将在局部空间中准确反映几何体的中心。如果您在全局空间中需要它,则需要将包含 textGeo
的网格矩阵应用于 center
向量,例如
textMesh.updateMatrixWorld();
center.applyMatrix4(textMesh.matrixWorld);
这是我向场景添加文本并将其居中的方法。
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);
}
);