156 three.js Examples (Page 2)

This demo showcases advanced framebuffer and shader work. The light refraction and chromatic aberration effect is achieved by rendering geometry to multiple textures.

This demo shows advanced Three.js techniques, including a custom rendering pipeline with post-processing effects like Unreal Bloom. The system’s core functionality relies on a central animation loop that manages and orchestrates multiple parallel effects and user interactions.

The core feature of this project is the generation of complex, procedural water and particle animations directly on the GPU. Using custom shaders gives full control over the visuals, while post-processing effects add depth and a cinematic feel, opening up endless possibilities for experimentation.

This Three.js demo showcases procedural 3D text deformation combined with a sophisticated post-processing pipeline. It layers an UnrealBloomPass with custom GLSL shaders for dynamic rust and glitch effects, all tweakable in real-time via dat.GUI.

Powered by Three.js and Anime.js, this demo showcases complex particle morphing between six different shapes with smooth, procedurally generated transitions and customizable color schemes.

See how vertex and fragment shaders in Three.js are used to create a “living image” effect that reacts to scrolling. The technical focus is on the deformation (uOffset) and RGB shift (uRGBShift) controlled via GSAP.

A lively demo showcasing the power of Three.js in creating interactive 3D scenes. Key features include raycasting for mouse tracking, GSAP camera animations, and a dynamic UI with CSS filters.

This 3D demo showcases advanced Three.js capabilities, using a custom displacement map shader to create a unique distortion effect. It’s technically notable for its seamless transition of camera control from user interaction back to an automated, scripted path.

This demo is a showcase of cool animation with WebGL and Three.js, where smooth scrolling via Lenis combines with interesting visual effects like RGB shift and image deformation.

A detailed Three.js shader glass effect with complex refraction, dispersion, and reflection, enhanced by post-processing and controllable via a real-time GUI.

A powerful Three.js demo focused on post-processing effects, utilizing EffectComposer to chain a standard RenderPass with a custom ShockWave/Ripple ShaderPass and an UnrealBloomPass for stunning visuals.

An immersive scroll animation built on GSAP (ScrollTrigger) and Three.js. Features include 3D model loading, volumetric lighting, and dynamic animation parameters that can be easily adjusted via a control panel.

A technically complex but smooth demo that uses THREE.js to create six different procedurally-generated visual effects. The core lies in working with GLSL shaders, which dynamically calculate the shape and color of the cursor’s “trail” and utilize various effects like Unreal Bloom and film grain.

Interactive metaballs brought to life by a custom THREE.js shader, they react to cursor movement and offer a range of presets, making the demo truly responsive and performant.