Three.js is a JavaScript library for creating 3D content in the browser, which makes it easier for us to create 3D experiences for web pages.
Cases developed with Three.js
Here I have collected some wonderful cases developed with Three.js for you
- https://bruno-simon.com
This kind of page is really cool, right? Want to learn how to make a web page like this right now?
Before learning Three.js, let’s first understand what WebGL is.
What is WebGL?
WebGL is a JavaScript API that allows us to draw triangles in a canvas very performantly. That’s right, triangles are the building blocks of a digital 3D world. Most modern browsers support this API, and since it can use the GPU for computation, it is fast.
Of course, WebGL is essentially a drawing library, and it doesn’t distinguish whether you use it to draw 3D or 2D graphics. In this course, we are of course focused on building 3D.
GPUs can perform computations in parallel. 3D models tend to consist of thousands of triangles, each with 3 points. When we render our model in the computer, the GPU is essentially calculating the positions of all the points. However, since the GPU can perform parallel computing, although the number of these points looks huge, the calculation can still be completed efficiently. In addition to this, the GPU also needs to draw the pixels of the face formed from these points.
Calculating the positions of all the points and drawing the pixels on the canvas is all done by the shader. Knowledge of shaders is difficult to master. We also need to know how to provide data to these shaders. For example, the rendering of the transformation model is computed based on the camera’s perspective. Another example is how lighting affects the color of each triangular face. Obviously, the triangular faces that are illuminated are brighter than the triangular faces that are not illuminated.
Using the WebGL API directly is very difficult, drawing a triangle on the canvas requires at least 100 lines of code. If you want to add perspective, lights, models and animate everything in this case, it’s only going to be harder.
Luckily there is Three.js
https://github.com/mrdoob/three.js
Three.js is a JavaScript library using the MIT open source license, and the underlying WebGL API works. This library was created by Ricardo Cabello (Mr.doob) and now has a large community organization to maintain updates, which are updated almost every month. When using it, we should pay attention to the tutorial and the current release version number of the Three.js library.
The biggest goal of this library is to simplify the processing of our difficulties with WebGL. We can draw 3D scenes with animation in just a few lines of code, without having to understand the obscure knowledge points such as shaders, matrix algorithms, etc.
Are there any other similar libraries?
Of course there are, such as Microsoft’s Babylon.js, Mozilla’s A-Frame, and Snapchat’s PlayCanvas, etc. These libraries are all designed to make it easier for us to use WebGL to create gorgeous Web3D experiences. Each of these libraries has its own advantages and is applicable to slightly different scenarios. In the future we can even use the WebGPU API that has gradually entered the browser standard.
However, Three.jsis still the most popular WebGL library at present. The related materials, communities, and cases are very rich. It is the best choice to start learning from here.
