144 three.js Examples

This 3D Glass Photo Lens creates a stunning, tactile digital object - a thick glass block that refracts user-uploaded photos. Built with Three.js, it simulates the physics of light (transmission, IOR, thickness) to produce high-fidelity glass renders directly in the browser. Users can change the lens shape (Heart, Square, Hexagon), adjust the glass tint, and even modify the environmental lighting to see how reflections dance across the beveled edges.

Oculus II redefines the weather dashboard by blending real-time data with a cinematic 3D environment. Unlike static weather apps, it uses Three.js to render a living scene - drifting clouds, falling rain, or twinkling stars - that reacts to the mouse cursor with a subtle parallax effect. The UI floats above this world using glassmorphism, creating a sense of depth and modernity while providing live weather metrics from the Open-Meteo API.

This Neon 3D Tubes Cursor Trail brings high-end motion graphics to the web browser. Using the power of WebGL and Three.js, it generates a serpentine trail of glowing 3D geometry that fluidly follows the user’s input. The effect features dynamic lighting that casts soft glows on the tubes, and it includes a built-in interaction where clicking the screen instantly randomizes the color palette, keeping the visual experience fresh.

This Tearing Paper Photo Gallery is a technical marvel that simulates the physical act of ripping a photograph in half. Unlike simple 2D masking effects, this component uses WebGL (Three.js) to deform the geometry in 3D space. As the user drags downward, the “paper” mesh splits, rotates, and tears along a procedural edge, complete with lighting and shadow effects generated by custom shaders.

This WebGL Voronoi Particle Transition is a cutting-edge visual effect that reimagines the standard image slider. Instead of manipulating DOM elements or simple textures, it converts images into a massive system of particles (one for every pixel). During transitions, these particles are subjected to a mathematical storm driven by Voronoi diagrams, creating a liquid, swirling distortion effect that feels organic and computational.

This Interactive 3D Falling Leaves Shader is a sophisticated WebGL demonstration built with Three.js that showcases efficient rendering of thousands of unique objects. By utilizing InstancedMesh and custom GLSL shaders, it creates a stylized autumn tree where leaves respond to wind, sway realistically, and “die” (fall off) either randomly or through user interaction via raycasting.

An interactive 3D room diorama powered by Three.js, utilizing a “baked lighting” technique where pre-rendered shadows and lights are applied via a single texture for high performance.

A calm static image that, upon hover, jitters, splits into RGB channels in bands, and slowly zooms in, evoking a digital glitch or cyberpunk atmosphere.

An interactive “liquid” image distortion effect powered by Three.js and custom GLSL shaders.

A stylized, “digital” flame that evolves over time but obediently transforms (fades or flares up, changes geometry) in response to user interaction (scrolling).

A Low Poly 3D planet visualization built with Three.js, featuring three rotating layers: a solid core, a wireframe shell, and a floating particle cloud.

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.

Dynamic control over GPU effects, including 3D-deforming ripples (Vertex Shader) on click and animated reveal masks by smoothly driving shader uniforms with GSAP timelines.

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.

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.