Foam 3D

Quick Start

It can be hard to visualize a foam, so here we explore it as a Kelvin Foam in 3D. Use your mouse to move around outside and inside, use the two controls to adjust the visual properties.


This uses the newer Three.js infrastructure and a VR version will become available.

We have 15 bubbles assembled into a small subset of a large volume of foam - you can imagine other bubbles extending out further. The bubbles are tetrakaidecahedra (14 faces), also known as truncated octahedra, with 4- and 6-edged faces and are one of the Archimedean solids. They are able to tesselate, to fill space. Lord Kelvin pointed out that they made a good approximation to an ideal foam, and so this foam is called a Kelvin foam. A more perfect foam was defined by Denis Weaire and Robert Phelan, but the Weaire-Phelan foam (made of a dodecahedron and a different tetrakaedecahedron with a mix of 5- and 6-edged faces) is harder to visualise. Despite the kind help of Guy Inchbald, an expert in 3D shapes, I decided not to implement one because for our purposes, the Kelvin foam is good enough.

To get a feel for what a foam is, use your mouse to zoom in, rotate (left click) and pan (right click) so you can see the foam from whatever angles interest you.

Definitions of a foamThe three key features are:

  1. The foam faces or film walls. They make up the bulk of the surface area of each bubble but account for a tiny % of the foam material.
  2. The Plateau borders. These run along the edges of the foam faces and contain a large fraction of the foam material. Foam drainage runs through these borders. The shape of the borders are curved triangles in cross-section. I can't create the exact form but when you zoom in you see some triangular cross-sections to remind you.
  3. The nodes. These are where the Plateau borders meet.

Adjusting the foam

The sliders let adjust the Opacity of the walls and the Width of the borders. As foams can get distorted, you can change the vertical Scale from 0.5 to 2.