<a-sky>

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.

Example

An equirectangular image as a background:

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

A plain color as a background:

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

Attributes

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.