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

Question

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

<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>

我已经尝试添加一个父实体并将动画添加到父实体，但它似乎没有解决它，而是开始在圆形路径中旋转。

Answer 1

似乎 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，但它们似乎只是在真正加载文本网格之前执行。我需要加载它，否则边界框是无限的——这使得偏移计算几乎毫无用处。在我的 fiddle 中，我将代码放入 setTimeout()。

编辑

1) 等待动画效果是个好主意，直到设置了上述计算。您可以定义一个 startEvent 并在重新定位网格后发出它

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

..

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

2) 计算宽度时需要包括比例。这是因为本地 space 大小现在不同了：

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

检查一下 here。

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

AFRAME text-geometry component rotation from center?

text

rotation

aframe