A-frame: как изменить изображение с помощью javascript

Какой 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.-->

javascript aframe webvr
person InsXghT    schedule 23.01.2017    source источник
comment
Что вы подразумеваете под изображением в этом вопросе? Судя по вашему примеру кода, вы работаете только с .obj файлом геометрии и .mtl файлом библиотеки материалов.   -  person cuervoo    schedule 23.01.2017
comment
Что вы имеете в виду под изменением изображения? Заменить изображение на другое?   -  person Don McCurdy    schedule 23.01.2017
comment
Какое изображение вы хотите изменить? Я имею в виду, что это может быть очень просто: document.getElementById (my-imge) .src = /images/some-image.png;   -  person Kickass    schedule 24.01.2017

Ответы (2)


arrow_upward
1
arrow_downward 

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

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

person ngokevin    schedule 23.01.2017
comment
Потому что я пытаюсь обойтись без движущихся изображений, поэтому я пытаюсь найти способ изменить изображение. например ... тайм-аут {изменение изображения} - person InsXghT; 24.01.2017

arrow_upward
0
arrow_downward

Сначала я хотел бы использовать компонент A-Frame, чтобы убедиться, что соответствующий элемент загружен, и изменить значение src на любой идентификатор, который хранится в активах, чтобы динамически изменять изображение, предполагая, что имя компонента будет 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>
person Cokiledelante    schedule 25.01.2021