Most "best websites" lists tell you a site looks great and leave it there. This one points to the one idea behind each pick — the trick that makes it move, react, or feel alive — so you can look at a live site and brief your team to "build me that."
Every site below is built with Three.js (or React Three Fiber on top of it), is live as of June 2026, and earned recognition on Awwwards, The FWA, or genuine developer buzz. For each, we cover what it is, the one technique worth studying, and what you can realistically reuse on your own project.
Who this is for: Creative developers, design and brand leads, and founders scoping a 3D site who want concrete references — not mood boards — before they commission or build.
Key Takeaways
- WebGPU went mainstream in 2026. Picks like IVRESS now ship a WebGPU renderer with a WebGL fallback — the technique to watch this year.
- The standout sites pick one hard idea and execute it cleanly — a drivable physics world, audio-reactive fluid, a single object rendered with real weight — rather than stacking effects.
- Scroll became the storytelling engine. Cartier, Shopify, Sleep Well, and Primland all drive the whole experience from scroll — sequencing 3D scenes rather than moving a 2D page.
- Luxury and big brands went all-in on real-time 3D. Cartier and Hubtown show Three.js is now the medium for flagship brand storytelling, not just developer portfolios.
- "What to steal" beats "what to admire." Most of these techniques — a scroll-driven scene, one full-screen shader, a single object rendered with real weight — are reusable at a fraction of the original scope.
1. How We Picked
No award-criteria rubric here — for that, see our guide to award-winning website design. This is a curated gallery with three filters:
- Confirmed Three.js / R3F. We verified each site actually runs Three.js, not a generic "3D website." Sites we couldn't confirm were cut.
- One nameable technique. Each pick teaches a specific, reusable idea — not just "nice motion."
- Recognition or real buzz. Awwwards Site of the Day/Month, FWA of the Day/Month, or demonstrable developer attention in 2025–2026.
2. At a Glance
| # | Site | Standout technique | Steal this |
|---|---|---|---|
| 1 | Oryzo | Inertial 3D product render + Z-depth scroll | Sell one object with weight and depth |
| 2 | IVRESS | WebGPU + WebGL fallback, TSL both backends | One shader codebase across both renderers |
| 3 | Lacoste Ace Breaker | Branded Three.js arcade game | A micro-game as a campaign |
| 4 | Shopify Editions | Scroll-sequenced product reveal | Scroll as the narrative device |
| 5 | Hubtown | 3D hero monolith + mouse-reveal | 3D to dignify a B2B brand |
| 6 | Sleep Well Creative | Scroll-driven illustrated 3D narrative | Editorial storytelling in a 3D scene |
| 7 | Explore Primland | Cinematic 3D landscape flythrough | A place made explorable from the air |
| 8 | Cartier Watches & Wonders | Six scrollable 3D "alcoves" | A scene per product, like museum rooms |
3. The Gallery
1. Oryzo — A Single Object, Rendered Like a Film
What it is: A mock product launch by studio Lusion — a fictional cork coaster presented with the gravity of a flagship device. It's both a joke and a flex, and it took Awwwards Site of the Month (April 2026) plus a Developer Award.
Standout technique: One hero object rendered live in Three.js with real weight and inertia — easing that mimics physics, and a scroll that moves the camera through true Z-axis depth rather than sliding 2D layers. The restraint is the point: every frame is about the one object.
What to steal:Sell one object properly. A single product, lit and animated with real material response and an orbiting camera, out-performs a busy scene. Inertia and depth are what make it read as "crafted," not "templated."
Visit:oryzo.ai
A quick vocabulary, for the cards ahead — three terms recur below; skim or skip.
| Term | What it means |
|---|---|
| WebGPU / TSL | The new GPU API. TSL (Three.js Shading Language) writes a shader once and runs it on both the WebGPU and WebGL backends. |
| Scroll-driven scene | Scroll position moves a 3D camera or sequences whole scenes, instead of just scrolling a 2D page. |
| GLSL shader | A small program that runs per-pixel on the GPU — what produces custom backgrounds, fluid, and material effects. |
2. IVRESS — A Brand Experience That Plays Like a Short Film
What it is: Our own project — a cinematic brand site that "unfolds like a short film with no narrator: you arrive, the world notices, something happens." It was named FWA Site of the Month (May 2026) and recognized by CSS Design Awards.
Standout technique: Three.js's WebGPURenderer with a WebGL fallback, with shaders authored once in TSL that compile to both backends — no forked codebase. Motion is deliberate; the scene graph is budgeted, not brute-forced.
What to steal: Adopt TSL now even if you ship WebGL today. Writing node-based materials means the WebGPU path is a config switch later, not a rewrite — exactly the migration we map in our WebGPU + Three.js migration guide.
Visit:brand.ivress.co.jp
3. Lacoste Ace Breaker — A Campaign That's a Game
What it is: A branded Three.js browser game built for Lacoste's Roland-Garros run — a tennis-themed brick-breaker where the prizes are real (tournament tickets, polos). Quick, replayable, and an Awwwards nominee. The kind of campaign people actually send to a friend.
Standout technique: A tightly scoped playable mechanic in Three.js/WebGL wrapped in a brand world — one verb, instant readability, a leaderboard and real-world stakes to drive replay.
What to steal:A micro-game beats a hero video for campaign engagement. One verb (tap, aim, time), one loop, a shareable result — and a tangible reward turns players into sharers. Replayability does the distribution for you.
Visit:members-play.lacoste.com
4. Shopify Editions — Scroll as a Product Reveal
What it is: Shopify's twice-yearly Editions release page — a long scroll-driven showcase that turns a feature changelog into a cinematic, sectioned product story. The Spring '26 edition pairs particle-dispersing type with motion-rich panels at a scale most brand sites never attempt.
Standout technique: A scroll-sequenced reveal where each section is its own staged moment — type that scatters and reforms, depth-layered panels, choreographed transitions — keeping a content-dense page feeling like one continuous piece rather than a list.
What to steal:Make scroll the narrative device. Treating each section as a beat in a sequence — entrance, hold, exit — lets even a dense, informational page feel premium and intentional instead of like a wall of cards.
Visit:shopify.com/editions/spring2026
5. Hubtown — A 3D Monolith for a Real-Estate Brand
What it is: The corporate site for Indian developer Hubtown by Unseen Studio — a glowing 3D monolith floating over a dark, reflective landscape that frames a 40-year property portfolio as something cinematic. An Awwwards Site of the Day (June 2026).
Standout technique: A Three.js hero scene (WebGL + GSAP) with a signature mouse-reveal interaction — the cursor uncovers detail in the geometry and lighting — proving a "boring" B2B sector can carry a flagship 3D experience.
What to steal:3D dignifies an unglamorous brand. A single well-lit hero object plus a reveal-on-interaction is enough to reposition a corporate site as premium — you don't need a whole explorable world, just one confident centerpiece.
Visit:hubtown.co.in
6. Sleep Well Creative — Editorial Storytelling in 3D
What it is: A scroll-driven guide to better sleep — science-backed insights wrapped in a dreamlike, illustrated 3D world you move through by scrolling. An Awwwards Site of the Day (January 2026).
Standout technique: A scroll-driven illustrated scene that blends hand-drawn art direction with a Three.js stage — the page reads like an animated editorial, with each scroll beat advancing the narrative and the visuals together.
What to steal:Editorial pacing in a 3D scene. You don't need a game or a product render — pairing a strong illustration style with scroll-sequenced 3D turns ordinary long-form content into something people finish.
Visit:sleep-well-creatives.com
7. Explore Primland — A Landscape You Fly Through
What it is: An immersive digital experience for the Primland resort in the Blue Ridge Mountains — a cinematic aerial flythrough of the terrain that makes a remote place explorable from anywhere. An Awwwards Site of the Day (February 2026).
Standout technique: A 3D landscape flythrough — real terrain rendered in Three.js with atmospheric fog and a camera that glides over it on scroll, turning a location into a navigable world rather than a photo gallery.
What to steal:Make a place explorable from the air. For anything tied to a physical location — property, travel, venues — a scroll-driven flythrough of real terrain conveys scale and atmosphere that stills and video can't.
Visit:explore.ownprimland.com
8. Cartier Watches & Wonders — Six Rooms, One Per Watch
What it is: A digital twin of Cartier's Watches & Wonders 2026 pavilion by Immersive Garden — six self-contained 3D alcoves, one per timepiece, that you scroll through like rooms in a museum. An Awwwards Site of the Day with CSS Design Awards recognition.
Standout technique:A scene per product. Three.js with GLSL, GSAP, and Lenis builds six distinct 3D rooms plus a Web Audio score as a narrative layer, with hidden gestures that reward curiosity — scroll moves you between rooms, not just down a page.
What to steal:One room per item beats one long scroll. Giving each product its own self-contained 3D space — entered and exited on scroll — makes a catalog feel like an exhibition and gives each hero object room to breathe.
Visit:cartier.com/watchesandwonders
4. What to Steal — Five Reusable Plays
Group the eight and a handful of patterns repeat. Ranked roughly by effort:
- One object, rendered with weight (Oryzo, Hubtown) — low-to-medium. A single hero object with real inertia, lighting, and a reveal-on-interaction reads as crafted without a full scene.
- Scroll as the narrative device (Shopify Editions, Sleep Well Creative) — medium. Stage each section as a beat — entrance, hold, exit — so a dense page feels like one continuous, premium piece.
- A landscape or world made explorable (Explore Primland) — medium-to-high. Real terrain rendered in 3D with a scroll-driven camera turns a location into somewhere you move through, not just look at.
- A scene per product, or a verb to play (Cartier, Lacoste Ace Breaker) — high effort, highest engagement. Give each item its own 3D room, or build one tight playable loop. Scope it small and ship it first.
- Write shaders once with TSL (IVRESS) — medium. Node-based materials authored once run on both WebGL and WebGPU — the future migration becomes a config switch, not a rewrite.
The throughline: the best Three.js sites of 2026 commit to one hard idea and budget everything around it.
5. How These Are Built
The picks share a small, learnable toolkit:
- The renderer is shifting to WebGPU. IVRESS points the way; 2026 is the year WebGPU became safe to ship with a WebGL fallback. See what changed in Three.js in 2026 and our WebGPU + Three.js migration guide.
- R3F for product/portfolio, vanilla Three.js for the heaviest custom work. React Three Fiber's component model speeds up product-class sites; the most bespoke experiences (Oryzo, Cartier) drop to vanilla Three.js for control.
- Performance is a feature, not an afterthought. Instancing, baked lighting, BVH collision, and byte budgets are what separate an award winner from a janky demo — the same discipline behind a WebGL site that still ranks on Google.
6. About Utsubo
Utsubo is a creative studio specializing in WebGPU and WebGL experiences built on Three.js, with performance budgets baked in from day one. Our work has been recognized by Awwwards, The FWA, and the Webby Awards — our IVRESS brand experience won FWA Site of the Month (2026), and our Vectr case study won FWA of the Day. As a small, engineering-led studio, our portfolio reached millions of organic views because the work felt genuinely new — and shipped fast and reliable under real traffic.
If you're choosing a partner, our guide to the best Three.js agencies is a good starting point.
7. Let's Talk
Building something ambitious with 3D on the web? We work with teams on interactive experiences, product configurators, and immersive brand projects.
If you're exploring a partnership, let's discuss your project:
- What you're building and the constraints you're working with
- Which technical approach makes sense for your goals
- Whether we're the right fit to help you execute
FAQs
What makes a website a "Three.js website"? It renders interactive 3D in the browser using the Three.js library (often via React Three Fiber). The 3D is core to the experience — a navigable scene, a shader background, a playable world — not a single decorative element.
Are these sites built with WebGL or WebGPU? Most still ship WebGL for compatibility, but 2026's standouts like IVRESS use Three.js's WebGPU renderer with a WebGL fallback. WebGPU became available across all major browsers once Safari shipped support, making this the practical migration year.
Will a heavy 3D site hurt my SEO or Core Web Vitals? Only if built carelessly. Defer the 3D bundle, render meaningful HTML first, and budget your assets and you can pass Core Web Vitals with a rich scene. We cover the full approach in our WebGL site SEO guide.
Do I need React Three Fiber, or plain Three.js? R3F suits component-driven product and portfolio sites and speeds up teams already in React. The heaviest, most custom experiences (Oryzo, Cartier) use vanilla Three.js for finer control. Both render through the same engine.
Which technique here is the best starting point? A single full-viewport GLSL fragment shader behind clean typography. It is the highest impact-to-effort ratio in 3D web and a forgiving first shader project.
How much does a site like these cost to build? It ranges widely with scope — from a shader background on an otherwise standard site to a fully playable world. For a structured breakdown, see our premium website cost guide.
Who builds Three.js sites at this level? A small number of specialist studios and freelancers. Our best Three.js agencies guide shortlists studios with the engineering depth and award track record to deliver work in this gallery.
Are these the only great Three.js sites of 2026? No — it's a curated, technique-diverse selection, not a ranking of everything. We prioritized sites where one reusable technique is clear and the Three.js usage is confirmable, so the list teaches as well as inspires.
Technology-First Creative Studio
