Skip to content
AI Pixel Wizard
Your sequence0 clips
Source

Chrome Material & Studio Light

Mirror-bright liquid chrome with a soft photo-studio lighting rig. Works on any 3D shape.

Material, V2 Objects3DSeamless loop, verified121 lines of codev1.0.0

In Light, glass & shine, Liquids

Next: Resin PourSurprise me

Chrome Material & Studio Light preview
Starting live preview…
00:00:00:00 / 00:00:00:01

Live, running the real source at reduced resolution.

Your current settings go with it. Combine several clips and hand them over together from your sequence.

Effect controls

Presets

The material works on any geometry; try another shape.

White is chrome. Warm yellow reads as gold.

0.08

Lower is a sharper mirror; higher looks brushed.

0.15

Cool blue light to warm amber light.

1

How many times the studio lights circle the object during the clip. 0 keeps them still.

The preview runs the same code your AI receives. These settings travel with the hand-off.

View code Sample video (default settings, 545 KB)
Info

What it is

A fully metallic physical material plus the thing chrome actually needs to look like chrome: something to reflect. The studio is built from code (a dark room with glowing softboxes) and baked into an environment map, so there are no image files to license or load. Change the tint for gold or steel, raise the roughness for a brushed finish, and slowly turn the lights for that rolling-highlight look.

Reuse it in your own idea

  • Apply createChromeMaterial to the balls from Bouncing Balls to get chrome marbles (see the Bouncing Marbles in a Box example).
  • Use it on text or logo geometry (TextGeometry or an imported model) for a chrome title.
  • Use only createStudioEnvironment to light a glass or plastic scene with soft studio reflections.

Which part is reusable

src/chrome-material.js is the ingredient your AI reuses. demo.js is only the example scene around it, and uses the demo harness only for the demo.

See it combined with other ingredients in Bouncing Marbles in a Box, Bouncing Marbles in a Box, Chrome Orbit.

Good to know

  • Reflections come from the studio map, not from other objects in your scene (no ray tracing or reflection probes).
  • Shadows are not included; the demo uses a soft fake contact shadow.

Technical details

Technical details
Implementation
Three.js 0.185.1 (WebGL) · ES module src/chrome-material.js
Exports
  • createStudioEnvironment(renderer, { intensity?, warmth? }) => { texture, dispose }
  • createChromeMaterial({ color?, roughness?, clearcoat?, envMapIntensity? }) => THREE.MeshPhysicalMaterial
  • applyMaterial(object, material) => object
  • configureRenderer(renderer, { exposure? }) => renderer
  • createContactShadow({ size?, opacity? }) => THREE.Mesh
Dependencies (exact)
  • three@0.185.1 (source) — WebGL rendering. In a bundler project install [email protected] from npm; the bare import 'three' resolves to it.
  • apw-runtime@1.0.0 (demo) — Demo only: frame/time harness and loop helpers.
How it fits a scene

Coordinates: Y-up, metres-ish. The studio is centred on the origin with a radius of 20 units; it is only used as a reflection map, so scene scale does not matter.

Lighting: Lighting comes from scene.environment (image-based). No THREE lights are required. If your scene already has an environment, you can use only createChromeMaterial.

Timing: Static material. The demo rotates scene.environmentRotation by whole turns over the clip for a seamless loop.

Output
1080×1080, 30 fps, 8 s · procedural (computed from the frame number) · seamless loop — The light rig and object complete whole turns over the clip, so frame N equals frame 0.
Tested
Rendered 240 frames on 2026-10-02 in Chrome 151.0.7922.137 headless on Linux 7.0.0-31-generic (x64), Node 22.14.0 (WebGL 2 via SwiftShader (software)). Same frame twice from fresh pages: identical. Loop: Frame 0 vs end state (progress 1): mean |Δ| 0.0000, max |Δ| 0 of 255.
Performance
The environment is baked once at startup (a few milliseconds). Per-frame cost is a standard physical material. Re-create the environment only when warmth/intensity change, not every frame.
Export a video yourself
Download the source, then in the folder: npm install npm run render -- chrome-material/1.0.0 --out my-video.mp4Needs Node 18+, ffmpeg and Chrome/Chromium. Add --params my-settings.json (from Copy settings) for your own settings.
Version
1.0.0 · sha256:cd8524db875223bd… · other versions: 1.1.0
Files
License
MIT. Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License (see LICENSE in this folder). Third-party: three.js 0.185.1 (MIT). License details
Provenance
Original code written for AI Pixel Wizard in October 2026. No external images, models or textures; every visual is generated by the code.
BinMore like this

More like this

Play these full screen

Resin Pour

3D object3DSeamless loop14 seconds

Ferrofluid

3D object3DSeamless loop16 seconds