3D Web Graphics with Three.js

3D graphics in JavaScript

In recent years, modern browsers have acquired powerful features that can be accessed directly from JavaScript. We can easily add video and audio with HTML5 tags and create interactive components through the use of HTML5 canvas. Together with HTML5, modern browsers also support WebGLWeb Graphics Library is a JavaScript API for rendering 2D and 3D graphics in web browsers.. With WebGL, we can directly use the processing resources of our graphics card and create high-performance 2D and 3D computer graphics. Using WebGL directly from JavaScript to create and animate 3D scenes is a very complex, verbose, and error-prone process. Three.js is a library that makes this a lot easier. The following list shows some of the things that are very easy to do with Three.js:

• Create simple and complex 3D geometries and render them in any browser.

• Animate and move objects through a 3D scene.

• Apply textures and materials to our objects.

• Use different light sources to illuminate the scene.

• Use models from 3D modeling software and export generated models into these programs.

• Add advanced post-processing effects to our 3D scene.

• Create and work with custom shaders.

• Create, visualize, and animate point clouds.

• Create virtual reality (VR) and augmented reality (AR) scenes.

With a couple of lines of JavaScript (or TypeScriptTypeScript is JavaScript with syntax for types.), we can create anything, from simple 3D models to photorealistic scenes, all of which are rendered in real time in the browser. For instance, the following figure shows an example of what can be done with Three.js (we can see the animation for ourselves by opening this link in our browser):

Basic examples in Three.js

In this chapter, we’ll directly dive into Three.js and create a couple of examples that will show how Three.js works and get comfortable with it. We won’t dive into all the technical details yet. By the end of this chapter, we’ll be able to create a scene and run our first example in this course. 

We’ll start this course with a short introduction to Three.js and then quickly move on to the first few examples and code samples. Before we get started, let’s quickly look at the most important browsers out there and their support for WebGL (and WebGPU).

In this chapter, we’ll directly create a 3D scene and be able to run it on a desktop or mobile device. We’ll explain the relevant core concepts of Three.js. In this chapter, we’ll create two different scenes.

• The first one will show a basic geometry rendered in Three.js, as shown in the following figure: 

• After that, we’ll also quickly show how to load external models and how easy it is to create realistic-looking scenes. The result of the second example will look like this: 

Getting started with Three.js

Before we start working on these examples, we’ll look at the tools we need to easily work with Three.js and how to execute our first examples. 

In this chapter, we’ll cover the following topics: 

• Testing and experimenting with the examples 

• Rendering and viewing a 3D object 

• Introducing a couple of helper libraries for statistics and controlling the scene

Note: In this course, we do not need to worry about the local environment setup; we provide a complete working environment integrated into the lessons. However, we provide configurations for the local setup in the Appendix.