A-frame : how to change image using javascript

Question

What JavaScript is needed to change the image? I can't work out how to target them:

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

What do you mean by "image" in this question? From your example code, it looks like you're only working with an `.obj` geometry file and `.mtl` material library file. — cuervoo, Jan 23 '17 at 06:19
What do you mean by changing the image? Replacing the image with another? — Don McCurdy, Jan 23 '17 at 16:36
Which image do you want to change? I mean it could be as simple as: document.getElementById("my-imge").src = "/images/some-image.png"; — Kickass, Jan 24 '17 at 00:07

score 1 · Answer 1 · answered Jan 23 '17 at 19:45

1

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

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

answered Jan 23 '17 at 19:45

ngokevin

12,980
2
38
84

Cause im trying to work around to make moving images, so im trying to find a way to change image. eg... timeout{ image change } – InsXghT Jan 24 '17 at 01:47

score 0 · Answer 2 · answered Jan 25 '21 at 18:29

First I would like to use A-Frame component to make sure the corresponding element is loaded, and change the src value to any id that is stored in assets to change the image dynamically assuming the component name will be "my-image-comp" by doing so:

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);
  },
});

Here is the html, after I delete some elements to simplify:

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

A-frame : how to change image using javascript

2 Answers2