如何向在 A-Frame 中连续运行的场景添加滴答、计时器、时钟或行为？

Question

我正在尝试编写时钟或计时器。

function ttimer(){
  var options = {
    hour: 'numeric',
    minute: 'numeric',
    second: 'numeric'
  };
  var el_ttimer=document.querySelector('#a-ttimer');
  var d = new Date();
  el_ttimer.setAttribute('text', 'text: '+d.toLocaleString("ru", options)+'; font: Droid Sans Mono; size: .77;');
}
setInterval(ttimer, 1000);

<a-entity a-ttimer position="-12 0 -5" id="a-ttimer"></a-entity>

如何流畅更新文字？例如定时器。

如何在场景中顺利创建新图元？

你有最佳实践吗？

Answer 1

您可以编写一个具有 tick 处理程序的组件，它将挂接到场景的渲染循环中。 https://aframe.io/docs/0.3.0/core/component.html#tick-time-timedelta

AFRAME.registerComponent('timertext', {
  tick: function (time, timeDelta) {
    // ...
    el_ttimer.setAttribute('text', 'text: '+ d.toLocaleString("ru", options) + '; font: Droid Sans Mono; size: .77;');
  }
});

<a-entity timertext text></a-entity>

如果你想创建一个新的原语，使用AFRAME.registerPrimitive。 https://aframe.io/docs/0.3.0/primitives/#register-a-primitive

AFRAME.registerPrimitive('a-ttimer', {
  defaultComponents: {
    timertext: {},
    text: {}
  },

  mappings: {
    text: 'text.text'
  }
});

<a-ttimer text="0"></a-ttimer>

如何向在 A-Frame 中连续运行的场景添加滴答、计时器、时钟或行为？

How do I add a tick, timer, clock, or behavior to my scene that runs continuously in A-Frame?

aframe