Loading…
Live three.js · move your pointer
Open ↗Premium2D ray-traced dispersion beams · dark
Glass Prism
A narrow sheet of white light crosses a dark, hazy room and strikes a glass prism; inside, every wavelength bends by its own amount, and a fanned spectrum leaves the far face, pools on the floor and paints a band of colour across the wall.
How to use it
Run the real thing here, tune it, then copy the prompt that rebuilds it.
- 01Launch and look
The preview is the real three.js scene in a sandboxed frame, not a recording. Everything responds to you.
- 02Dial it in
Swatches recolour, sliders move the parameters that matter, Randomize finds what you would not have typed. Structural changes rebuild the geometry.
- 03Pick your stack
Single HTML by default, or a Next.js, React, Vue or Astro component that imports three from npm.
- 04Copy the prompt
It carries geometry, motion, camera and material intent with your values, in build order.
- 05Iterate one element at a time
Geometry, then motion, then camera, then material. Scroll and hover behaviour usually takes a second pass; that is normal.
More 3d scenes
Premium♥ 0
Bolt Assembly
exploded-view choreography with helical thread kinematics
Free♥ 0
Bait Ball
analytic vortex shoal with swim-wave vertex animation
Free♥ 0
Chain Drive
kinematic chain on sprockets with alternating instanced links
Premium♥ 0
Knit Throw
procedural knit stitch shader with Fair Isle motif