5

I'm currently facing an issue when importing aframe a-scene as a template in an Aurelia framework application.

I tried to found help on related stackoverflow questions but none of them connects the dots together: since AFrame is based on Three.js this is the most similar issue I could find, however it has not been answered (https://github.com/mrdoob/three.js/issues/3091).

I integrated the AFrame scene in my home.html file as follows:

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

imported aframe from my home.js otherwise the scene is not rendered: import 'aframe';

Now it seems that this import overrides some bootstrap scrolling functionality but I cannot understand why.

Note: some unexpected behaviors also happened with Google material design lite and aurelia material plugin (https://github.com/genadis/aurelia-mdl) where in this case the AFrame scene is zoomed but the page-scroll still works.

Here the github project for complete code: https://github.com/dnhyde/aframe-aurelia.git

dnhyde
  • 1,265
  • 2
  • 14
  • 24

1 Answers1

4

Use the embedded component to remove A-Frame full screen and position: fixed styles. https://aframe.io/docs/master/components/embedded.html

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

<body>
  <!-- ... -->
    <a-scene embedded></a-scene>
  <!-- ... -->
</body>
ngokevin
  • 12,980
  • 2
  • 38
  • 84
  • Thanks a lot for the answer! Now bootstrap works fine, however the material-design-lite plugin for aurelia (https://github.com/arabsight/aurelia-mdl-plugin) still causes issues in the visualization of A-Frame content. If you have time and can provide any clue I updated the code on git. Thanks! – dnhyde Mar 20 '17 at 10:25