156 three.js Examples

This is a Twisted Wave GLSL Image Gallery. It’s a high-performance, full-screen WebGL experience that uses custom shaders to create sophisticated visual effects. Its function is to transform a standard image carousel into a cinematic journey with two distinct interactions: a localized sine-wave distortion on mouse hover and a global radial blur that intensifies with the speed of the scroll.

This is a Cinematic Zoom Blur Image Gallery. It utilizes custom GLSL fragment shaders and Three.js to create a high-fidelity transition between image textures. Its function is to provide an immersive navigational layer for visual portfolios, where spatial depth and radial blur replace standard linear crossfades.

This is a 3D Interactive MacBook Model. It utilizes Three.js to load, texture, and animate a high-fidelity .glb model of a laptop. Its function is to create a premium, cinematic product showcase, replacing static hero images with a fully interactive WebGL scene that animates through a complex opening and booting-up sequence.

This is a Matcap Instanced Disco Geometry demo. It renders multiple unique 3D geometries (Torus Knot, Icosahedron, Torus) using the WebGL Instanced Mesh technique. Instead of drawing individual planes for every mirror on the surface of the shape, it creates one InstancedMesh per object, mathematically orienting thousands of tiny reflective mirrors to mimic a faceted, crystal-like disco surface.

This is a WebGL Generative Flower Cursor. It transforms the cursor into a botanical paintbrush, procedurally generating complex, blooming flower patterns across the screen in real-time. Its function is to provide an immersive, artistic interaction layer that allows users to “paint” generative digital gardens.

This is a Shattering Image Gallery Transition. It utilizes the WebGL API via Three.js to deconstruct 2D images into a matrix of 3D particles. Its function is to replace standard fade or slide slideshows with a highly cinematic, physics-based explosion effect, transitioning between photographs by blowing the current image apart to reveal the next one underneath.

This is an Infinite 3D Poster Scroll Wall. It constructs a dense, continuous grid of cinematic assets rendered entirely in WebGL. Its function is to provide a visually overwhelming, highly performant “hero” background that automatically fetches live data from an external API and perpetually scrolls along a tilted perspective plane.

This is an Interactive 3D Pricing Card Slider. It integrates WebGL geometric renders into a standard product tier UI. Its function is to convert static pricing options into an engaging, tactile spatial experience.

This is a Procedural 3D Endless Runner Game. It utilizes Three.js to render a dynamically generated, infinite obstacle course. Its function is to deliver a complete, lane-based gameplay loop entirely within the browser. The environment and actors are constructed procedurally, eliminating external asset dependencies and ensuring instant execution.

This is an Interactive Spectral 3D Ghost Effect. It utilizes Three.js and custom GLSL shaders to render a dynamic, mouse-tracking entity with analog signal decay. Its function is to serve as an immersive focal point or an interactive background element. The effect effectively bridges direct user input with procedural visual storytelling.

We often treat web content as flat information, devoid of spatial context. This component creates a digital sanctuary. By combining soft, pre-calculated lighting with a constrained interactive camera, we invite the user to inhabit a space, not just view it.

Real-time rendering often demands too much power for too little soul. This component brings the warmth of a hand-crafted miniature to the browser. By leveraging baked textures, we achieve photorealistic lighting with the performance footprint of a simple image. It is not just a 3D model; it is a digital diorama that invites the user to inspect every corner with tactile orbit controls.

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.