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,
              ],

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

最后用简单的词语描述它并不容易，如果你想使用外部框架，就需要对该框架进行一些研究。

我对react.js很不熟悉，所以我不会深入研究它，但我想有一些交换“代码块”的规则，以达到同样的目的。

Answer 2

有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 3

你可以在A-Frame中拥有多个场景，但在JavaScript中有一点点破解。看看这个例子： http://curious-electric.com/aframe/scene-switch/

Answer 4

我相信推荐的方式可以导航到不同的VR世界/场景＆＃34;是使用A-Frame＆＃39; link component。

链接组件在体验之间进行连接，并允许在VR网页之间进行遍历。通过事件激活时，链接组件将用户发送到不同的页面，就像正常的网页重定向一样。

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

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文件来创建不同的场景/ VR世界？

5 个答案: