Sky Background component

This primitives allows a sky to be added that's either a gradient or an equirectangular skybox. In contrast to the built-in <a-sky> this doesn't use a sphere geometry. It renders a fullscreen triangle covering the far plane, ensuring it's always in the background and more performant.

Checkout the example: Online Demo | Source

Usage

Load the script from npm or add the following script tag:

<script src="https://unpkg.com/@fern-solutions/aframe-sky-background/dist/sky-background.umd.min.js"></script>

The <a-sky-background> primitive can be used as follows:

<a-sky-background top-color="#0077ff" bottom-color="#ffffff"></a-sky-background>

Instead of a gradient sky, an equirectangular skybox texture can be used as well:

<a-sky-background src="url(./textures/sky.png)"></a-sky-background>

Attributes

| Name | Type | Default |Description | | ---- | ---- | ------- |----------- | | top-color | color | #0077ff | The solid color of the sky at the top | | bottom-color | color | #ffffff | The solid color of the sky at the bottom | | offset | number | 120 | Offset in meters to 'angle' the gradient a bit | | exponent | number | 0.9 | Exponent used to blend between the top and bottom color as a function of height | | src | map | null | The equirectangular texture to use, disables the gradient sky |