如何加载不同的 HTML 文件来创建不同的 scenes/VR 世界？

Question

我正在尝试创建一个 webvr 应用程序，人们可以在其中进入然后导航到不同的 VR worlds/scenes。我了解到我不能在一个帧中拥有多个场景，所以我想知道是否可以加载 HTML 文件来创建不同的场景。

基本上，index.html 将从 main.html 文件加载其内容（例如）。也许这可以用 javascript 来完成？不太确定如何让它在 aframe 中工作。

Answer 1

在 JavaScript 中稍加改动，您就可以在 A-Frame 中拥有多个场景。看这个例子： http://curious-electric.com/aframe/scene-switch/

Answer 2

实际上加载外部 html 数据是一项有点复杂的任务。
虽然您可以在主 index.html 文件中定义的场景之间切换，使它们可见 = true/false，但可以通过多种方式从其他地方加载内容，我将介绍其中两种，尽管许多框架都启用加载外部 html 数据：

JS/JQuery
我设法制造了一个小故障，其中场景元素是从 scene1.html 文件加载的：https://glitch.com/edit/#!/jungle-aardvark?path=index.html:14:34
我试图找到最优化的 way，但只有这个使用 jquery 的方法给了我一些结果。

基本上我用的是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();

框架，例如ANGULAR
Angular enables You switching entire html+css+typescript 'packs', and swap them via routing，或者只是切换可见的 html 元素。我在 plunker 上做了一些简单的实验。如果你检查一下，在 app.ts:

中有一些负责路由的东西

您需要导入路由和您的场景：

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';

然后你可以定义路径

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

并声明路由，及场景：

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

在我链接的 plunker 上查看。以上元素负责交换场景

最后不好一言以蔽之，如果要使用外部框架，就需要研究一下那个框架了。

我对 react.js 很陌生，所以我不会深入探讨，但我想有一些规则可以交换 'chunks' 代码，以实现相同的目的。

Answer 3

我认为 "navigate to different VR worlds/scenes" 的推荐方法是使用 A-Frame 的 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.

this blog post. There is an example in A-Frame's core repo 中提供了更多信息。

Answer 4

有 A-Frame Template Component

模板（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>

场景（index.html）

<a-scene>
  <a-entity template="src: boxes.html"
            data-box1color="red" data-box2color="green" data-box3color="blue"></a-entity>
</a-scene>

Answer 5

你可以有一个场景，然后将相机移动到不同的部分，这会产生你在屏幕之间移动的想法。对于我的示例，当您单击出口 div 时，它会将相机位置移动到 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')
  });

如何加载不同的 HTML 文件来创建不同的 scenes/VR 世界？

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

html

javascript

virtual-reality

aframe