Getting started with creating 3D experiences for the Web
A Product Designer’s perspective on starting your journey with Three.js.
Have you guys ever wondered, how one can create amazing websites which involve real-time 3D interactions and features on platforms like awwwards? These websites can provide a much more immersive experience than a conventional website while attracting a large audience because of their unique visuals. I wanted to explore why such an impressive technology was not known to so many people even in the tech industry.
Due to my fascination with interactive 3D Experiences, I have always found myself exploring fields like Game Design, Mixed Reality, and 3D Animation. A few months back, I realized that we can use a language named “Three.js” to create these immersive 3D experiences for the web. To continue on my journey of exploring various 3D fields, I decided to give Three.js a try!
Three.js is a Javascript library based on WebGL that allows us to create 3D web experiences much more easily than native WebGL. I know you must be like, what the heck is WebGL now? So, WebGL is a JavaScript API for rendering interactive 2D and 3D graphics within any compatible web browser without the use of plug-ins. To put it in simpler terms, WebGL is what allows us to create these 3D experiences though it is pretty tough to learn. Three.js just makes the process of creating these 3D websites easier and more fun.
PS: You would need hundreds of lines of code just to make a cube rotate in native WebGL! So I would recommend sticking to Three.js only if you are looking to create 3D websites. 😂
Coming back to Three.js, it has a large community and one of the best documentation which makes the learning process a lot simpler than it seems initially. Don’t just believe me on this and explore its website on your own. You would be introduced to some great projects built with three.js and tutorials to getting started with your first project.
How I started with Three.js 🥳
I have never been a huge fan of programming! Being from a computer science background I do possess some coding skills but it is not something I enjoy which is why I started exploring design a few years back. But programming in Three.js is way different! The instant outcome of your efforts makes it a lot more rewarding and interesting to continue forward which I always felt was missing from conventional programming.
I started my learning adventure with the help of an online course named ‘Three.js Journey’ by Bruno Simon. Bruno is a French developer, and despite not having a very substantial background in English, he simplifies advanced concepts and presents them effortlessly. He is a pioneer in the field and I have nothing but the utmost respect for the work he has done for the community. Just have a look at his portfolio and tell me if it’s not one of the most creative websites you have ever seen!
My Experience so far… ✨
I haven’t finished the course, but it has exceeded all my expectations so far. It is very well structured and so comprehensive that I believe it is the only course one would need to get good at Three.js and start building amazing 3D experiences. Although lessons in the course are great, just watching them won’t make you good at Three.js. You would have to spend quite a bit of time practicing the concepts you have learned and exploring documentation on your own.
So far in my journey, I have created a few small 3D experiences. I truly believe creating small projects is the best way to learn any new skill. They are simply a great way to apply the concepts learned while also creating tangible pieces of work that one could share with the rest of the world. All of my projects have been those that were part of the course but I have always tried to extend them further by either adding some unique elements or reflecting my own creative style.
Outro 👋🏻
And that’s pretty much it! Most people don’t really know about Three.js and through this story, I just wanted to introduce them to this world of amazing possibilities. If you are intrigued by what you have seen in this article then there’s nothing left but to actually start with creating your first project ( just a rotating cube should be fine, nothing too fancy yet! 😁 ). You can set up your first file either by referring to the official documentation I shared earlier or by hundreds of basic tutorials available on youtube.
In any case, if you are feeling too inspired and have already decided to make a career as a 3D web developer 😂 then I would recommend checking out Bruno’s course as it is the most comprehensive Three.js course available on the web.
If you would like to learn the basics of three.js or how to create one of my projects. Please let me know, and I would be more than happy to share my learnings and how you can go about creating one of these.
PS: Trust me they are not as complicated to build as they might look! 🙂
This is my first piece of writing besides presenting my own projects. Hopefully, it has provided some value to you. If so, be sure to 👏🏽 below (You can give 50 claps at once, just click and hold on the clap button). Looking forward to your suggestions :)
Thanks for reading ❤️. I hope it was worth your time.
Wanna get in touch for a project or just wanna talk?
Hit me up at himanshuaneja99@gmail.com or connect via Linkedin
