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
– cuervoo, Commented Jan 23, 2017 at 6:19
What do you mean by changing the image? Replacing the image with another? — Don McCurdy
– Don McCurdy, Commented Jan 23, 2017 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
– Kickass, Commented Jan 24, 2017 at 0:07

ngokevin · Accepted Answer · 2017-01-23 19:45:40Z

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, 2017 at 19:45

ngokevin

13.3k5 gold badges46 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

InsXghT Over a year ago

Cause im trying to work around to make moving images, so im trying to find a way to change image. eg... timeout{ image change }

Cokiledelante · Accepted Answer · 2021-01-25 18:29:23Z

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>

Collectives™ on Stack Overflow

A-frame : how to change image using javascript

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related