Manually re-render / reload a-frame

Question

I have an a-scene embedded into a div container like so:

<div style="display:none">
    <a-scene embedded>
      <a-sky src="img/vr/act1.jpg" rotation="0 -130 0"></a-sky>
    </a-scene>
</div>

in css:

 a-scene { display: block; width: 500px !important; height: 500px !important; }

But the problem is, because the div is hidden at the start, when i unhide it, the a-scene's contents width and height is 0,0. Im trying to reload the aframe tied to a click event when the div container unhides itself.

I looked at the docs and there is the reload method, and i tried this but its not working:

document.querySelector('a-scene').reload();

i get the following error in the console :

Uncaught TypeError: document.querySelector(...).reload is not a function
at <anonymous>:1:35

strangely, enterVR , which is also listed as a method in the docs works with the same syntax. So if i were to do enterVR and exitVR in succession, the a-frame will actually display as what i want it to

So im not sure what im doing wrong.

using a-frame 0.7

Answer 1

This worked for me:

location.reload(true);
scene.enterVR();