Note: This documentation is for the old 0.3.0 version of A-Frame. Check out the documentation for the current 1.6.0 version

The sky primitive adds a background to a scene or display a 360-degree photo. It is an entity that prescribes a large sphere with the material mapped to the inside.


An equirectangular image as a background:

<img id="sky" src="sky.png">
<a-sky src="#sky"></a-sky>

A plain color as a background:

<a-sky color="#6EBAA7"></a-sky>


Attribute Component Mapping Default Value
color material.color #FFF
metalness material.metalness 0
opacity material.opacity 1
phi-length geometry.phiLength 360
phi-start geometry.phiStart 0
radius geometry.radius 5000
repeat material.repeat None
roughness material.roughness 0.5
segments-height geometry.segmentsHeight 20
segments-width geometry.segmentsWidth 64
shader material.shader flat
side material.side front
src material.src None
theta-length geometry.thetaLength 180
theta-start geometry.thetaStart 0
transparent material.transparent false

Equirectangular Image

In order to be seamless, images should be equirectangular. We can find some sample equirectangular images on Flickr. To take an equirectangular photo, check out this 360-degree photography guide.