Three.js Examples
Three.js Examples
Three.js examples on this site are organized by technique: grass, water, particles, custom shaders, a 3D globe. Each one has a working, copy-pasteable code sample in both WebGL and WebGPU/TSL, rather than one giant undifferentiated demo page, so you can go straight to the specific effect you're trying to build.
Last updated
Read the FAQ
[01]
Browse examples by technique
Every guide in the technique guides section includes a real, working code sample (not pseudocode) for both the WebGL and WebGPU/TSL renderer paths. Some of the most-searched-for effects:
- Grass: instanced blades with wind sway
- Water: reflective, animated wave surfaces
- Particles: from a CPU-updated point cloud to GPU compute
- Globe: an interactive 3D Earth with data points and arcs
- Sky and clouds: procedural sky, fog, and layered cloud techniques
See the full guides index for the complete list, including lighting, materials, physics, camera and controls setup.
[02]
Examples from real production sites
For examples of these techniques used in real, shipped projects, not isolated demos, the showcase is the place to look: real Three.js websites, filterable by category and technology, each linking through to the live site.
Learn this properly
Learn Practical TSL
Your First Node Material
The fastest hands-on path from an isolated example to actually understanding the technique.
Production showcase
Real sites and projects shipped with Three.js, each with a breakdown of how it was built.
Technique guides
One technique per guide, explained and then shown: grass, water, lighting, physics, loaders.
Starter templates
Skip the setup and start from a working project rather than an empty scene.
F.A.Q
Frequently asked questions
The questions that come up most often on this topic.
Where can I find Three.js code examples?
Each technique guide on this site (grass, water, particles, globe, and more) includes a working, copy-pasteable code example in both WebGL and WebGPU/TSL. See the guides index for the full list.
Are there Three.js examples using real production sites?
Yes. The showcase is a filterable directory of real, shipped Three.js websites, each linking to the live site, distinct from the isolated technique examples in the guides.
Do the examples include both WebGL and WebGPU code?
Yes. Every technique guide's code sample includes both a WebGL version and a WebGPU/TSL version of the same effect, so you can see how the same technique is written on either renderer.
Building this for a client?
I take this kind of work as a white-label subcontractor for agencies: scoped in writing, delivered under your brand, documented for your team.
Keep reading
Templates
A Three.js template (or boilerplate/starter kit) is a pre-built project, typically covering project setup, a build tool …
Grass
Three.js grass is built with InstancedMesh: one blade geometry (usually a couple of triangles or a simple bent-plane sha…
Particles
Three.js particle systems are built with THREE.Points: a single geometry holding thousands of positions, rendered as cam…
All Three.js Examples
Back to the examples hub.