<html>

<head>
  <title> A-Frame Sky</title>

  <!--  --------- IMPORTED LIBRARIES  ------>
  

  <script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>

</head>

<body>

  <a-scene>
    <!-- Creating scene -->


    <!--  --------- ASSETS  --------- -->

    <!-- Asset links. -->
    <a-assets>

      <img id="background_inside_house" crossorigin="anonymous" src="https://cdn.glitch.com/e6225ccd-c32e-4cf8-b039-e78814a8cb78%2Fbg-3.jpg?1498128817274">
      

    </a-assets>


    <!--  --------- SKY  --------- -->

    <!--The sky is the horizon and surronding enviroment if u don't create a ground
  It can be a color or an image. Usually it's a 360 equirectangular image

 Since you can only have 1 sky at a time, to see the other possibilities, comment the sky bellow and uncomment one of the others.
 For goof and free 360º images, visit: https://www.flickr.com/search/?text=equirectangular&license=4%2C5%2C9%2C10

Sky documentation: https://aframe.io/docs/0.6.0/primitives/a-sky.html-->


    <a-sky  id="background-img" src="#background_inside_house"></a-sky>

    <!--   If you insert both options the sky will have a color filter
The radius attribute will make the image trippy, a curious finding by A-Frame contributor Cwervo-->
    <!--    <a-sky  id="background-img" src="#background_inside_house" color="red" radius=10 ></a-sky> -->

    <!--  If you insert only color and no src, the sky will be the chosen color -->
    <!--  <a-sky  id="background-img" color="red" ></a-sky> -->

  
  </a-scene>
  <!-- Closing scene -->
</body>

</html>
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.