AFRAME文本几何组件从中心旋转？

Posted 2021-05-06

有没有办法将枢轴点设置在中心？我正在使用文本几何组件，它从一个角落旋转。我想让文本从中心旋转。

<a-entity animation="property: rotation; dur: 5000;to: 0 360 0;loop:true;easing:linear" position="0 4 -3" scale="0.6 1.2 1" text-geometry="value: MultiMedia; font: #dawningFont; bevelEnabled: true; bevelSize: 0.1; bevelThickness: 0.1; curveSegments: 1; size: 1.5; height: 0.5;" material="color:yellow; metalness:0.9; roughness: 0.05; sphericalEnvMap: #chrome;"></a-entity>

我尝试添加父实体并将动画添加到父实体但它似乎没有修复它，而是开始在圆路径中旋转。

答案

似乎text-geometry组件没有offsetish属性（来源here）

我会像这样解决它：加载文本网格后 - 抓住它并手动提供偏移量。

1）你可以很容易地抓住网格：

let mesh = this.el.getObject3D('mesh');

2）计算偏移量 - 从边界框获取宽度。

let bbox = new THREE.Box3().setFromObject(this.el.object3D);
let offset = (bbox.min.x - bbox.max.x) / 2 
mesh.position.set(offset, 0, 0)

你可以看看here。

---

现在我有一个主要问题 - 也许我不知道什么 - 但是一旦文本网格被加载就没有发出事件。我尝试了loaded或window/document.onload，但它们似乎在文本网格被真正加载之前执行。我需要加载，否则边界框是无限的 - 使偏移计算几乎无用。在我的小提琴我把代码扔进了setTimeout()。

---

编辑

1）最好等待动画，直到设置上述计算。你可以定义一个startEvent并在重新定位网格后发出它

...
mesh.position.set()
this.el.emit("go")

..

<a-entity animation="startEvents: go"></a-entity>

2）计算宽度时需要包括刻度。这是因为本地空间大小现在不同了：

let xscale = this.el.getAttribute('scale').x
let offset = ((bbox.min.x - bbox.max.x) / xscale ) / 2 
mesh.position.set(offset, 0, 0)

看看here。