Aframe Strange Trigger Issue

Изменить:-> нашел, что вызывает мою проблему https://github.com/aframevr/aframe/issues/3297 необходимо исправить это

("У меня странная проблема. У меня есть две сцены. Когда я нажимаю кнопку, вы переключаетесь на другую сцену, и появляется другая кнопка, которая возвращает вас к первой сцене. Я активирую кнопку щелчком по ней или наблюдателем". (fuser). Теперь моя проблема: когда я смотрю на кнопку 1 и меняю сцену, а затем нажимаю на кнопку 2, чтобы вернуться, кнопка 1 уже сработала (поэтому она снова меняет сцену). Если я просто смотрю на кнопки или просто нажимаю на них все работает нормально, только когда я смотрю на что-то, и после этого щелчка не получается. Нужна помощь, вот код:')

<!-----scene1------------------------------> 
  <a-entity id="browser_scene" visible="true">
    <a-entity id="scene1" visible="true">
<!--Icons-->
    <a-image id="introid" src="#introicon" position="-20 12 -13" width="9" height="9" rotation="0 75 0" transparent="true" onclick="playscene2()" event-set__enter="_event: mouseenter; color: #33ccff"
           event-set__leave="_event: mouseleave; color: #00000"></a-image>
</a-entity>

<!-----scene2-------------------------------> 
    <a-entity id="scene2" visible="false">
<!--Videosphere (intro)-->
    <a-videosphere src="#intro"></a-videosphere>                       
<!--Icons-->
    <a-image id="haus" src="#home" position="-5 -6 -1.75" width="2" height="2" rotation="35 -90 -180" transparent="true" onclick="playscene1()" event-set__enter="_event: mouseenter; color: #33ccff"
           event-set__leave="_event: mouseleave; color: #00000"></a-image>
    </a-entity>


function playscene1() {

document.getElementById('scene1').setAttribute('visible', 'true')
document.getElementById('scene2').setAttribute('visible', 'false')
document.getElementById('haus').setAttribute('visible', 'false')

var videoEl_1 = document.querySelector('#intro');

skyon()
document.querySelector('#intro').pause();
document.querySelector('#intro').currentTime = 0;

}
</script>


function playscene2() {
document.getElementById('scene1').setAttribute('visible', 'false')
document.getElementById('scene2').setAttribute('visible', 'true')
document.getElementById('haus').setAttribute('visible', 'true')

var videoEl_1 = document.querySelector('#intro'); 

document.querySelector('#intro').pause();
document.querySelector('#intro').currentTime = 0;

skyout()
videoEl_1.play();

document.getElementById('intro').addEventListener('ended',myHandler_1,false);
function myHandler_1(e) {
    if(!e) { e = window.event; }
    playscene3()
  }
}
</script>

<!--camera-->
<a-entity foo rotation="0 90 0">
  <a-camera user-height="0" look-controls>
    <a-cursor fuse="true" fusetimeout="2000"
      position="0 0 -0.1"
      geometry="primitive: ring;
      radiusInner: 0.002;
      radiusOuter: 0.003"
      material="color: red; shader: flat">
      <a-animation attribute="scale"
                      to="3 3 3"
                      dur="2000"
                      begin="cursor-fusing"
                      fill="backwards"
                      easing="linear">
      </a-animation>
   </a-cursor>
    <a-entity id="redcircle" position="0 0 -0.1" 
            geometry="primitive: ring;
            radiusInner: 0.007;
            radiusOuter: 0.0077"
            material="color: red; opacity: 0.25; shader: flat"></a-entity>
 </a-camera>  
</a-entity>
Источник

4 ответа

Я бы рекомендовал использовать атрибут или компонент данных, а не класс, так как они автоматически добавляются / удаляются в / из списка объектов raycaster:

<a-cursor raycaster="objects: [data-clickable];" ... ></a-cursor>

<a-entity id="button" data-clickable ... ></a-entity>

Затем просто добавьте и удалите это с помощью:

buttonEl.setAttribute('data-clickable', '');

buttonEl.removeAttribute('data-clickable');

Используя классы, вам нужно обновить список объектов raycaster вручную raycasterEl.components.raycaster.refreshObjects(), Это не требуется при использовании метода выше.

Источник

Эта проблема задокументирована -> https://github.com/aframevr/aframe/issues/3297. Обходной путь: если вы что-то нажмете, переместите всю сцену и камеру на несколько градусов

Источник

Я знаю использовать обходной путь: я отключаю курсор и включаю его только в режиме VR. Так что проблема не появилась, но другой вывод был бы лучше.

С этим я отключаю свой курсор (также установка видима на false):

document.getElementById('cursor').setAttribute('raycaster', 'objects: .notclickable');
Источник

Обычно сложнее отлаживать, если вы просто показываете части своего кода. Но если я правильно понимаю, вы хотите иметь возможность переключаться между псевдо-сценами с помощью предохранителя взгляда.

Итак, вот рабочий пример с псевдо-сценами, которые, надеюсь, помогут в вашем случае использования:

https://curious-electric.com/w/experiments/aframe/panorama-compass-click/

Источник
Другие вопросы по тегам