<a-sky>

NOTE: This version of the documentation tracks unstable development happening on A-Frame’s master branch. If you wish to try it out, grab the unstable build. Otherwise, head to the documentation for the current 1.7.0 version

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. We can find some sample equirectangular images on Flickr. To take an equirectangular photo, check out this 360-degree photography guide.