A-frame：如何使用javascript更改图像

Question

更改图像需要什么 JavaScript？ 我不知道如何定位他们：

<a-scene stats>
<a-sky src="../1/img/2.jpg"></a-sky>
  <a-assets>
    <img id="my-image" src="../1/img/bear.png" >
    <img id="bear2" src="../1/img/bear.png" >
    <img id="bear3" src="../1/img/bear.png" >
  </a-assets>
  <!-- Using the asset management system. -->
  <a-image src="#my-image" width="10" height="10" position="-5 1 -7" rotation="0 10 0"></a-image>
  <a-image src="#bear2" width="10" height="10" position="5 1 -5" rotation="0 -60 0"></a-image>
  <a-image src="#bear3" width="150" height="150" position="-45 2 100"></a-image>
  <!-- Defining the URL inline. Not recommended but more comfortable for web developers.-->

Answer 1

document.querySelector('#my-image').setAttribute('src', 'foo.jpg')

https://aframe.io/docs/0.4.0/guides/using-javascript-and-dom-apis.html

Answer 2

首先，我想使用 A-Frame 组件来确保加载了相应的元素，并将 src 值更改为存储在资产中的任何 id 以动态更改图像，假设组件名称为“my-image-comp”通过这样做：

AFRAME.registerComponent("my-image-comp", {
  init: function () {
    this.a_image = document.querySelector("a-image");
    setTimeout(() => {
      this.a_image.setAttribute("src", "#my-image-next");
      this.a_image.components.material.flushToDOM(true);
    }, 5000);
  },
});

这是html，在我删除了一些元素以简化之后：

  <a-assets>
    <img id="my-image" src="../1/img/bear.png" >
    <img id="my-image-next" src="../1/img/bear-next.png" >
  </a-assets>
  <a-image
    my-image-comp
    src="#my-image"
    width="10"
    height="10"
    position="-5 1 -7"
    rotation="0 10 0"
  ></a-image>