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
Load the script from npm or add the following script tag:
<script src="https://cdn.jsdelivr.net/npm/@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>| 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 |