Three.js Liquid Metal Sphere — Real-Time CubeCamera Reflections

The Three.js Liquid Metal Sphere snippet renders a mirror-finish sphere that reflects its surroundings in real time — no HDRI file, no static environment texture, no baked-in cubemap — using THREE.CubeCamera to continuously capture the live scene and feed it back in as the sphere's own environment map, alongside OrbitControls for inspection, both loaded from a CDN.

A reflective material needs something to reflect

A MeshStandardMaterial with metalness: 1 and near-zero roughness produces a true mirror finish — but a mirror reflecting an empty black scene just looks like a plain dark sphere. This snippet first builds an "environment" worth reflecting: a large, inverted sphere (rendered with THREE.BackSide so its interior surface faces inward) colored with a vertex-color gradient from a warm top to a cool bottom, plus a few brightly colored floating torus shapes. None of this exists to be looked at directly — it exists purely to give the mirror sphere something interesting to show.

CubeCamera: six cameras in one, updated on demand

THREE.CubeCamera isn't a normal camera — internally, it renders the scene six times, once per direction (up, down, left, right, forward, back), into the six faces of a WebGLCubeRenderTarget. Calling cubeCamera.update(renderer, scene) re-captures all six faces from wherever the cube camera is currently positioned, and the resulting texture — cubeRenderTarget.texture — is a genuine live cubemap of the surrounding scene at that instant, assignable directly to any material's envMap property.

Hiding the reflective object during its own capture

Right before calling cubeCamera.update(), the snippet sets sphere.visible = false, then flips it back to true immediately after. Skip this step and the cube camera — positioned at the sphere's own center — would capture the *inside* of the sphere's own geometry in every direction, producing an incorrect black or inverted reflection instead of a clean view of the surrounding environment. This hide-capture-reveal sequence, repeated every single frame, is the standard technique for any self-reflecting object using CubeCamera.

Updating the capture every frame, not once at startup

Because the accent shapes are constantly moving and the camera itself is being dragged by the visitor, the cube camera's capture has to refresh every animation frame to stay accurate — a one-time capture at startup would freeze the reflection into whatever the scene looked like at that single instant, becoming visibly wrong the moment anything in the scene moved.

Why metalness and roughness matter more than color here

The sphere's own base color is set to plain white and barely matters visually — with metalness: 1, the material's appearance comes almost entirely from what it reflects (the envMap) rather than any base color tint. roughness is the real sculpting tool: near zero produces a sharp, mirror-like reflection, while raising it slightly blurs the reflected environment into a brushed-metal or liquid-mercury look.

Where this technique is genuinely used

Real-time environment-mapped reflections via CubeCamera (or its GPU-cheaper cousin, a pre-baked static cubemap) are the standard technique behind car configurators, jewelry viewers, chrome text effects, and any 3D scene where an object needs to convincingly reflect a *dynamic* surroundings rather than a fixed backdrop. Compare its true optical reflection against the emissive, glowing look of the morphing blob, or pair it with a product viewer for a metallic product-showcase variant.