Aframe：使用 API 响应在 Aframe 中绑定异步数据

Question

我想知道我们是否可以在 Aframe 场景中集成 API 响应。例如，当我将光标移到实体对象上时，我想获取有关它的信息。我知道我们可以用 a-text 维护这些静态数据，但我正在寻找基于 AJAX 的集成，以便我可以 add/edit 来自后端的数据。

请指教

Answer 1

您可以使用自定义组件，它会抓取文本并将其用作 <a-text> 值。在事件监听器中执行 AJAX 调用（如点击或任何其他事件）：

AFRAME.registerComponent("foo", {
  init: function() {
    let self = this.el
    this.el.addEventListener("click", (e)=>{
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          self.children[0].setAttribute("value", this.responseText;
        }
      };
      xhttp.open("GET", "ajax_info.txt", true);
      xhttp.send();
    })
  }
})

在这样的设置中：

<a-entity foo>
  <a-text></a-text>
</a-entity>

类似于this, exept with the ajax call, i took the ajax code from w3schools。

Aframe：使用 API 响应在 Aframe 中绑定异步数据

Aframe: Binding Async data within Aframe using API response

ajax

webvr

aframe