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:

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

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.