160+ three.js Examples (Page 2)

An immersive scrolling experience blending smooth typography with a floating 3D particle field powered by Three.js. GSAP orchestrates the camera movement and dynamic text highlighting, creating a synchronized parallax journey.

A highly specialized, GPU-accelerated image transition component built on Three.js.

A psychedelic, fluid transition between images where the picture spirals, stretches, and “melts” before morphing into the next one.

A visually striking WebGL texture transition that employs displacement maps and custom fragment shaders to achieve a fluid, liquid-like morphing effect. The logic synchronizes JavaScript state management with GSAP animations to seamlessly blend a sequence of images through coordinate distortion, suitable for creative loaders, slideshows, or interactive galleries.

An advanced 3D scene that loads animated GLTF models and merges standard Three.js Materials with custom WebGL Shaders to achieve complex visual effects like fire and pulsating neon.

A 3D scene loading setup using Three.js and the GLTF format. The model utilizes a single baked texture, which is applied to all child meshes for rendering optimization.

A texture morphing effect with 3D rotation on hover, implemented using Three.js and shaders (GLSL). The fragment shader uses the snoise3 function (simplex noise) to create an organic mixing mask for blending two images.

A demo showing how to create a marquee effect on a 3D cylinder using Three.js and the Threeasy wrapper library - the key feature is manipulating the texture through its repeat and rotation properties to simulate scrolling.

A modern Three.js setup using importmap to work with modules without a bundler - plus custom post-processing passes to create speed and glow effects.

A Vue.js player that parses an audio stream using the Web Audio API and creates a reactive 3D visualization on the fly with Three.js.

Realistic 3D lighting and atmospheric bloom effect achieved using Three.js and advanced post-processing with UnrealBloomPass, where shaders are customized to selectively exclude objects from the glow.

This demo showcases advanced THREE.js implementation using coordinate wrapping and custom shaders to create a highly performant, infinitely scrollable and draggable WebGL grid with motion-based visual feedback.

A WebGL 3D scene where IcosahedronGeometry is transformed into a unique planet using Simplex noise, featuring dynamic land/water distribution and interactive scaling of vegetation on hover.

A striking shader morphing implementation built on Three.js/WebGL, where smooth 3D sphere deformation is created by procedural noise in the vertex shader, with dynamics controlled via GSAP and uniform variables.

A high-performance 3D gallery leveraging WebGL for rendering an interactive image grid with a reflective (shader) effect and realistic cursor-driven lighting, implemented atop LUME.

This dynamic slider utilizes a displacement map to render cinematic transitions, while finely tuned cursor momentum guarantees a smooth and highly responsive kinetic interaction across all devices.

This is a WebGL-powered image slider utilizing custom fragment shaders to create complex transition effects, structured with a comprehensive JavaScript configuration object and Tweakpane integration for real-time control over numerous uniform parameters.

An isometric 3D scene built with Three.js utilizing an OrthographicCamera for a fixed, non-perspective view; it implements high-performance lighting with cast shadows.

An isometric 3D animation leveraging Three.js and an OrthographicCamera to create a fixed, “flat” perspective; the GSAP Timeline precisely controls the complex, repeating movement and rotation of the central cube.

See how Three.js and custom Shaders (Vertex/Fragment) create a striking chromatic aberration and “liquid” distortion effect on images in a GSAP-controlled horizontal slider.

An efficient WebGL/Three.js dynamic background implementation using a ready-made component. The demo focuses on programmatic adjustment of PBR parameters (Metalness, Roughness) and disabling secondary effects (setRain(false)) for optimization.

A dramatic 3D composition of floating books, built using Three.js for rendering and GSAP for complex, cyclical rotation animations of each object, complemented by minimal text with a blending effect.

An infinite cloud-flying effect built with Three.js, where thousands of individual planes are merged using BufferGeometryUtils.mergeGeometries for optimized, high-performance rendering.

The demo showcases how to create an interactive and atmospheric 3D world, employing complex lighting setups (directional, point lights), particle systems, and post-processing effects to achieve a cinematic visual style.

This demo is a powerful showcase of WebGL rendering based on physically correct material properties. The code demonstrates how to combine Three.js, custom GLSL shaders, and interactive controls, allowing a user to adjust parameters like dispersion and anisotropy in real-time and observe their effect on the 3D object’s light and color.

An interactive demo showcasing slide transitions via destructive digital effects. It uses WebGL shaders to create realistic VHS distortion, static, and pixelation.

A stunning 3D gallery built with Three.js, where images come to life on hover. This demo showcases a custom GLSL shader for a unique “liquid” animation effect and integrates Fancybox for full-screen viewing.

A spectacular procedural 3D model generation from points using shaders and textures to create a “twinkling” effect. The use of EffectComposer allows for layering multiple post-processing effects like Bloom and RGB Shift, enhancing the visual quality.

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