在 Aurelia 框架应用程序中导入 aframe a-scene 作为模板时,我目前遇到了一个问题。
我试图在相关的 stackoverflow 问题上找到帮助,但没有一个将点连接在一起:因为 AFrame 基于 Three.js,这是我能找到的最相似的问题,但尚未得到解答 ( https://github.com/mrdoob/three.js/issues/3091 ) .
我在我的home.html文件中集成了AFrame场景如下:
<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 导入 aframe 否则场景不会被渲染:
导入 'aframe';
现在看来这个导入覆盖了一些 Bootstrap 滚动功能,但我不明白为什么。
注意:谷歌 Material 设计精简版和 aurelia Material 插件 (https://github.com/genadis/aurelia-mdl) 也发生了一些意外行为,在这种情况下,AFrame 场景被缩放但页面滚动仍然有效。
这里是完整代码的github项目:https://github.com/dnhyde/aframe-aurelia.git
最佳答案
使用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>
关于javascript - 当导入为 HTML 模板时,Frame Web VR 可防止从 Bootstrap 滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42855228/