Three.js Morphing Blob — WebGL Organic Vertex-Noise Sphere

The Three.js Morphing Blob snippet takes a plain sphere and turns it into a continuously breathing, organic form — the kind of effect you see on modern SaaS landing pages — using nothing but a high-subdivision icosahedron, a hand-rolled noise function, and per-vertex displacement recomputed every frame in plain WebGL through Three.js loaded from a CDN.

Why an icosahedron instead of a UV sphere

The base shape is a THREE.IcosahedronGeometry with a subdivision level of 6, which produces thousands of near-evenly-distributed triangles across the surface. A standard SphereGeometry clusters vertices tightly near its poles and stretches them near the equator, which makes any per-vertex displacement look uneven — bulging oddly at the top and bottom. An icosahedron's uniform triangle distribution means the same noise formula produces consistent, evenly-sized bumps everywhere on the surface.

Displacing from a saved original, never from the last frame

The single most important detail in this snippet: the geometry's original vertex positions are copied into a plain array once, at startup, before any animation runs. Every frame, each vertex is recomputed as original position × (1 + noise) — always starting from that saved original, never from wherever the vertex ended up on the previous frame. Get this wrong (displacing cumulatively frame over frame) and the blob will drift, balloon, or collapse within seconds; displacing from a fixed original is what keeps the wobble stable and reversible indefinitely.

A hand-rolled noise function, no library required

Rather than pulling in a Simplex or Perlin noise library, the snippet uses a compact function that multiplies three sine and cosine terms together, each on a different axis, frequency, and phase offset tied to a slowly incrementing time value. It isn't mathematically "true" gradient noise, but it produces a smooth, non-repeating, organic-looking ripple across the surface for zero extra dependencies — proof that convincing procedural motion doesn't always need a proper noise library.

Recomputing normals is what makes the lighting work

After displacing vertices, the snippet calls geometry.computeVertexNormals() every single frame. Skip this step and the surface will still visually deform, but the lighting will look completely wrong — flat, faceted, or oddly shaded — because the MeshStandardMaterial shades each triangle based on its normal vector, and that normal has to be recalculated any time the underlying geometry actually changes shape.

Orbiting point lights sell the "liquid" feel

Two point lights — a violet key light and a cooler cyan rim light — orbit the blob independently of its rotation, one of them tracing a circle over time via simple sine/cosine positioning. Because the surface is constantly shifting, a moving light source catches different facets from moment to moment, which is what makes the material read as glassy or liquid rather than a static plastic sphere with a texture animation layered on top.

Slow rotation and tilt, not just displacement

On top of the noise wobble, the mesh itself slowly rotates on its Y axis and gently tilts back and forth on X using another sine term. Combined with the orbiting lights, this small addition means no two frames ever look quite identical, even though the underlying noise pattern technically does eventually repeat.

Where this technique goes next

The same original-position-plus-noise pattern that drives this blob is the foundation for cloth simulation previews, terrain generation, and audio-reactive visualizers — anywhere a mesh needs to deform smoothly without an actual physics engine. Pair it with a morphing SVG icon set for a coordinated "everything breathes" visual language, or contrast it against the rigid, faceted look of a 3D cube.