Shadertoy fragment shaders run in three.js on a fullscreen quad by mapping iTime and iResolution uniforms into the render loop

Shadertoy shaders are fragment shaders that expect non-standard uniforms: iResolution (canvas size), iTime (seconds since load), and optionally iChannel0-3 (texture samplers). To run them in three.js: make a plane that fills the canvas using an OrthographicCamera and a 2-unit PlaneGeometry, wrap the Shadertoy mainImage function in a main() that calls it with gl_FragCoord.xy, pass iTime and iResolution as THREE.ShaderMaterial uniforms, and update them in the animation loop. Shadertoy shaders are a fun single-function challenge, not performance best practice (single-pass raymarching is heavy), so expect lower performance than scene-graph 3D. The same function can also be applied as a procedural texture on 3D geometry by using UVs instead of gl_FragCoord.

Examples

const uniforms = { iTime: {value:0}, iResolution: {value: new THREE.Vector3()} };
const mat = new THREE.ShaderMaterial({ fragmentShader, uniforms });
// In render loop:
uniforms.iTime.value = time * 0.001;
uniforms.iResolution.value.set(canvas.width, canvas.height, 1);

Assessment

Port a minimal Shadertoy (e.g. the cosine-palette example) into a three.js scene on a fullscreen quad. Then apply it as a procedural texture on a rotating cube’s face by switching from gl_FragCoord to UV coordinates.