Have you ever looked at a website with beautiful 3D graphics and wonder how they did it? Surely there would’ve been countless hours spent on researching the math and hundreds of lines of code that would go into simply rendering a rotating pyramid, all done on Stack Overflow, of course. Well, sorry to rain on this parade, but the truth is simple and universal to every case when you think a website developer has done something innovative and time consuming: they just used a library. Three.js is one such library that allows for complicated 3D visuals to be rendered in browser, and today you’ll learn all about it.
Rendering 3D graphics in-browser is a task that has plagued web developers for decades. Back in the old days of 2011, WebGL was the de facto choice for rendering interactive 3D or 2D graphics. It allowed for users to interact with complicated displays without requiring any additional plugins, while also being enhanced with the option for GPU acceleration. While it was a leap in making graphics rendering simple and accessible to all developers and users, it had some limitations. WebGL was made to be simple and universal – it’s a low-level system, and so as a consequence, you’re very limited in what you can actually make with it without making your files packed with hundreds of lines of tedious code. That is where Three.js comes in.
WHAT IS THREE.JS?
Quite confusingly, Three.js actually released before WebGL. Ricardo Cabello, the original author and designer, had actually begun working on the library as far back as the early 2000s, first being developed on ActionScript, and later being ported to JavaScript as Cabello realized the potential benefits of transferring to a language that did not need to be compiled before each execution and offered platform independence. Initially released on April 24, 2010, Three.js was a simple renderer that offered basic capabilities, but it was the release of WebGL in 2011 that allowed the library to show its full capabilities. Currently, the library is built on the foundation of WebGL, and expands upon a lot of the basic features offered, such as the rendering of canvases and SVGs. It was the building on WebGL that allowed Three.js to be as popular as it is today – there are currently over 1300 contributors to its GitHub repository to date, with big features still being added over a decade after its release.
WHY SHOULD I CARE ABOUT THREE.JS?
Three.js was built with accessibility and ease of use in mind. The library itself, would you believe it, is written in JavaScript, and so allows for the rendering of graphics on the client side, but can also be rendered server side with some node.js magic. This means you can use Three.js to render a simple model on your site from your server, but also allow users to interact with something much more complex on the same site if their specs allow for it. Think of a car dealership who wants users to be able to interact with a 3D model of a car on offer – Three.js allows for you to host a simple model where users click through a slideshow-esque showcase of the car, or you could have a full, interactable breakdown of all of the components of the car that the user can rotate around and look through.
THREE.JS COMBINES A VARIETY OF FEATURES INTO ONE LIBRARY
A big part of any rendering, 3D or otherwise, is the math involved. Typically, you’d have a separate math library that handles all of the fancy linear algebra and calculus that might go into rendering a complex graphic, but Three.js includes all of this in its massive library. It has classes that are specifically designed for 3D math, and since it’s all contained under the same library, you can be sure that everything will work together. One of the most annoying things a software developer can deal with is when the 20 libraries they use just don’t seem to fit together, so having everything come under the same banner can reduce both the time you’ll waste and your blood pressure. Thank goodness for Three.js!
THRESS.JS IS STRUCTURED IN AN ACCESSIBLE WAY
The way that Three.js structures its rendering means that the learning curve won’t be too steep. It organizes all of the renders you’ll do, whether 3D or 2D, under a “Scene” container. This is analogous to a body tag in HTML, in the sense that everything else that you render will fall inside this container. Why do this? Well, the typical DOM used for rendering graphics such as canvases and SVGs are very limited in how you can manipulate elements – you’re typically allowed to rotate on only one axis and can only move elements in a 2D space. Now, while it is definitely possible to simulate the look of a 3D object completely in 2D, no sane web developer (if there even are any sane web developers), would spend hours trying to simulate a 3D environment when Three.js offers a much simpler solution – doing it all for you. Three.js includes a variety of subclasses that do exactly what you’d expect — “Light” renders a light source, “Mesh” renders an object, and “Camera” renders a, well, y’know, a camera.
THREE.JS RELIES HEAVILY ON WEBGL
While Three.js handles the setting up of scenes, it really relies on WebGL for a lot of its rendering – about 99% of Three.js apps use WebGL, so it’s important that you understand how it works too. WebGL expands on a lot of traditionally non-3D APIs, like the ‘canvas’ and ‘svg’ tags that you can use to tell the browser to draw certain shapes. WebGL simply offers you the ability to use these 2D drawing elements to render 3D elements – after all, 3D is really just fake anyway, whatever you’re drawing, you’re doing it to a 2D screen in the end. Obviously, running the complex algorithms to render a 3D object in 2D is quite taxing on computer hardware, so WebGL makes good use of hardware acceleration to efficiently render these objects on your screen. In Three.js, 3D objects are rendered through the “WebGLRenderer” class, which is what translates your life-like model of the Eiffel Tower into numbers that your GPU can efficiently process in memory.
New Features for Three.JS
You may have noticed that we mentioned that Three.js is still being updated with new features, so what are they? Well, in the pursuit to make the jobs of web developers even easier, Three.js supports a variety of animation features, including forward kinematics, inverse kinematics, keyframes, and armatures. While Pixar probably isn’t going to use it to win an Oscar, you can definitely use it to get the attention of users on your site. You can even export and import files from other 3D software such as Blender, so you may not even have to do that much coding to get some impressive looking graphics on your site. What’s more, through the use of the WebXR API, released in 2018, Three.js also completely supports virtual and augmented reality integration. Once you start using it in your projects, you’ll never want to go back.
Next Steps
Three.js is a powerful library that many web developers are including in their projects to give their website that three-dimensional edge. It’s incredibly easy to use, and we’re sure that you’ll find somewhere on your site to throw in a 3D model or two, so make sure to look more into Three.js and how it can help you out.
If you enjoyed this blog make sure to check out these blogs as well: NodeJS and 5 Things You Need to Know About It In 2021 or P5JS and 5 Things You Need to Know About It . They’re sure to help you elevate your JS game.
Kofi Group is proud to be a source of knowledge and insight into the startup software engineering world and offers a multitude of resources to help you learn more, improve your career, and help startups hire the best talent. If you are interested in learning more about what we do and how we can help you then get in touch or watch our Youtube videos for additional information.