In this article I’m hoping to enlighten you about Three.js. I’ll go over main concepts you’ll need to know in order to create a basic 3D scene with animations.
I should probably mention before you get any further, that I will not be explaining how to code in Three.js. My intention for this document is to highlight key concepts for 3D programming, in which anyone would need to understand before diving into code.
So What Is It?
Three.js is a 3D graphical library using JavaScript for creating unique applications and immersive user experiences on the web. More specifically, Three.js is a library to simplify and extend the WebGL API.
In a nutshell, WebGL (Web Graphics Library) utilises the power of your GPU to draw 3D stuff on the web, because a CPU alone just doesn’t cut it – especially when you are rendering at 60 fps. This means whilst the CPU can carry on running the rest of your computer, the GPU does what it was designed to do.
The reason you would want to use Three.js over native WebGL, is that when it comes to developing large scale projects, WebGL is long-winded and repetitive. For example, it would take more than 100 lines of code to draw a triangle – the building block for all shapes. Comparatively, in just a few lines of Three.js, you can have a whole 3D scene.
Lets Begin With Some Examples
I would imagine that, by being here, you are already familiar with what Three.js can do. If not, definitely check out the following examples and I can assure that you will get excited about learning it!
The most common use that I see for Three.js is to make a website stand out. A simple but effectictive example is the site for Powerhouse Company. Notice the use of camera movement and the layer depth to make it seem 2D and 3D at the same time. In terms of standing out, it takes an innovative concept to display their portfolio, and executes it brilliantly.
If you want to really see the extent of Three.js’s power, look no further than Kode Sports Club. KSC is an award winning project which turned the opening of it’s sports club into a virtual playground where you can explore and find collectables. Imagine trying to run this with a CPU alone – the computer would melt down!
Some more-than-honourable mentions:
- http://oatthegoat.co.nz/intl.html
- https://bruno-simon.com/
- https://heraclosgame.com/
- https://prior.co.jp/discover/en
- https://www.midwam.com/en
- https://eyes.nasa.gov/apps/mars2020/
Important Setup Concepts
In order to begin your new Three.js app, you must become familiar with some things. As a simplified description, our app is constructed from 3 primary entities: the scene, camera and renderer.
Scene
The scene is the world you’re creating and has properties such as background colour and fog. Inside the scene you’ll find light objects and mesh objects.
- Lights are self-explanatory, they provide light for the scene. Styles include ambient lights (minimal performance cost), point lights (moderate performance cost) and spot lights (high performance cost).
- Meshes are geometries with a material. For example, a tennis ball would have a spherical geometry and can be described as having a fuzzy material without much of a reflection. Three.js has a collection of simple geometries (sphere, box, torus, etc.) that can be quickly utilised, and a bunch of materials too. For more complex geometries & materials, you might want to export objects from a program such as Blender. The recommended format to use is glTF (GL Transmission Format), but other formats are accessible too.
Camera
The camera is also self-explanatory: it’s the point of view for the user to see the scene, with properties such as near, far and field of view. Similarly to an object, it can be added to the scene, and even linked to another object within the scene, e.g. if you wanted it to follow a character within a game.
Renderer
The renderer is a different type of entity. It’s the mechanism that draws your 3D scene onto a 2D canvas (the html element for drawing to), depending on where the camera is. Hence the parameters to construct a renderer are the camera and scene.
Animation
With knowledge of the previous concepts, you’re ready to create a static scene with objects inside. The next step from here is to sprinkle some movement into your virtual world.
Basic Animation
The simplest and quickest way to test out some animation is to transform an object by updating one of it’s movement parameters. This could be the position of an object, it’s rotation, or it’s scale. Of course, you’ll only see this movement once your application is rerendered.
If you want to see something more exciting, you could increment a movement parameter inside a recursive function that calls itself on each frame, which would happen many times per second. For example, if you were to increment the x-axis rotation of an object by 6 degrees, with a 60 FPS renderer, the object would do a full 360 degrees rotation around the x-axis every second.
Note that rotation is actually calculated in radians, so technically, 6 deg would be written as π/30 or 0.0174533.
Complex Animation
Animation like this is great for simple movements such as a continuous rotation, but what if you wanted a timeline of movements? What if you wanted an object to wait for 7 seconds and then spin around 42 times in 3 seconds? I suppose you could write some code in a loop, but that would quickly get complicated and inefficient. Welcome GSAP!
GSAP
GSAP (GreenSock Animation Platform) is a high-performance animation library produced for JavaScript, and inherently, Three.js. It’s so jam-packed with features that it would need it’s own blog just to cover the basics!
To demonstrate its simplicity, let’s say you were trying to tackle the example I mentioned in the previous paragraph. For this you would use the “To” method. Then all you would need to do is pass the object, duration, delay and the rotation; and voilà, it’s done in one line of code!
The beauty of GSAP is that each animation like this has its own timeline; meaning it can be paused, restarted, reversed, etc. without affecting other animations. I would recommend diving into their documentation for visual examples and more.
Where To Go From Here?
There are many features and concepts that I haven’t touched upon. To name some big ones:
Interactions, physics, particles, shaders, processing, importing, exporting, PBR (Physically Based Rendering), Blender, and a lot more.
Conclusion
Although there are alternative 3D JavaScript libraries out there, a quick google makes it clear that Three.js is the most popular as it sits at #1 on most lists on the web. It has a strong community and more than 1,400 contributors on github at time of writing. It gets patched & updated monthly from Mr. Doob (the creator) and is still very stable. Not to mention there is seemingly infinite open-source examples on their official website, so if you get stuck on a particular concept you may find the answer there.
I would recommend researching other libraries for yourself, because they may be more tailored to your ambitions. But ultimately, Three.js is likely to have everything you need for your 3D project!