There is beauty in seeing something difficult to understand. I think sky-boxes fall into this category. After all, very few people have a knowledge of it, many people have secretly seen it, yet no one thinks twice about it. If you’ve ever played a older generation first person shooter, or anything within a last generation 3D world, chances were, you were inside a sky-box. A sky-box is designed to emerge the user in beautiful backdrops without rendering complex objects. The clouds in your last match of Counter Strike are a product of static sky-boxes.
Implementation is easy with the introduction of three.js. At a high level, a cube is created and it’s six sides are mapped to a sky-box image, the camera is placed in the center of the cube. Attention needs to be paid with respect to camera controls and lighting. After your scene is complete, viola beautiful skies. Recently, I found time for housekeeping. So lets load our assets properly, add a composer for vignetting with wagner, throw in some fancy animations with the greensock tweening offerings and finally, we have something we can immerse ourselves in.
The demo can be found here.
