The sky primitive adds a background color or 360° image to a scene. A sky is a large sphere with a color or texture 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	500
repeat	material.repeat	None
roughness	material.roughness	0.5
segments-height	geometry.segmentsHeight	32
segments-width	geometry.segmentsWidth	64
shader	material.shader	flat
side	material.side	back
src	material.src	None
theta-length	geometry.thetaLength	180
theta-start	geometry.thetaStart	0
transparent	material.transparent	false

Equirectangular Image

To be seamless, images should be equirectangular (opens new window). We can find some sample equirectangular images on Flickr (opens new window). To take an equirectangular photo, check out this 360-degree photography guide (opens new window).