1.0.4 • Published 1 year ago

@fern-solutions/aframe-sky-background v1.0.4

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

Sky Background component

npm version npm version github twitter mastodon ko-fi

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

NameTypeDefaultDescription
top-colorcolor#0077ffThe solid color of the sky at the top
bottom-colorcolor#ffffffThe solid color of the sky at the bottom
offsetnumber120Offset in meters to 'angle' the gradient a bit
exponentnumber0.9Exponent used to blend between the top and bottom color as a function of height
srcmapnullThe equirectangular texture to use, disables the gradient sky
1.0.4

1 year ago

1.0.3

1 year ago

1.0.2

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago