bottle-creator

A label studio around a floating three.js bottle with liquid inside. Design body, neck and cap labels, see them on a longneck, stubby or slim bottle or across a six-pack carrier, then open the cap and pour. The liquid is a position-based fluid of up to 3,200 particles, meshed every frame with marching cubes, and particles that leave the mouth become drops in the room. Carbonation bubbles, vapor and the fizz, hiss, pop and gurgle are all generated, the sounds from filtered noise and one oscillator. A static page with no bundler.

01 The label studio, and the bottle it dresses 02 Cap off, tipped: the fluid becomes drops

The liquid

The solver follows the position-based fluids method published in 2013 and runs in the bottle's own frame, in centimeters. Its walls are a radius-by-height table from the inner profile that a headless Blender script exports along with the bottle models, so each shape gives the liquid its own container, and the walls add a ghost-fluid share of density plus an inward pressure. The settings were tuned headless: four iterations, three substeps and an under-relaxed Jacobi update. At rest the fluid sits about 17% compressed under its own weight, so the fill packs 1.2 particles per rest volume and the surface lands at the nominal level. Three quality presets trade 1,100, 2,200 or 3,200 particles against a marching-cubes grid of 40, 48 or 64.

Stated honestly

Pouring and the cap work on a single bottle only; the six-pack is for showing labels. It is laid out for a desktop-sized window: on a phone its two panels cover the bottle. The simulation is heavy, so on an older laptop pick the Low preset under Sim quality. It runs entirely in your browser, with three.js served from this site rather than a CDN. The source is not under version control, so there is no repository to link; the page is the app as it stands.