0

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.

dianadf
  • 73
  • 1
  • 9

5 Answers5

2

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.

Piotr Adam Milewski
  • 14,150
  • 3
  • 21
  • 42
  • The glitch you created does work in fetching the scene's elements from another html. However, for more complex scenes with assets for example it doesn't work. I'm checking your answer as correct since you did answer the "how to load different html..." question. However, @dirkk0 's example is what ended up working for me. Thanks for the help! :) – dianadf Jul 26 '17 at 21:40
  • @dianadfonseca depends how complex You want :) it works with assets, and registered components here: https://whimsical-coyote.glitch.me/, although the time needed to load the scene is ridiculous. Swapping single entities ( containing entire areas ) is a better idea, as You can have a consistent background when swapping stuff. On the other hand, while using angular it doesn't work so bad :) – Piotr Adam Milewski Jul 26 '17 at 22:13
2

There's the A-Frame Template Component

Template (boxes.html):

  <a-box color="${box1color}" position="-1 0 -5"></a-box>
  <a-box color="${box2color}" position="0 1 -5"></a-box>
  <a-box color="${box3color}" position="1 0 -5"></a-box>

Scene (index.html)

<a-scene>
  <a-entity template="src: boxes.html"
            data-box1color="red" data-box2color="green" data-box3color="blue"></a-entity>
</a-scene>
ngokevin
  • 12,980
  • 2
  • 38
  • 84
1

I believe the recommended way to "navigate to different VR worlds/scenes" is to use A-Frame's link component.

The link component connects between experiences and allows for traversing between VR web pages. When activated via an event, the link component sends the user to a different page, just like a normal web page redirect.

More information is available in this blog post. There is an example in A-Frame's core repo.

bryik
  • 146
  • 1
  • 9
  • I think this is the way to go long-term and it looks great, but it sounded like it was only supported in desktop Firefox for now https://aframe.io/blog/aframe-v0.6.0/ – TimHayes Aug 02 '17 at 20:19
0

You can have multiple scenes in A-Frame with a little hack in JavaScript. Look at this example: http://curious-electric.com/aframe/scene-switch/

dirkk0
  • 2,460
  • 28
  • 34
  • Yes! This is exactly what I mean. I thought it was not possible from what I've been reading in forums. Well, seems to be possible now. Could you provide the js code? Or where I could find it? – dianadf Jul 26 '17 at 18:35
  • Actually nevermind, I got it. Here's the js code if someone needs it: `function setScene() { // console.log('kkk') document.getElementById('scene2').setAttribute('visible', 'false') document.getElementById('scene1').setAttribute('visible', 'true') // document.querySelector('#ambient1').emit('aaa'); // document.querySelector('#fading-cube').emit('fade'); }` Thanks for the help! – dianadf Jul 26 '17 at 21:34
0

You can have a single a-scene and then move the camera around to different parts, this creates the idea that you are moving between screens. For my example when you click on the exit div it moves the camera position to nextScene.

<a-entity id="camera">
 <a-animation attribute="position" begin="nextScene" to="140 -33.6 8.589" dur="0"></a-animation> 
</a-entity> 

document.querySelector('#exit').addEventListener('click', function () {
document.querySelector('#camera').emit('nextScene')
  });
Terri McKee
  • 53
  • 6