# three.js examples

> Official gallery of interactive 3D WebGL and WebGPU demonstrations and code

Three.js Examples is the official showcase repository demonstrating 3D graphics, animations, shaders, and rendering techniques built with three.js. Each demo runs directly in the browser and provides viewable source code for materials, post-processing, physics, and model loading. It serves as a primary reference for web developers wanting to integrate complex 3D visual effects into landing pages and web apps.

Website: https://threejs.org/examples?q=webgpu

## What it is for

- Find interactive 3D hero background animations for landing pages
- Inspect production code for WebGPU compute shaders and particle systems
- Learn how to load and render 3D formats like glTF, USDZ, and OBJ in the browser
- Implement post-processing visual effects like depth of field, bloom, and glitch filters

## Features

- Extensive searchable catalog of interactive 3D visual demos
- Direct source code viewing for every demo with a single click
- Comprehensive coverage of WebGL, WebGPU, and post-processing passes
- Loaders and parser examples for major 3D asset formats (glTF, FBX, OBJ, USDZ)
- Demos covering physics, particle systems, procedural geometries, and lighting models
- Interactive controls allowing real-time parameter tweaking in most scenes

## Pricing

Open source. Free and open-source (MIT license)

## Details

- Type: Website
- Category: [Development](https://xiry.app/topics/development.md)
- Open source: yes
- Platforms: Web, Code library
- For: Creative technologists, front-end developers, and web designers looking for 3D web inspiration and code snippets
- Alternative to: Babylon.js Playground, Spline
- Tags: threejs, webgl, webgpu, 3d, javascript, creative coding, shaders

## Why it was saved

- [@adam_ha_yes, 19 August 2026](https://www.instagram.com/reel/DcOs3VwRK0B/): Provides cutting-edge 3D visual effects and interactive animation examples that can be incorporated into landing pages.

## Compare

- [Alternatives to Spline](https://xiry.app/alternatives/spline.md)

## Related

- [GPU Landing Page Performance Checklist](https://xiry.app/resources/gpu-landing-page-performance-checklist): Audit checklist to optimize WebGPU, Three.js, and 3D web performance. (Tip, Free)
- [Shaders](https://xiry.app/resources/shaders): Open-source WebGPU shader component library and free design editor. (Web app, Open source)
- [Canvas UI](https://xiry.app/resources/canvas-ui): Open-source html-in-canvas UI component library powered by WebGL and WebGPU (Web app, Free)
- [Liquid DOM](https://xiry.app/resources/liquid-dom): WebGPU library rendering Apple-style liquid glass materials for the web. (GitHub repo, Open source)
- [React Bits — Color Bends](https://xiry.app/resources/react-bits-color-bends): Animated Three.js shader background component for React with customizable flow and colors (Web app, Open source)
- [Anchoring DOM Labels to a 3D Globe with CSS Anchor Positioning](https://xiry.app/resources/anchoring-dom-labels-to-a-3d-globe-with-css-anchor-positioni): Declaratively anchor and toggle DOM markers on 3D scenes with CSS (Tip, Free)

Updated 3 October 2026. Page: https://xiry.app/resources/three-js-examples

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.