dianadfonseca dianadfonseca - 1 year ago 58
HTML Question

How to load different HTML file to create different scenes/VR worlds?

I'm trying to create a webvr application where one can go in and then be able to navigate to different VR worlds/scenes. I've learned that I cannot have more than one scene in aframe, so I was wondering if it's possible to load HTML files to create the different scenes.

Basically, an index.html that would load its content from main.html file (for example).
Perhaps this can be done with javascript? Not quite sure how to make it work in aframe.

Answer Source

Actually loading external html data is a bit complex task.
Although You can switch between scenes defined in Your main index.html file making them visible = true/false, loading content from elsewhere can be achieved in multiple ways, I'll present two of them, even though many frameworks enable loading external html data:

JS/JQuery
I've managed to make a glitch, where the scene elements are loaded from a scene1.html file: https://glitch.com/edit/#!/jungle-aardvark?path=index.html:14:34
I tried to find the most optimal way, but only this one using jquery managed to give me some results.

Basically I used a XMLHttpRequest();

var xhr= new XMLHttpRequest();
xhr.open('GET', 'scene1.html', true);
xhr.onreadystatechange= function() {
  if (this.readyState!==4) return;
  if (this.status!==200) return; // or whatever error handling you want
  document.querySelector('body').innerHTML= this.responseText;
};
xhr.send();

Frameworks, like ANGULAR
Angular enables You switching entire html+css+typescript 'packs', and swap them via routing, or just switching the visible html elements. I've done some simple experiments on plunker. If you check it out, there is a couple things responsible for routing in the app.ts:

You need to import routing and Your scenes:

import { aScene } from './a-scene.comp.ts';
import { aScenePhoto } from './a-scene.photo.comp.ts';
import { mainPanel } from './mainpanel.comp.ts';
import {Routes,RouterModule} from'@angular/router';

then You can define the paths

const routes: Routes = [
{path: 'simple',component:aScene},
{path: 'photo',component:aScenePhoto},
{path: '',component:mainPanel},
{path: 'photo/:photoAsset',component:aScenePhoto},

And declare routing, and the scenes:

imports: [ BrowserModule,
          FormsModule,
          routing],
declarations: [ App,
              aScene,
              aScenePhoto,
              mainPanel,
              ],

Check it out on my linked plunker. The above elements are responsible for swapping the scenes.

In the end it's not easy do describe it in few words, if You want to use external frameworks, it would require some research about that framework.

I'm quite unfamiliar with react.js, so I won't get into it, yet i guess there are some rules for swapping 'chunks' of code, to achieve the same.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download