Introduced a decade ago, WebGL made 3D graphic rendering in a browser the cat’s meow. The window of excitement over 3D design in web browsers has gradually diminished over the last decade. Despite the downtrend, the development of the 3D platform continues. In this post, let’s take a look at five creative uses of 3D in web design that shows how the solution still crafts unique web experiences.
Many web developers and 3D enthusiasts point out this clever design on Steven Wittens’s personal site. Inspired by street art, it’s a wondrous design of twisting ribbons that’s both elegant and entertaining. Wittens says, “It embodies the differential principle of parallel transport. The up direction changes parallel to each curve, which means the ribbons never rotate in place. They only turn when they naturally want to.” Wittens says the animation seems to have a will of its own. It does.
This one’s just plain fun! It uses the by-now almost cliché Star Wars scrolling narrative. But instead of a long diatribe about what’s going on in a galaxy far, far away, we get a peek at Diane Martel’s portfolio. Martel’s a renowned choreographer, documentary and music video director. You can manipulate the scroll of her work with your mouse. Click and view, hover and reveal, or rotate and twist. The overall site is visually impressive. It’s the design of Ben Wegsheider, a pretty renowned artisan in his own right.
Campo Alle Comete
Since its launch, Campo Alle Comete remains highly regarded for its opening salvo. That’s the page with its floating city. Rendered almost completely in 3D, it’s a smart design that merges seamlessly into the application. From a tranquil collection of stars to the rotating and pulling of the city, it’s an impressive use of 3D. It’s demonstrative of what a designer can do with the likes of AQuest or Adobe XD.
Earth 2050 invites visitors to consider the opportunities and threats to our future and planet. Designers and illustrators upload content that explores future scenarios using an interactive portal. But it’s the homepage everyone remembers. It features a rotating Earth. Subdivided by geo-location, each area highlights an aspect of future life. Hover over any light and explore a topic. It’s a stunning showcase that shows what you can do with 3D rendering.
Mathis is a web developer who pumps up a relatively simple website with highly addictive 3D animation. “The inspiration mainly came from things I come across during my day,” Mathis explains. “I’ll try to recreate it and play around with the shapes to find nice ways to interact with them.” And he succeeded. His visuals make up three revolving sleek patterns you interact with. The simplicity is reminiscent of the earliest video game renderings which fascinated us.
You can make your websites playful, different and fun. With 3D incorporation, your website promises to be inviting to all users. It only requires a little creative inspiration in 3D website design and imagination.