Hiding an embedded aframe scene

Question

I want to programmatically hide and show my embedded aframe scene. The scene is hidden when the website is loaded, however I only get it to work with a delay like this:

window.onload = function () {
setTimeout(function() { document.getElementById("scene-page").setAttribute("hidden", ""); }, 500);
}

When I don't add this delay, the scene remains hidden, even after setting it to 'visible' again. Specifically, the size of the canvas seems to be resized to 0px:

<canvas class="a-canvas a-grab-cursor" data-aframe-canvas="true" width="0" height="0" style="width: 0px; height: 0px;"></canvas>

The only way to make it visible then is to resize the browser window, which then seems to resize the canvas.

Is there a better way to hide the scene without the delay?

Answer 1

From what i see (posts like here , or here ), if you set display: none before the entire canvas loads, the canvas / renderer / camera properties won't set up properly.

I tried waiting for the a-scene 's loaded / renderstart event, window.onload , and the internal entities, still it seems to mess up the canvas settings.

The reason why it's working when you resize the window is because the scene has a listener for resize which updates all of these accordingly with the canvas width / height . I'm not sure if its possible to call the resize manually.

Check it out here -> just search for this.resize , there are 3 hits, one in the a-scene .

---

It seems easier and safer to place a blank <div> if front of the a-frame canvas with a fixed position, which will be switched from display: none to block . live fiddle here !

Once the scene is up and running, You can toggle its display all you want though! live fiddle here !