How to detect when a scene is loaded in A-Frame?

Question

Is there some event that is triggered when A-Frame is fully loaded? Right now I’ve managed to get my document.querySelector(".a-enter-vr-button") working, but only after placing it inside a setTimeout function, which seems a bit of a makeshift solution. So if anyone has any way of making a js script fire after A-Frame has fully loaded please let me know!

Answer 1

You can use the loaded event:

document.querySelector('a-scene').addEventListener('loaded', function () {...})

But we recommend using components so you don't have to handle waiting on events for things to get set up:

https://aframe.io/docs/0.4.0/guides/using-javascript-and-dom-apis.html#where-to-place-javascript-code-for-a-frame

AFRAME.registerComponent('log', {
  schema: {type: 'string'},
  init: function () {
    var stringToLog = this.data;
    console.log(stringToLog);
  }
});

Then to use the component from HTML:

<a-scene log="Hello, Scene!">
  <a-box log="Hello, Box!"></a-box>
</a-scene>