Three.js, le moteur de rendu 3D pour Javascript

Envie de créer une animation ou un jeu en trois dimensions directement dans le navigateur ? Découvrez Three.js !

Article publié le 10/03/2021, dernière mise à jour le 20/09/2023

Three.js est simplement la bibliothèque de référence pour la création et le rendu de scènes en 3D avec Javascript et WebGL (par défaut).

Si vous n'êtes pas familier avec WebGL et les canvas, je vous invite à d'abord lire mon article sur Pixi.js dans lequel je présente ces concepts de base pour la 2D.

À noter que la librairie propose aussi des moteurs de rendus pour Canvas 2D, SVG et CSS3D, mais le rendu WebGL 3D est celui par défaut présenté dans tous les exemples et le plus répandu.

Avec Three.js il est possible de :

Créer des meshes (polygones) et des animations, d'importer des textures
D'ajouter des lumières et des caméras
D'importer des objets 3D pré-fabriqués
De générer des systèmes de particules
...

Comment s'en servir ?

Pour cet exemple j'ai utilisé les modules ES6 afin de ne pas avoir à importer toute la bibliothèque de Three.js qui pèse au total plus de 1Mo.

J'ai utilisé le bundler Parcel dont j'ai présenté le fonctionnement dans cet article, mais libre à vous d'en choisir un autre, comme Webpack par exemple.

Tout d'abord notre fichier html qui va servir de base à notre rendu ne contient que deux choses :

Le canvas qui servira de support à Three.js pour le rendu WebGL
Le script contenant l'import de la bibliothèque ainsi que la création de la scène et du rendu


<!-- 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>

L'objectif de cet exemple est de créer un simple cube tournant sur lui même, mais éclairé et filmé de telle sorte qu'on puisse voir les ombres se former sur les différentes faces du cube au fur et à mesure de la rotation.

C'est un exemple simple, mais un peu plus poussé que la démo basique de la bibliothèque et qui peut vous permettre de partir sur de bonnes bases.


//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();

Et voici le rendu en temps-réel ci dessous (le canvas est intégré à la page), ce n'est ni un GIF, ni une vidéo, mais bien un rendu WebGL.

À noter que le fond de la scène est créé en CSS spécifiquement pour cette page, en réutilisant le code ci-dessus, le fond de votre scène sera transparent, dû au paramètre {alpha: true} lors de la création du WebGLRenderer.

Un exemple de jeu réalisé avec Three.js

Si mon exemple de prise en main vous permet de voir que l'entrée en matière n'est pas si complexe que ça pour réaliser des scènes en 3D, il n'est pas très impressionnant (ce n'était pas le but).

En revanche, je vous invite à voir le portfolio d'un développeur de jeu appelé Bruno Simon sous la forme d'un jeu de voiture et ayant fait le tour du monde pour sa réalisation sans défaut avec Three.js pour le rendu et Cannon.js pour la gestion de la physique.

Capture d'écran du jeu, représentant une voiture et les instructions pour la contrôler

Bruno Simon - Creative developer

La documentation officielle

Le site https://threejs.org/ contient toute la documentation très bien écrite ainsi que des exemples de réalisation vraiment impressionnant, je vous recommande d'aller y jeter un oeil !

Kadir Celep sur Unsplash

Vous avez terminé l'article ?

Aucun commentaire pour l'instant