Wawa Sensei logo

Qu'est-ce que React Three Fiber?

Avant de commencer à coder, examinons pourquoi nous utilisons React Three Fiber et en quoi il consiste.

WebGL

WebGL est une API JavaScript pour le rendu de graphiques interactifs en 2D et 3D dans n'importe quel navigateur web compatible sans utiliser de plug-ins.

Il est basé sur OpenGL ES, une API de bas niveau pour les graphiques 3D sur les appareils embarqués. WebGL permet le rendu accéléré par le matériel des graphiques 2D et 3D, ce qui rend possible la création de visualisations complexes et de jeux qui fonctionnent de manière fluide dans le navigateur.

Mais écrire du code WebGL directement est très difficile et chronophage. C'est là qu'intervient Three.js...

Three.js

Three.js est une bibliothèque JavaScript qui fournit une API simple pour créer et animer des graphiques 3D dans le navigateur en utilisant WebGL.

Il abstrait de nombreux détails de bas niveau de WebGL, ce qui facilite la création de scènes 3D complexes et d'animations.

React Three Fiber

React Three Fiber est un renderer React pour Three.js qui vous permet d'utiliser Three.js de manière déclarative, similaire à la manière dont vous utilisez React pour construire des interfaces utilisateur.

Vous le verrez également sous le nom de R3F.

R3F fournit un ensemble de composants React correspondant aux objets de Three.js, tels que les meshes, les lumières et les caméras, et vous permet d'utiliser le modèle de composant de React pour construire des scènes 3D et des animations complexes.

Pour un même résultat, le code React Three Fiber est beaucoup plus court et plus facile à lire que le code Three.js.

Voici un exemple simple pour afficher un cube avec les deux bibliothèques :

// Three.js
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// React Three Fiber
<mesh>
  <boxGeometry />
  <meshBasicMaterial color={0x00ff00} />
</mesh>

Poimandres

Poimandres, connu sous le nom de pmndrs, est un collectif de développeurs très actif, responsable de React Three Fiber et d'autres bibliothèques très utiles telles que :

  • drei : une collection de helpers utiles et de composants entièrement fonctionnels pour r3f
  • gltfjsx : un outil en ligne de commande qui génère des composants prêts à l'emploi à partir de fichiers gltf (format de fichier de modèles 3D)
  • react-spring : une bibliothèque d'animation basée sur la physique des ressorts
  • zustand : une solution de gestion d'état légère, rapide et évolutive
  • react-xr : un ensemble de composants React qui facilitent la création d'expériences VR et AR utilisant R3F ... et bien d'autres !

Nous utiliserons certaines de ces bibliothèques dans ce cours.

Je vous recommande de les consulter, et de le faire souvent, car elles sont constamment mises à jour avec de nouvelles fonctionnalités et améliorations.

Alternatives

Il existe d'autres bibliothèques qui offrent des fonctionnalités similaires pour d'autres frameworks front-end, telles que Threlte pour Svelte, TresJS pour Vue, et Angular Three pour Angular.

Récemment, pmndrs a également sorti drei-vanilla qui est une version vanilla de drei pour ceux qui souhaitent utiliser ses composants sans React.

< Introduction
Setup >