ThreeJS

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](https://code-garage.fr/blog/pixijs-le-moteur-graphique-webgl-2d-et-canvas-le-plus-populaire/)** 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](https://code-garage.fr/blog/pourquoi-et-comment-minifier-son-code-avec-parcel/), 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 ``` ThreeJS

``` 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. :::custom three ::: > À 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](https://bruno-simon.com/) 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](https://cellar-c2.services.clever-cloud.com/content/2021/03/Capture-d--cran-2021-03-10---08.03.39.png) ::: bookmark [![](https://bruno-simon.com/social/share-1200x630.png)Bruno Simon - Creative developer](https://bruno-simon.com/) ::: ## La documentation officielle **Le site** [**https://threejs.org/**](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 !