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 !