3D on the web provides endless possibilities – here’s how some designers are using it

There’s no denying that a website with 3D elements is impressive. It just is. Perhaps it’s because it’s also usually accompanied by some equally impressive interaction design, or that it's fascinating to see something brought to life in that way onscreen. Whatever it is, they tend to be websites you spend a fair bit of time exploring, so you should make sure you’re sitting comfortably before you begin digging around the five websites included in this month’s Double Click.

Hailing from DXR, Bureau Cool, Ezra Miller, Warriors Studio and Yes Studio, the sites featured below are all included because of their 3D facade – enjoy!

DXR: harleyweir.com

DXR is the collaborative studio of Daniel Baragwanath and Rifke Sadleir, both London-based creative coders who regular readers of It’s Nice That will be familiar with. The site the pair collaborated on, which sees them featured in this month’s Double Click, is a technically apt and sensitive project made for artist Harley Weir. Released at the beginning of lockdown, it saw Harley auctioning off ceramics; many of which were made in collaboration with her dad, who suffers from early onset Alzheimer’s, and in support of Alzheimer’s, those dealing with Covid 19-related issues and research into finding a cure for the disease.

“We wanted the site to feel like eBay in 2000 meets the British museum’s 3D archive. It needed to incorporate the playfulness of Harley’s sculptures but also convey the more serious issues around the site’s purpose,” DXR explains. The site therefore works as a kind of listing, with images of the sculptures designed fairly formulaically. Upon clicking on the image of a sculpture, however, you are taken to a 3D scan of the sculpture all of which were produced by Ash Jones. “Ash did an amazing job of capturing and 3D scanning the sculptures so that we could use them as assets online. He then went one step further and brought the main sculpture to life – a bust of Gerri Halliwell, made by Harley age 7 – to welcome visitors to the site,” DXR adds.

Finally, on the particularities of running an online auction like this, the duo tells us that the auctions themselves were handled directly via Harley’s DMs and email. “This meant we were able to cut out the middle-man costs like eBay listing fees and get every penny where it needed to go,” they outline. “Each piece went live for 24 hours over the course of a week, and by the end managed to raise over £15,000.” With its combination of minimalist type, limited colour, 3D scans and a talking Gerri Halliwell, the site perfectly merges the playful and sentimental; at once functional and enjoyable.

Languages used:

“PHP on Kirby CMS, vanilla Javascript and Three.js.”

Bureau Cool: itbegins.today

Next up is Bureau Cool, AKA Ben Wegscheider’s moody and stylised site for ∄, a techno club based in Kiev. The symbol which replaces the club’s name, Ben tells us, stands for “there does not exist” and Bureau Cool has been working together with the club “as an ongoing collaboration and developing a new site and concept for each programme – every three months.” Every programme gets its own unique IRL and is also teased via physical and digital giveaways during the previous season.

In terms of this particular programme, the idea, Ben explains was to “create something abstract, visually interesting and interactive which can be used throughout all communication.” Before officially launching, the background of the site remained abstract, whereas after being released (the version which is now live) the background morphs and transforms into the club’s symbol on scroll. It’s entirely in your face, over the top and frankly a little tiring to spend time on – but what better what to promote a techno club in Kiev?

The concept and direction for the site was developed by Bureau Cool in collaboration with RAM Studio.

Languages used:

“We used Kirby CMS as it’s very straight forward for the club’s team to populate and change contents. The visual part/frontend was developed using our own custom framework.”

Ezra Miller: rubber.band

Presenting work on a portfolio site in an entirely new way is no mean feat, but it’s something Ezra Miller has achieved in his design for Rubberband, a New York-based director duo. The concept, Ezra tells us, was to try and show their work in an “interesting, interactive way”, so he began by looking at their name and “tried to make something that felt physically tactile but was also a functional way to navigate through their work.” The result is a circle which rotates and reacts to your mouse movement while also displaying Rubberband’s projects. “I added layers of spring physics, mouse interaction, and shader effects in WebGL in order to give the main navigation hypnotic and fluid movement,” Ezra continues.

While it’s a fairly straightforward execution, it’s by no means easy to execute and the result is a site unlike many others we’ve seen. “It’s a relatively simple concept, without too much unnecessary information, and I think that’s part of its strength,” Ezra concludes.

Languages used:

“I used mainly vanilla JavaScript, with Three.js as the engine for WebGL, a physics library called traer.js, a routing library called navigo.js, and a little bit of jQuery. I also used GLSL for the shader effects.”

Warriors Studio: www.olympiagallery.org

With much of the world in lockdown in recent months, we’ve seen many a creative offer an alternative to visiting an IRL gallery space, and one of the best we’ve seen comes from Warriors Studio, with web design by Infinite Eye. Well-known for its yearly Graphic Design Festival Scotland International Poster Competition, this year the studio had to do things a little differently. “Olympia Gallery offers a virtual alternative to physical exhibitions. Through digital exhibition spaces, visitors can navigate curated work, engage with new and exciting projects, link to the people behind it, visit the gallery’s bookstore and connect with selected partners,” the studio explains. While working on this year’s GDFS, the team took the opportunity to ask: “What role can digital experiences play in addressing issues around accessibility? What role does physicality play in how we participate in events or festivals?” Alongside many other questions, Olympia Gallery is the answer.

Through creating a simulated exhibition space – a room which you can virtually travel around using your keys, the project also examines what makes something “real” – “particularly within graphic design where often a designer’s role is to bring ‘reality’ or a sense of authenticity to a project through visual communication.” Whereas other examples of this kind of project allows the user to freely move, the interaction with the artwork in Olympia Gallery is on a heightened level, miming the process of reading a statement next to a piece of work. This is combined with an identity inspired by the idea of the white cube, hence why the space is “a bright minimalist, neutral frame.” The studio has plans to continue developing this but concludes by saying, “ at the moment the gallery communicates publicly in a detached, matter of fact manner; partly mocking the standoffish illusion of prestige associated with elitism and art galleries.”

Languages used:

Craig Jardine from Infinite Eye says: “One key requirement was to develop something that worked on both desktop and mobile devices, without the need for any special software. We researched emerging technologies and settled on using ThreeJS, a modern Javascript 3D Library that allows us to do real 3D graphics within a standard web browser. Using that as a basis for the Olympia website, we then built an immersive gallery that is modular and can grow (and shrink) based on the number of exhibits to display. Using a ‘hybrid’ approach the artworks are placed into the gallery scene using code. That allows us to easily re-organise things, to load in images as they are required (keeping things fast) and it allows us to link each artwork to an HTML modal window with more information.

Another benefit of this approach is that each artwork within the virtual gallery can be linked to independently, pulling through an image and the correct data when shared on social media.”

Yes Studio: ponystep-magazine.com

Rounding off this month’s Double Click is a playful, interactive 3D site for Ponystep Magazine, designed by Yes Studio. Upon landing on the site, you’re presented with a line-up of magazines, neatly standing. One click and you realise that your mouse can be used to fire balls at this line-up, in turn knocking them all over the place. The site was designed by Yes Studio to launch the magazine, which it also designed. “There wasn’t a brief as such, the magazine was about to launch and we wanted to create something immediate that captured the magazine’s irreverent take on fashion,” the studio explains. An intuitive yet smart solution to get people to stay on the site and remember Ponystep, it’s a concept developed in tandem with Richard Mortimer, editor of the magazine.

Languages used:

“The site is built using Three.js and Ammo.js. Thank you to Ricardo Cabello, Juan Jose Luna Espinosa and everyone else who worked on these libraries.”

With advanced design capabilities and specialised features, Wix gives you the freedom to design and customise a website that expresses your vision, no matter your brand or business. To save 30 per cent on all yearly premium plans with Wix, use code “DoubleClick20” at checkout.