Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including aframe-simple-sun-sky with all npm packages installed. Try it out:

aframe-simple-sun-sky lists no main file and has no index.js, so it can't be directly required. If this is a mistake, please let us know. It may however contain internal files that you can require manually:

// require("aframe-simple-sun-sky/[??]")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

aframe-simple-sun-sky v1.2.2

Sky primitive using a simple (and fast) gradient away from the sun. For A-Frame WebVR.


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="^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'.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free