Three.js, the 3D rendering engine for JavaScript

NicolasBrondinBernard

Author

@NicolasBrondinBernard

Want to create an animation or a three-dimensional game directly in the browser? Discover Three.js!

WebGL Three.js 3D Video game

Article published on 10/03/2021, last updated on 10/08/2026

Three.js is simply the go-to library for creating and rendering 3D scenes with JavaScript and WebGL (by default).

If you're not familiar with WebGL and canvas, I invite you to first read my article on Pixi.js in which I present these basic concepts for 2D.

Note that the library also offers rendering engines for Canvas 2D, SVG and CSS3D, but the 3D WebGL rendering is the default one shown in all the examples and the most widely used.

With Three.js it is possible to:

Create meshes (polygons) and animations, import textures
Add lights and cameras
Import pre-built 3D objects
Generate particle systems
...

How do you use it?

For this example I used ES6 modules so as not to have to import the entire Three.js library, which weighs in at over 1MB in total.

I used the Parcel bundler, whose workings I presented in this article, but feel free to choose another one, like Webpack for instance.

First, our HTML file that will serve as the base for our rendering contains only two things:

The canvas that will serve as the support for Three.js's WebGL rendering
The script containing the library import as well as the creation of the scene and the rendering


<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ThreeJS</title>
  </head>
  <body>
     <canvas id="three" width="300" height="150"></canvas>   
     <script src="js/index.js"></script>
  </body>
</html>

The goal of this example is to create a simple cube spinning on its own axis, but lit and filmed in such a way that we can see the shadows forming on the different faces of the cube as it rotates.

This is a simple example, but a bit more advanced than the library's basic demo, and it can give you a good foundation to build on.


//index.js

import { 
    Scene, 
    PerspectiveCamera, 
    WebGLRenderer, 
    BoxGeometry, 
    MeshPhongMaterial, 
    Mesh, 
    DirectionalLight, 
    AmbientLight 
} from 'three';

//Create the renderer which will take care of the graphics output
const WIDTH = 300;
const HEIGHT = 150;
const renderer = new WebGLRenderer({canvas:document.getElementById("three"), alpha: true});
renderer.setSize( WIDTH, HEIGHT );

//Create the scene which will contain all our objects
const scene = new Scene();

//Add a new camera, move it up and looking down a bit
const camera = new PerspectiveCamera(75, WIDTH/HEIGHT, 0.1, 1000);
camera.position.z = 1.5;
camera.position.y = 1;
camera.rotation.x = -0.6;

//Add a global light to the scene, not too bright
scene.add(new AmbientLight(0xffffff, 0.5));

//Create the cube and add it to the scene
const cube = new Mesh( 
    new BoxGeometry(), //Shape of the cub
    new MeshPhongMaterial({color: 0xffffff}) //Material (white color) that enables shadows
);
scene.add(cube);

//Add a specific light to improve shadows on cube
const directionalLight = new DirectionalLight( 0xffffff, 0.5 );
directionalLight.position.x = 10;
directionalLight.position.z = 10;
scene.add(directionalLight);


let r = 0;

function animate() {
    //On each animation frame, rotate the cube
    r += 0.01;
    cube.rotation.y = r;
    
    //Loop infinitely and re-render the scene
	requestAnimationFrame(animate);
    renderer.render(scene, camera);
}

animate();

And here is the real-time render below (the canvas is embedded in the page), it's neither a GIF nor a video, but an actual WebGL render.

Note that the background of the scene is created in CSS specifically for this page; if you reuse the code above, your scene's background will be transparent, due to the {alpha: true} parameter when creating the WebGLRenderer.

An example of a game made with Three.js

If my hands-on example shows you that getting started isn't all that complex for creating 3D scenes, it isn't very impressive (that wasn't the point).

On the other hand, I invite you to check out the portfolio of a game developer named Bruno Simon, in the form of a car game, which has traveled the world for its flawless execution using Three.js for rendering and Cannon.js for physics management.

Screenshot of the game, showing a car and the instructions for controlling it

Bruno Simon - Creative developer

The official documentation

The site https://threejs.org/ contains all the very well-written documentation as well as truly impressive examples, I recommend you go take a look!

Kadir Celep sur Unsplash

Finished reading this article?

Our newsletter1 email a week to understand it all

Go further

No spam. Only free content, news, and ever more resources to level up your skills!

Join +1500 developers

No comments yet