How to load a new scene in A-Frame?

Question

I am using A-Frame (JavaScript library). I would like to load a new scene when user clicks into a certain component in the current scene. How can I achieve this?

Answer 1

Check out the A-Frame Template Component. Notably the Swapping Example.

You can either define your separate scenes within script tags or within separate files. Here is an example with script tag templating:

<a-scene>
  <!-- Templates. -->
  <a-assets>
    <script id="scene1" type="text/html">
      <a-box></a-box>
    </script>
    <script id="scene2" type="text/html">
      <a-sphere></a-sphere>
    </script>
  </a-assets>

  <a-entity template="src: #box"></a-entity>
</a-scene>

Then when you want to change your scene, change the src:

<a-entity template="src: #sphere"></a-entity>

Here is an example component to programmatically change template src on interval: https://github.com/ngokevin/kframe/blob/master/components/template/examples/swapping/components/template-looper.js

Mainly it will be el.setAttribute('template', 'src', '#sphere');

For other components that could assist changing the src:

• Event Set Component can help listen to your mouseenter and change the src in response.
• The template component also comes with template-set component that will change the template on an event.