Newer
Older
reroad-test / 2020-ryusei / aframe-master / docs / primitives / a-sky.md
@ryusei ryusei on 22 Oct 2020 2 KB パノラマ表示

title: type: primitives layout: docs parent_section: primitives source_code: src/extras/primitives/primitives/a-sky.js examples:

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 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

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.