Loading
Live demos

A 3D portfolio website: four ways to get one, and what to put in it

A 3D portfolio website is a portfolio where the page itself is a real-time 3D scene — a gallery you walk through, a room, a desk — and your projects are what you find in it. The scene is drawn by the visitor’s browser with WebGL, so it reacts to the scroll and the pointer.

Updated

It suits anyone whose work is what sells them: a designer, an illustrator, an architect, a photographer, a studio. It also has a cost, because the person looking at it is often short on time. Below: the four ways to get one, what to put in it, and the three things that make a 3D portfolio work against the work it holds.

Four ways to get a 3D portfolio

In code, with three.js. You build the scene yourself: the library is free (MIT licence) and its manual starts from creating a scene. It’s the right route if you write JavaScript and want 3D as a skill; it’s also the one that takes longest, and the work — loading models, phones, memory — is in making a 3D website yourself.

In a builder. Spline designs the scene without code and a builder such as Framer or Webflow places it on a page. You get a result sooner, with less control over how it loads on a phone.

With a kit. A Promti kit is the scene and the page already built, and you put your work in it. For a portfolio, Studio is a white 3D gallery you walk down, with each project framed and lit with its caption, then your services, your team, your clients and a form. You add three to eight projects as pictures or film stills, your words and your colours, and you download every file. It costs €500, once.

Custom. If you want your own scene — your own room, your own object — a custom 3D website is made from scratch and starts at €750, at a fixed price agreed before work starts.

What to put in it

Fewer projects, better shown. Three to eight is enough: the visitor remembers the last piece they saw, not the twentieth. Choose the ones you’d want the next job to look like.

For each project: what the brief was, what you did, and the result. A picture hung on a wall says “nice”; a line under it says what you are for.

Who you are, in a few sentences, with a face or a name. Then one way to reach you at the end — a form, an email, a booking link — not five.

Services, if you take clients. If you’re looking for a job rather than clients, replace them with what you’d like to work on.

Three ways a 3D portfolio works against you

The work is hard to find. If every word of the portfolio lives inside the 3D canvas, Google doesn’t index it: its own guide says content rendered in a canvas isn’t indexed. Keep the name, the headings, the project titles and the text in HTML, over the scene, so a search for your name finds you. How to keep a 3D page both fast and findable is in Speed, SEO and 3D.

The scroll fights the visitor. 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. A portfolio is opened on a phone from a message or a profile more often than you’d like; check yours on one.

It can’t be turned down. The W3C’s guidance lists dizziness and nausea among the reactions of people with vestibular disorders. A portfolio that honours the reduce-motion setting of the visitor’s system lets them turn it down. In Promti’s kits the browser’s own scrolling stays on touch screens and whenever reduced motion is requested.

Is a 3D portfolio worth it for you?

Yes, if your field is visual or spatial and the way the work is shown is part of the pitch: a studio, an architect, a motion designer, someone selling 3D itself. The page then proves something before the first project opens.

Less so if your work is mostly text or code, if people open your portfolio to find one fact fast, or if you need to be found for many different searches: a normal multi-page site does that better, and one page or several goes into why.

A middle way is common: the 3D page as the front door, and plain pages behind it for the case studies, each with its own address and title for Google.

Before you publish

Open it on a mid-range phone, on mobile data. Look at the first screen: is your name there as text, and does something happen in the first seconds?

Put a title and a description on the page that say who you are and what you do — Google’s starter guide asks for both to be specific — and a real address, ideally your own domain: buy a domain and publish for free go through it.

Ask someone who isn’t in your field to find your email in ten seconds. If they can’t, the scene is in the way.

Questions

What is a 3D portfolio website?
A portfolio whose page is a real-time 3D scene drawn by the visitor’s browser with WebGL — a gallery, a room, an object — through which your projects are shown, usually as you scroll.
Can I make a 3D portfolio website with three.js?
Yes. three.js is free and open source (MIT licence) and its manual starts from creating a scene. You’ll also need to handle loading models, memory and phones yourself; making a 3D website yourself goes through what’s hard.
How many projects should a 3D portfolio have?
Three to eight is a good range: enough to show range, few enough that the visitor sees all of them. In the Studio kit, that’s exactly the number the gallery takes.
Will a 3D portfolio rank on Google?
Only if its words are real HTML. Google says it doesn’t index what is rendered in a canvas, so the name, headings and project titles have to be text over the scene. For many different searches, add normal pages for each project.
How much does a 3D portfolio cost?
Doing it yourself costs your time. A Promti Studio kit costs €500, paid once, with no monthly fee, and a custom 3D site from Promti starts at €750. The routes to compare are in what a 3D website costs.

What a site made with Promti looks like

One kit for each kind of business, each with its live demo. Your words, your colours and your pictures go in its place.