Skip to content
An A-Frame WebVR sky primitive using a simple (and fast) gradient away from the sun
JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.idea
.gitignore
LICENSE.md
README.md
aframe-simple-sun-sky.iml
example.html
package.json
sample.png
simple-sun-sky.js

README.md

aframe-simple-sun-sky

An A-Frame WebVR sky primitive using a simple (and fast) gradient away from the sun. Saves your GPU power for the terrain! Does not include any directional lighting. You may need to set sun-position on other elements to match.

sample screenshot

live example scene

When the sun goes below the horizon, you might want to switch to a different sky.

Include using

<script src="https://unpkg.com/aframe-simple-sun-sky@^1.2.2/simple-sun-sky.js"></script>

Basic use:

<a-simple-sun-sky sun-position="1 0.1 0"></a-simple-sun-sky>

The sky fades to fog-color near the horizon. If you use fog in your scene, set fog-color the same or very similar to your fog. If you don't use fog, set fog-color to a grayish variant of your sky colors. The special value 'none' will disable the horizon effect, for those rare worlds that are all sky and no land.

<a-simple-sun-sky sun-position="1 0.1 0" fog-color="#5681ac"></a-simple-sun-sky>

Setting the colors of the sky:

<a-simple-sun-sky sun-position="-1 1 -1" light-color="#87cefa" dark-color="#00bfff" fog-color="#74d2fa"></a-simple-sun-sky>

Adding lights so shadows work correctly:

<a-simple-sun-sky sun-position="0.7 0.4 -1"></a-simple-sun-sky>
<a-entity light="type: ambient; color: #BBB"></a-entity>
<a-entity light="type: directional; color: #FFF; intensity: 0.6" position="0.7 0.4 -1"></a-entity>

Increasing radius (default 5000) of sky sphere (increase the far parameter of the camera, too):

<a-simple-sun-sky sun-position="1 0.1 0" radius="30000"></a-simple-sun-sky>

You can change any of the colors on the fly, except changing fog to or from 'none'.

You can’t perform that action at this time.