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 impressionant (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
Creative developer living in Paris, freelancer, former lead developer at Immersive Garden, former developer at Uzik and teacher.

La documentation officielle

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

J'espère que cet article vous aura été utile, et à bientôt sur le blog !

Les articles les plus populaires du blog

Envie de continuer à lire des articles autour du développement web (entre autres) ? Voici la sélection des articles de mon blog les plus lus par la communauté !

Voir la sélection 🚀

Recevez les articles de la semaine par e-mail pour ne rien manquer !

S'abonner à la newsletter 📧

À propos de l'auteur

Hello, je suis Nicolas Brondin-Bernard, ingénieur web indépendant depuis 2015 passionné par le partage d'expériences et de connaissances.

Aujourd'hui je suis aussi coach pour développeurs web juniors, tu peux me contacter sur nicolas@brondin.com, sur mon site ou devenir membre de ma newsletter pour ne jamais louper le meilleur article de la semaine et être tenu au courant de mes projets !


Photo par Kadir Celep sur Unsplash