当导入为 HTML 模板时，Frame Web VR 会阻止从 bootstrap 滚动

Question

我目前在将 aframe a-scene 作为模板导入 Aurelia 框架应用程序时遇到问题。

我试图找到有关 Whosebug 问题的帮助，但其中 none 将点连接在一起：因为 AFrame 基于 Three.js 这是我能找到的最相似的问题，但是它有未得到答复 (https://github.com/mrdoob/three.js/issues/3091)。

我将 AFrame 场景集成到我的 home.html 文件中，如下所示：

<template>
    <a-scene>
        <a-sphere position="0 1.25 -1" radius="1.25" color="#EF2D5E"></a-sphere>

        <a-sky color="#000000"></a-sky>
        <a-entity position="0 0 3.8">
            <a-camera></a-camera>
        </a-entity>
    </a-scene>
</template>

从我的 home.js 导入了帧，否则场景不会被渲染： import 'aframe';

现在似乎这个导入覆盖了一些 bootstrap 滚动功能，但我不明白为什么。

注意：Google material design lite 和 aurelia material 插件 (https://github.com/genadis/aurelia-mdl) 也发生了一些意想不到的行为，在这种情况下，AFrame 场景被缩放但页面滚动仍然有效。

这里是 github 完整代码的项目：https://github.com/dnhyde/aframe-aurelia.git

Answer 1

使用embedded组件移除A-Frame全屏和position: fixed样式。 https://aframe.io/docs/master/components/embedded.html

<style>a-scene { width: 600px; height: 300px; }></style>

<body>
  <!-- ... -->
    <a-scene embedded></a-scene>
  <!-- ... -->
</body>

当导入为 HTML 模板时，Frame Web VR 会阻止从 bootstrap 滚动

A Frame Web VR prevents scrolling from bootstrap when imported as HTML template

html

javascript

twitter-bootstrap

aurelia

aframe