Изменение текстуры материала с идентификатором javascript при нажатии кнопки

#javascript #html #aframe

#javascript #HTML #aframe

Вопрос:

Итак, у меня есть следующий код:

  function pictureChange()
  {
   document.getElementById("theImage").src="img02.png";
  }  
 <a-mixin id="voxel"
         geometry="primitive: box; height: 0.6; width: 0.6; depth: 0.6"
         material="id: theImage; src: Box.jpg; color: #696969; roughness: 1; metalness: 0"     
         snap="offset: 0.4 0.4 0.4; snap: 0.6 0.6 0.6"
      ></a-mixin>  

И я хотел использовать идентификатор «theImage», чтобы изменить URL изображения на что-то другое, но CSS3 в Aframe работает по-другому, поэтому я не могу заставить его работать должным образом. Если у кого-нибудь есть какие-либо идеи, которые могли бы мне помочь, я был бы очень признателен. Спасибо.

PS: чтобы уточнить, я хочу каким-то образом изменить URL нажатием кнопки.

Ответ №1:

Идентификатор относится к объекту или активу, а не к материалу. Попробуйте установить изображение на микшере:

   var mixinEl = document.getElementById('voxel');
  mixinEl.setAttribute('material','src: #super');
  

Пример: https://glitch.com/edit /#!/swamp-sparrow?path=index.html:1:0

Комментарии:

1. Спасибо. Я попробую это.

2. Обновлен сбой при добавлении кнопки. Если вы отметите ответ как правильный, он будет оценен по достоинству.

3. Вот так. Большое вам спасибо. Это сработало для того, что мне было нужно. Однако, еще один вопрос, где у него есть прослушиватель событий, как бы вы заставили его изменить текстуру, нажав пробел вместо щелчка? Это не важно, просто то, что я хотел бы научиться делать.