如何动态更改 <a-text> 的文本值？

Question

我想在A-Frame中制作一个动态数字时钟。我正在使用文本元素，但无法通过在 JS 中设置属性来更改其文本。我仍然可以更改其他属性，例如颜色。

html:

...
<a-text id="clock" clock-text value="00:00" position="2.45 0 0.01" color="#FFFFFF" align="right"></a-text>
...

js:

...
AFRAME.registerComponent('clock-text', {
  init: function() {
    var el = this.el;
    el.setAttribute('value', '20:30');
    el.setAttribute('color', 'black');
  },
  update: function() {
    el.setAttribute('value', '20:30');
  }
});

您可以在 the jsfiddle I'm using 中获取完整代码。

Answer 1

所以我认为这是一个竞争条件问题，因为在 a-text 中实际上进行了两次更新，当它初始化时和当它接收到新值时（导致组件 update称为）。

文本组件确实发出了一个名为 'textfontset' when updateFont gets called from its init 的事件。

使用该事件，您可以在该事件发出后启动时钟

AFRAME.registerComponent('clock-text', {
  init: function() {
    var el = this.el;
    this.ready = false;
      el.addEventListener('textfontset', function() {
      this.ready = true;
    }.bind(this));
  },
  tick: function() {
    var el = this.el;
    if (!this.ready) {
      return;
    }
    el.setAttribute('value', '20:30');
  }
});

https://jsfiddle.net/xcofjjm9/1/

如何动态更改 <a-text> 的文本值？

How to change dynamically the text value of an <a-text>?

aframe

html:

js: