Enter VR in Aframe via eye-gazing button

Question

I enabled the vr-mode-ui and I would like to have a button inside my aframe scene which enters vr mode by click. My problem is my js gives me a TypeError: document.getElementById(...) is null and I don`t know why!

<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>

I dont know why my button isnt recognized by the js-script!

Could someone help, please! Cheers, Can

score 0 · Accepted Answer · answered Sep 05 '18 at 15:42

0

The button may not be present in the DOM by the time the code is executed. Either :
1) throw the code into a AFRAME component,
2) place the code after the HTML body, or
3) place it in a window.onload callback:

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

Also, as you can see in the docs, the proper method is to call enterVR(), or exitVR() on the scene element. Make sure the scene reference you use actually holds the scene element.

answered Sep 05 '18 at 15:42

Piotr Adam Milewski

14,150
3
21
42

also check out [this](https://stackoverflow.com/questions/9899372/pure-javascript-equivalent-of-jquerys-ready-how-to-call-a-function-when-t) anwser – Piotr Adam Milewski Sep 05 '18 at 15:48

Enter VR in Aframe via eye-gazing button

1 Answers1