3D Websites, Three.js and Blender

Don't ask me how it happened, but one day I suddenly became interested in 3D websites. I've seen a lot of them and my jaw has been dislocated ever since from how many times it keeps dropping.

If you are unaware of what I mean by a 3D website, I strongly recommend you check out Three.js. If you browse the library, you'll find various use cases for such websites. For instance, you have immersive experiences for music festivals, vibrant storytelling for children and even choosing your seat for a piano concerto inside a virtual concert hall. Probably one of the most famous examples of Three.js is the portfolio website of developer Bruno Simon . I've spent too long playing with it myself.

So you may be wondering, what exactly is Three.js?

Three.js is a JavaScript library that allows developers to create 3D experiences within the browser. It is in itself a skill to be learned as there are important concepts to master such as the Web Graphic Library (WebGL) API. This makes the initial 3D rendering possible. In fact you can create a 3D website with WebGL alone, but Three.js makes the process a tad bit easier. In addition you can have a moveable 'camera' per se, which can move on either the x-, y- or z-axis, and assumes the role of the user perspective. This creates the illusion that you're immersed in the virtual space. Texture mapping also comes into play and is also a skill in itself - just to add even more complexity - along with lighting and animation (if you want any movement from your primitives/shapes).

Bring all of this together and you've got yourself a 3D web app. Like everything though, it's not without its caveats.

Rendering a 3D model with a moveable camera on a freaking webpage is gonna be costly in terms of memory. When you create such a project, you're are doing it under the presumption that every user will have an operating system that will be able to run it. If you, however, view any of those Three.js projects on an old, poor performing laptop, you may have inadvertently created a furnace hotter than the surface of the sun.

Still, they are undeniably cool.

When I discovered Three.js and made my own 3D web experience, I kept toying with the idea of exploring it further. I knew as soon as I would, I would fall down a rabbit hole so deep, that the only way out was to go forwards. Well, I fell down said rabbit hole and upon such research, a tool kept being mentioned: Blender.

Blender is a desktop tool used primarily for 3D modelling. It's often mentioned by Three.js developers, because you can import 3D models you created from Blender into your JavaScript project. Because of this, I read multiple times that if you take the time to learn Blender, Three.js becomes easier to use and thus aids the developer through the 3D website journey. I was hesistant for a while as I didn't want to learn yet another tool, but my curiosity got the better of me and I decided to give it a try. Reading other people's experiences, I decided to start with a tutorial, as the Blender tool is incredibly overwhelming on first view.

It was only then that I found the Blender Guru. He has more than two decades of experience with the tool and posted in particular a series of videos on how to 3D model donuts for complete beginners . As a complete beginner, I can say with confidence that this tutorial is probably the best I've ever experienced. It's well-paced, descriptive and the instructor has a great sense of humour. Moreover, the guy has his own discord for users to troubleshoot their problems for other users to answer, so there are options if you get stuck.

I can't deny though that creating even just the desired donut with icing is undeniably challenging. Using the tool can be frustrating and you find yourself consistently asking: "what the hell am I doing with my life?" Despite all of this, and although I'm not quite finished with it myself, I can say that the process so far has been really rewarding.

Above is my own creation, thanks to this Blender tutorial. It's two donuts in a marble bowl on some woodchips. I call it, "Two donuts in a Marble Bowl on some Woodchips". One thing I noticed is that you need a powerful operating system to consistently render Blender models. My laptop was just about good enough, but to be able to render more complex designs, I'd need both a more powerful graphics card and a more powerful CPU.

Also worth noting, the Blender instructor consistently reminds you: the tutorial itself isn't just to teach you how to make a bunch of donuts in Blender; it's a way to introduce beginners to key Blender concepts, which you can takeaway and build stuff yourself. Looking back, there is a lot to take in and I doubt I'll be a master anytime soon. Nevertheless, I feel like I have what I need to start experimenting myself with the tool.

So where would this path take you if you were to pursue it? In my case it would improve my ability to develope more complicated 3D websites, and, as a pure coincidence, would also teach me 3D modelling skills.

However, it is no surprise that 3D Web Developers aren't really in high demand. It's quite a niche area, and it would be costly for a company to invest in such a design. Still, they are not unicorn positions and I've seen one or two positions here or there. The main problem is that said positions favour seniors who have more than 5 years' experience crafting 3D websites. And in all fairness it's not really a position where you want a Junior having complete control, as a lot can go wrong (even more so than with a regular website).

Nevertheless, considering the aforementioned rarity of such experience, any applicant who fits this profile is, in fact, truly a unicorn. In other words, they would be paid handsomely.

So give me five years and then we'll see if I make it happen.

But for now, it's purely a hobby project.