Войдите в VR в Aframe с помощью кнопки взгляда

Я включил vr-mode-ui, и я хотел бы иметь кнопку внутри моей сцены кадра, которая переходит в режим vr щелчком мыши. Моя проблема в том, что мой js дает мне TypeError: document.getElementById (...) имеет значение null, и я не знаю почему!

<script>
AFRAME.registerComponent('enter', {
  init: function () {
  }
}); 

document.getElementById('startbutton').addEventListener("click", (e)=>{
    scene.enterVR(true);
});
</script>

<a-scene id="scene" antialias="true"; cursor="rayOrigin: mouse" vr-mode-ui="enabled: true">

<a-assets>
<img id="startscreen" src="start_overlay.png">  
</a-assets>

<!-- Environment -->

<a-sky id="environment" radius="9" rotation="0 -90 0"; material="shader: flat; src: #xxx"></a-sky>

<!-- Camera + cursor + Startscreen + Interaction-->
<a-entity look-controls>
    <a-entity id="start">
            <a-plane id="startbutton" class="link"; height="0.5"; width="5"; position="0 -0.7 -2" rotation="0 0 0" color="#ffbff0">

            <a-text align="center" value="START" width="10" color="#e143a1"></a-text>
            </a-plane>

    </a-entity>

    <a-entity id="cam" camera rotation="0 0 0" mouse-cursor>                
        <a-cursor id="cursor" color="red"
          animation__click="property: scale; startEvents: click; from: 0.1 0.1 0.1; to: 1 1 1; dur: 150"
          animation__fusing="property: fusing; startEvents: fusing; from: 1 1 1; to: 0.1 0.1 0.1; dur: 1500"
          event-set__1="_event: mouseenter; color: white"
          event-set__2="_event: mouseleave; color: red"
          fuse="true"
          raycaster="objects: .link"></a-cursor>
    </a-entity>

</a-entity>

</a-scene>

Я dont know why my button isnt узнал по js-скрипту!

Может кто-нибудь помочь, пожалуйста! Ура, Можно


javascript button aframe
person Can    schedule 05.09.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Кнопка может отсутствовать в DOM к моменту выполнения кода. Либо:
1) вставьте код в компонент AFRAME,
2) поместите код после тела HTML, или
3) поместите его в обратный вызов window.onload:

window.onload = function() {
  doSomething();
};

Кроме того, как вы можете видеть в документации, правильный метод - вызвать enterVR() или exitVR() в элементе сцены. Убедитесь, что ссылка scene, которую вы используете, действительно содержит элемент сцены.

person Piotr Adam Milewski    schedule 05.09.2018
comment
также ознакомьтесь с этим ответ - person Piotr Adam Milewski; 05.09.2018