Javascript 如何加载不同的HTML文件以创建不同的场景/VR世界？

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

基本上，index.html将从main.html文件加载其内容（例如）。

---

也许这可以通过javascript实现？不太清楚如何使其在A帧中工作。

只要稍微修改一下JavaScript，A帧中就可以有多个场景。 看看这个例子：

---

只要稍微修改一下JavaScript，就可以在A帧中创建多个场景。 看看这个例子：

---

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

JS/JQuery
我设法制造了一个小故障，场景元素是从scene1.html文件加载的：
我试图找到最理想的，但只有这一个使用jquery成功地给了我一些结果

基本上我用的是

框架，如角度
允许您切换整个html+css+typescript“包”，并通过交换它们，或仅切换可见的html元素。 我做了一些简单的实验。如果您查看它，应用程序中的路由有两个方面的原因。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很不熟悉，所以我不想深入了解它，但我想有一些规则可以用来交换代码块，以达到同样的效果。

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

JS/JQuery
我设法制造了一个小故障，场景元素是从scene1.html文件加载的：
我试图找到最理想的，但只有这一个使用jquery成功地给了我一些结果

基本上我用的是

框架，如角度
允许您切换整个html+css+typescript“包”，并通过交换它们，或仅切换可见的html元素。 我做了一些简单的实验。如果您查看它，应用程序中的路由有两个方面的原因。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很不熟悉，所以我不想深入了解它，但我想有一些规则可以用来交换“块”代码，以达到同样的效果。

我认为“导航到不同的虚拟现实世界/场景”的推荐方法是使用A-Frame

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

---

有关更多信息，请访问。有一种方法。

我认为“导航到不同的虚拟现实世界/场景”的推荐方法是使用A帧

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

有关更多信息，请访问。有一个。

有一个

模板（box.html）：

场景（index.html）

这是

模板（box.html）：

场景（index.html）

---

您可以使用单个a-scene，然后将相机移动到不同的部分，这就产生了在屏幕之间移动的想法。例如，当您单击exit 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')
  });

document.querySelector（“#exit”）.addEventListener（'click'，function（）{
document.querySelector（“#camera”）.emit（'nextScene'））
});

您可以使用单个a-scene，然后将相机移动到不同的部分，这就产生了在屏幕之间移动的想法。例如，当您单击exit 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')
  });

document.querySelector（“#exit”）.addEventListener（'click'，function（）{
document.querySelector（“#camera”）.emit（'nextScene'））
});

是！这正是我的意思。从我在论坛上读到的内容来看，这是不可能的。嗯，现在看来是可能的。你能提供js代码吗？或者我在哪里能找到它？其实没关系，我找到了。如果有人需要，这里有js代码：

函数setScene（）{//console.log（'kkk'）document.getElementById（'scene2'）.setAttribute（'visible'，'false'）document.getElementById（'scene1'）.setAttribute（'visible'，'true'）//document querySelector（'#ambient1'）.emit（'aaa'）；//document.querySelector（'dicing cube'）.emit（'fade'）.emit（'fade'））；}

谢谢你的帮助！Y