Loading
Live demos

3D website examples, sorted by what the 3D does

Below are 3D websites you can open right now, on a computer or a phone. They’re sorted by the job the 3D does on the page — showing one object, taking you through a place, being a small world, setting a mood behind the text — because that’s the choice you’ll face if you want one, more than the style.

Updated

Under each kind: what it suits, what to look at when you open it, and what tends to go wrong. Then the places that collect hundreds more, and what the good ones have in common. For the definition before the examples, see what an immersive website is; for the ways a scene answers to the cursor, a finger or a sound, interactive 3D websites.

One object that turns as you scroll

The most common kind, and the easiest to get right: a single product — a bottle, a watch, a pair of headphones — drawn in real-time 3D, which turns, opens or comes apart as you scroll, while the text beside it tells you what you’re looking at.

It suits a brand with one hero product, or a launch. Open Product — a perfume bottle turning under the light in a studio built in code — and check two things: is the object on screen from the start, and does each part of the scroll tell you something in words? If you can’t say in a sentence what each turn of the object shows, the page is decoration.

What goes wrong: a heavy model that takes seconds to appear on a phone, and text drawn inside the 3D, where Google can’t read it — its own guide says content rendered in a canvas isn’t indexed.

A place you move through

The scroll becomes a walk: down a gallery, through a house, along a path. The 3D isn’t one object but a space, and each stop along the way is a section of the page.

It suits places and people who show work: a cabin or a hotel (Forest puts your own photos in a 3D setting), a home for sale (Home is built around a 3D model of it), a studio or a portfolio (Studio is a white gallery with each project framed and lit). More on that last one in a 3D portfolio website.

What to look at: whether you always know where you are and how much is left. A walk with no end in sight is where visitors give up.

A small world you play

The best-known 3D websites are closer to games. Bruno Simon’s portfolio is a 3D world you drive a small car through, finding his projects along the way. Messenger, by the studio Abeto, is a small planet where, in its own words, someone has to make the deliveries.

They’re worth opening to see what the browser can do. They’re rarely the right model for a business: they ask for time and attention before saying anything, and much of what they hold lives inside the 3D, not in text a search engine reads. They work as a showcase for people who sell 3D itself.

A scene that sets the mood behind the text

Here the 3D doesn’t carry the content; it sits behind it — cloth that moves, light, particles, a scene that reacts to music — and the page reads like a normal one on top of it.

It suits brands where atmosphere is the product: a record, a collection, an event. Music moves its scene with the song, Fashion puts your photos on cloth that moves, Wedding is a letter in 3D, and Event gives the event its own LED wall. Studios that do this to order, such as Lusion, show it in their own sites.

What to look at: switch the scene off in your head. If the page still says everything, the 3D is doing its job without getting in the way.

Live demos to open on a phone

Each of these is a working page, not a video: open it on a phone too. They’re Promti’s kits — one-page 3D sites, each made for one kind of business — so yours would carry your words, your colours and your photos or model where the kit takes them.

Where to find hundreds more

Awwwards, a site that gives awards for web design, keeps galleries of the sites it has recognised, sorted by technique: one for WebGL and one for 3D. They’re the quickest way to see what studios are doing this year.

The home page of three.js, the free library most of these sites are built with, is itself a wall of projects made with it — useful if you’re thinking of making one yourself.

One habit when you browse them: open the ones you like on your phone, on mobile data. Many award-winning pages are made for a large screen and a fast connection, and your customers may have neither.

What the good ones have in common

Something moves in the first seconds, and the name and the offer are readable as text without waiting for the 3D.

The scroll stays the visitor’s. In NN/g’s tests of scrolljacking — pages that change the pace or direction of scrolling — most participants were at least mildly disoriented, and it was worse on phones.

There’s one thing to do at the end: buy, book, write. And there’s a plain-text version of everything important, for Google and for whoever has motion turned down. Speed, SEO and 3D goes through how to keep a 3D page fast and findable.

Questions

Where can I see examples of 3D websites?
Open the live demos on this page, then Awwwards’ WebGL and 3D galleries, which collect the sites it has recognised. The three.js home page also shows projects made with the library.
What is the best-known 3D website?
There’s no official list. Bruno Simon’s portfolio, where you drive a small car through a 3D world, is one of the most shared examples, and the Awwwards galleries show the ones the jury has picked.
Are 3D websites good for a business?
When the 3D shows the thing being sold — a product, a place, a collection — and the text stays readable without it, yes. When it’s a game the visitor has to learn before finding the price, it gets in the way. What an immersive website is goes into when it pays off.
Can I have a 3D website like these?
Yes, in three ways: build it yourself with three.js, start from a Promti kit for €500 paid once, or have one made for you — a custom 3D website starts at €750. What a 3D website costs compares the routes.
Do 3D websites work on phones?
They can, if they’re made for it: a light model, text in HTML, and the browser’s own scrolling. Open every example here on your phone — the difference between the ones that were made for it and the ones that weren’t is quick to see.