javascript - 如何加载不同的HTML文件来创建不同的场景/VR世界？

Question

我正在尝试创建一个 webvr 应用程序，人们可以进入该应用程序，然后能够导航到不同的 VR 世界/场景。我了解到，aframe 中不能有多个场景，因此我想知道是否可以加载 HTML 文件来创建不同的场景。

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

Answer 1

实际上加载外部 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使您能够切换整个 html+css+typescript“包”，并通过 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,
              ],

在我的链接插件上查看一下。上述元素负责交换场景。

最终想要用几句话来描述它并不容易，如果你想使用外部框架，就需要对该框架进行一些研究。

我对react.js很不熟悉，所以我不会深入了解它，但我想有一些规则可以交换代码的“ block ”，以实现相同的目的。