Civilization 4 Intro Screen

React
ThreeJS
react-three-fiber
Typescript

As a teenager I used to spend what felt like hours staring at the Civilization 4 intro screen. Both because of the great Baba Yetu by Christopher Tin (first video game music to ever win a Grammy, btw), but also the mesmerizing animation of the revolving Earth with the rising sun and the city lights coming on at night.

I decided to recreate the experience as best I could in the browser using three.js and react-three-fiber. It was an interesting challenge getting different layers of a scene affected (or not) by separate EffectComposers to produce the right glow in the right places.

Dawn/End of night
Dawn/End of night
Early evening
Early evening