Comprendre la 3D en Javascript (ThreeJS) en 5 minutes

Avec un peu de connaissance en Javascript, tu peux faire des choses incroyables en 3D avec ThreeJS. C’est beaucoup plus simple que ça en a l’air et c’est tellement fun. Le seul problème d’accès, c’est la première barrière d’apprentissage. Aujourd’hui, je te fais tomber cette barrière en 5 minutes. T’auras plus qu’à t’amuser.

C’est quoi ThreeJS ?

ThreeJS est une bibliothèque en Javascript, créée par Mr.doob, qui te permet de manipuler des objets 3D directement dans le navigateur. En fait, ce qu’il faut comprendre c’est que ThreeJS, via le Javascript, permet d’utiliser WebGL dans un canvas HTML5.

WebGL est une API Javascript qui permet de créer du rendu graphique 2D et 3D.
Un canvas est un composant HTML qui fait partie de la spécification HTML5 et qui permet d’afficher des rendus graphiques.

ThreeJS, via Javascript, te permet de piloter du WebGL, et donc de la 3D. Et le truc de fifou c’est qu’aucune installation et/ou plugin n’est nécessaire. C’est incroyable cette affaire non ?

Donc en résumé, on a une librairie Javascript(ThreeJS) qui manipule une API Javascript pour faire du rendu graphique (WebGL) dans un composant HTML5. Facile !

Et la tu vas me dire, pourquoi passer par ThreeJS ? Si en fait derrière c’est du WebGL, pourquoi pas faire du WebGL directement ?

La réponse est simple. ThreeJS simplifie et raccourcit à l’extrême le code nécessaire pour faire tout ce que tu veux. ThreeJS fait toute la partie complexe pour toi, tu as juste à faire du Javascript simple de ton côté.

Donc si tu as de simples connaissances en Javascript, ThreeJS te donne le pouvoir de faire des choses incroyables en 3D.

Mais concrètement, comment ça marche ?

Comment ça marche ?

Pour comprendre comment fonctionne ThreeJS à haut niveau il faut te mettre à la place d’un réalisateur de film. Oui, voilà pouf, j’ai décidé, t’es un réalisateur de film maintenant.

Et pour filmer ton film en Javascript, tu vas avoir besoin de créer et manipuler plusieurs éléments clefs.

• La scène

Tu peux voir ça comme le monde 3D dans lequel tu vas bosser. Tu vas disposer des objets dans cette scène. Tu vas créer autant d’objets que tu veux dans ta scène via les mesh.

• Les mesh

Les mesh sont simplement les objets qui vont être présents dans ta scène. Il te faudra mettre de la lumière sur ces objets pour les voir. Pour les voir, il faudra les filmer. Pour les filmer, il te faut une caméra.

• La caméra

Comme dans la vraie vie, la caméra va montrer un point de vue de ta scène. On va parler de champs de vue, field of view (fov) en anglais, pour être précis. En bougeant cette caméra, tu vas faire rentrer ou sortir des objets de ce champ de vue. C’est ce qu’on voit dans ce champ de vue de cette caméra qui sera envoyé au moteur de rendu.

• Le moteur de rendu

Le moteur de rendu prend la scène et la caméra en paramètre. Avec ça, il t’affiche tout dans le canvas HTML5 dont je te parlais au début. Le moteur de rendu va produire une image à chaque fois que ton écran est rafraichi. En général, 60 images par secondes donc. C’est ça qui donne vie à ton animation !

J’imagine que tout ça peut toujours rester vachement abstrait pour le moment. Il faut que je te fasse un dessin pour rendre ça plus concret. Attention les yeux, place à mes talents de dessinateur.

Ha il est beau celui-là. Je suis assez fier de cette affaire.

Ça devrait être beaucoup plus clair déjà entre les explications et le dessin. Mais on commence à se connaitre, je sais que tu veux voir du code maintenant.

Fais voir le code

OK alors en guise de Hello World on va faire le truc le plus simple possible. On va coder le schéma que je t’ai fait juste avant.

Une scène basique avec un cube au milieu. Sauf qu’à la place du cube, on va mettre un cylindre, juste parce que j’ai envie. On va l’éclairer, on va le faire tourner sur lui-même et surtout on va le mettre dans le champ de vue de la caméra.

Je vais fortement commenter chaque ligne pour que tu comprennes tout ce qui se passe. Je vais également fréquemment parler de la documentation officielle, donc n’hésite pas à la lire au fur et à mesure en même temps.

On commence par déclarer notre scène, sans ça, rien n’est visible ! Ensuite le moteur de rendu pour notre scène. Sans ça, aucune image ne sera créée et affichée à l’utilisateur. Ensuite on veut une caméra pour filmer la scène. Ici on va utiliser une caméra de type perspective. Les options permettent de configurer le champ de vue.

const scene = new THREE.Scene()
const renderer = new THREE.WebGLRenderer()
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)

On a déjà tout pour afficher des choses. C’est donc le tour de la création du cylindre via un mesh ! Pour créer un mesh on a besoin de deux choses.

La forme géométrique que va avoir l’objet. Ici on veut un cylindre donc CylinderGeometry est parfait pour notre besoin.

Le matériau de cet objet. Le matériau est la version numérique de matériaux du monde réel. Les matériaux contrôlent la couleur de l’objet et le degré de réflexion ou de matité de la surface. Ici on met un matériau basique de couleur rouge.

Avec ces deux parties, on peut créer notre objet, l’ajouter à la scène et placer la caméra au-dessus.

const geometry = new THREE.CylinderGeometry(5, 5, 20, 32)
const material = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true })
const cylinder = new THREE.Mesh(geometry, material)

scene.add(cylinder)
camera.position.z = 20

Ensuite, on va mettre le rendu du moteur de rendu en plein écran et l’ajouter dans la page HTML via le canvas HTML5 !

renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

Pour finir, on va animer tout ça. On va créer une fonction d’animation qui va être appelée en boucle à l’infini. À chaque passage dans cette fonction on va :

• faire tourner le cylindre sur lui-même
• demander au moteur de rendu de créer et d’afficher une image
• rappeler cette même fonction d’animation

function animate() {
    cylinder.rotation.x += 0.01
    cylinder.rotation.y += 0.01

    renderer.render(scene, camera)

    requestAnimationFrame(animate)
}

animate()

Je te mets tout dans un codepen et je te laisse jouer avec !

J’ai essayé de faire en sorte que cet article soit une autoroute de compréhension pour ton premier contact avec la 3D. Je pense sincèrement que passée cette première barrière de compréhension, tu peux vite faire des choses incroyables !

Il y a quelques semaines, je n’avais jamais touché de près ou de loin à la 3D. J’ai appris sur le tas. En partant de l’exemple basique que je viens de te présenter, en quelques jours, j’ai créé une expérience web 3D qui te fait traverser l’univers dans ton navigateur.

Check moi cette affaire :

J’en suis vraiment super fier et je t’invite à aller jeter un œil. Y’a une histoire, de la musique et ça décoiffe. Un vrai show ! Si t’es encore plus curieux, tu as tout le code source sur mon GitHub.

Épilogue

Si je peux arriver à faire ce genre de truc dans l’espace en une semaine, c’est la preuve que n’importe qui peut le faire. Tout ce que tu peux imaginer comme animation est à portée de main avec tes connaissances en Javascript. Maintenant que tu as la base ThreeJS, à toi de voir si l’aventure te tente.