Restart ╱╲ THREE.js

Purpose

The purpose of this site is was to create a relaxing interactive sunset simulator by combining interactive graphics with audio, and is meant for anyone who is stressed out or just likes looking at graphics online. Also, it will serve as a portfolio piece.

Wireframes

Index Page Wireframe Content Page Wireframe Documentation Page Wireframe

Design

I used gradients as scene backgrounds to mimic the gradient of a sunset, and used illustrations rather than images so they didn't clash with the style of the 3d objects. Also, I changed and played up the sun color at each stage as when the sun sets it often will appear slightly yellow or red instead of the usual bright white. Controls were kept transparent and minimum to not distract from the graphics. The curved, sans serif fonts were used to look clean and gentle.

Above and Beyond

I used prior self-taught knowledge of Adobe Photoshop elements to add clouds and effects to the background gradients. I also learned the THREE.js documentation, and the basics of how to set up a scene with a webGL renderer and camera. Also, learning how to think of variables and positoning within a 3D space was a challenge.