ashMeteo: Simply 3D Meteo History

Showcase
, , ,
1

ashMeteo is a weather data visualisation that turns 30 years of climate history into an interactive 3D landscape. Search any location on Earth and explore monthly temperature ranges and precipitation as a grid of gradient-coloured bars you can orbit, pan, and fly through. It is best experienced on a PC, and for an automated flythrough, just press “R” after loading a location of your choosing.

It grew out of the weather visualisations I built for ashPlace, a location discovery app where weather context is part of how places are explored. ashMeteo takes that same idea and gives it a dedicated, much deeper treatment.

ashMeteo is also my attempt to satisfy my own curiosity: which places, based on recorded data, seem to be getting warmer over the years.

Live: https://meteo.ashwyn.studio

A few implementation notes for anyone interested:

  • Temperature bars use per-vertex colour gradients on MeshStandardMaterial (with vertexColors: true) rather than a custom ShaderMaterial. Roughness, metalness, and lighting interactions come built-in, which honestly saved me (and Gen AI, ha!) from having to write a lot of shader code.

  • Bars are deliberately voxel-shaped (BoxGeometry) rather than more complex meshes. The full scene carries 720 bars, 1,080 data label sprites, and 42 axis labels, totalling 1,842 objects. Keeping geometry simple was a conscious priority to ensure the scene runs smoothly across a wide range of devices, even on decade-old systems (which I do have!).

  • The interaction model is built on a heavily customised MapControls, closer to Google Maps than a typical orbit viewer, with screen-space pan via setViewOffset to preserve the orbit pivot across single and two-finger gestures. It took a lot of revisions to make it feel intuitive, but I think there is still room for improvement.

  • The entire app compiles to a single index.html via vite-plugin-singlefile at around 168 KB gzipped.

Stack: Three.js r183 · Open-Meteo Historical API (ERA5) · Nominatim/OpenStreetMap · Vite

The project recently received CSS Winner Site of the Day on 4 May, and CSS Design Awards Special Kudos + Public Awards in UI, UX, and Innovation on 6 May.

Feel free to let me know what you think :slight_smile:

1 Like
2

Hi @RaymondWee ,

Please explain to me what the values ​​in the lower block (practically blue) represent.

3

Each of the blue bars in the negative Y-axis shows the total precipitation (rainfall or snowfall) for that particular month. The data label below it is the recorded amount in mm. The lower it extends below, the higher that amount of precipitation recorded for that month.

4

Thank You very much for the attention.:wink:

5

You are most welcome! Feel free to let me know if you have other questions :slight_smile:

1 Like