fix grammatical errors

threejs/lessons/fr/threejs-fundamentals.md

@@ -2,7 +2,7 @@ Titre: Three.js, principes de base
 Description: Votre première leçon sur Three.js, commençant par les principes de base
 TOC: Principes de base
 
-Ceci est le premier article d'une série consacrée à three.js.
+Ceci est le premier article d'une série consacrée à Three.js.
 [Three.js](https://threejs.org) est une bibliothèque 3D qui a pour objectif
 de rendre aussi facile que possible l'inclusion de contenu 3D dans une page web.
 
@@ -10,7 +10,7 @@ Three.js est souvent confondu avec WebGL puisque la plupart du temps, mais
 pas toujours, elle exploite WebGL pour dessiner en 3D.
 [WebGL est un système très bas niveau qui ne dessine que des points, des lignes et des triangles](https://webglfundamentals.org).
 Faire quelque chose d'exploitable avec WebGL requiert une certaine quantité de code
-et c'est là que three.js intervient. Elle prend en charge des choses
+et c'est là que Three.js intervient. Elle prend en charge des choses
 telles que les scènes, lumières, ombres, matériaux, textures, mathématiques 3D, en bref,
 tout ce que vous avez à écrire par vous même si vous aviez à utiliser WebGL directement.
 
@@ -23,7 +23,7 @@ donc la plupart des utilisateurs devraient être capables d'exécuter ce code.
 Si vous souhaitez exécuter ce code sur un très vieux navigateur, nous vous recommandons
 un transpileur tel que [Babel](https://babel.io).
 Bien sûr, les utilisateurs exécutant de très vieux navigateurs ont probablement
-des machines incapables de faire tourner three.js.
+des machines incapables de faire tourner Three.js.
 
 Lors de l'apprentissage de la plupart des langages de programmation,
 la première tâche que les gens font est de faire afficher à l'ordinateur
@@ -31,15 +31,15 @@ la première tâche que les gens font est de faire afficher à l'ordinateur
 un cube en 3D. Donc, nous commencerons par "Hello Cube!".
 
 Avant de débuter, nous allons tenter de vous donner un idée de la structure
-d'une application three.js. Elle requiert de créer un ensemble d'objets
+d'une application Three.js. Elle requiert de créer un ensemble d'objets
 et de les connecter. Voici un diagramme qui représente une application
-three.js de petite taille:
+Three.js de petite taille:
 
 <div class="threejs_center"><img src="resources/images/threejs-structure.svg" style="width: 768px;"></div>
 
 Voici ce qui est à remarquer dans le diagramme ci-dessus :
 
-* Il y a un `Renderer`. C'est sans doute l'objet principal de three.js. Vous passez
+* Il y a un `Renderer`. C'est sans doute l'objet principal de Three.js. Vous passez
   une `Scene` et une `Camera` à un `Renderer` et il effectue le rendu (dessine) de la
   partie de la scène 3D qui est à l'intérieur de l'espace visible (en réalité une pyramide tronquée ou *frustum*)
   de la caméra dans une image 2D affichée dans un canevas (*canvas*).
@@ -52,11 +52,11 @@ Voici ce qui est à remarquer dans le diagramme ci-dessus :
   hiérarchique de type parent/enfant, arborescente, et indique où les objets apparaissent et
   comment ils sont orientés. Les enfants sont positionnés et orientés par rapport à leur parent.
   Par exemple, les roues d'une voiture sont les enfants du châssis impliquant que si l'on déplace
-  ou oriente la voiture, les roues suiveront automatiquement son déplacement. Plus de
+  ou oriente la voiture, les roues suivront automatiquement son déplacement. Plus de
   détails sont donnés dans [l'article sur les graphes de scène](threejs-scenegraph.html).
 
-  Il est à noter sur que ce diagramme `Camera` est patiellement placée dans le graphe de scène.
-  Cela permet d'attirer l'attention qu'en three.js, contrairement aux autres objets, une `Camera` ne doit
+  Il est à noter sur que ce diagramme `Camera` est patiellement placé dans le graphe de scène.
+  Cela permet d'attirer l'attention qu'en Three.js, contrairement aux autres objets, une `Camera` ne doit
   pas forcément faire partie du graphe de scène pour être opérationnelle. Une `Camera`, de la même
   façon que les autres objets, enfant d'un autre objet, se déplace et s'oriente par rapport à son
   objet parent. A la fin de [l'article sur les graphes de scène](threejs-scenegraph.html), l'inclusion
@@ -80,29 +80,29 @@ Voici ce qui est à remarquer dans le diagramme ci-dessus :
   [propriétés de surface utilisées pour dessiner la géométrie](threejs-materials.html)
   telles que la couleur à utiliser ou le pouvoir réfléchissant (brillance). Un matériau (`Material`)
   peut aussi se référer à un ou plusieurs objets `Texture` dont l'utilité est, par exemple, de plaquer
-  une image sur la surface d'un géométrie.
+  une image sur la surface d'une géométrie.
 
 * Les objets `Texture` représentent généralement des images soit [chargées de fichiers image](threejs-textures.html),
   soit [générées par le biais d'un canevas](threejs-canvas-textures.html) ou
-  [résultent du rendu d'une autre scène](threejs-rendertargets.html).
+  [résultant du rendu d'une autre scène](threejs-rendertargets.html).
 
 * Les objets `Light` représentent [différentes sortent de lumière](threejs-lights.html).
 
 Maintenant que tout cela a été défini, nous allons présenter un exemple de type *"Hello Cube"* utilisant un
-nombre minimum d'élements three.js :
+nombre minimum d'élements Three.js :
 
 <div class="threejs_center"><img src="resources/images/threejs-1cube-no-light-scene.svg" style="width: 500px;"></div>
 
-Tout d'abord, chargeons three.js :
+Tout d'abord, chargeons Three.js :
 
 ```html
 <script type="module">
-import * as THREE from './resources/threejs/r127/build/three.module.js';
+import * as THREE from './resources/threejs/r130/build/three.module.js';
 </script>
 ```
 
 Il est important d'écrire `type="module"` dans la balise script.
-Cela nous autorise l'utilisation du mot-clé `import` pour charger three.js.
+Cela nous autorise l'utilisation du mot-clé `import` pour charger Three.js.
 Il y a d'autres manières de le réaliser, mais depuis la version 106 (r106),
 l'utilisation des modules est recommandée. Ils ont l'avantage de pouvoir
 facilement importer les autres modules dont ils ont besoin. Cela nous
@@ -116,7 +116,7 @@ Ensuite, nous avons besoin d'une balise `<canvas>` :
 </body>
 ```
 
-Nous allons demander à three.js de dessiner dans ce canevas donc nous devons le rechercher
+Nous allons demander à Three.js de dessiner dans ce canevas donc nous devons le rechercher
 dans le document html :
 
 ```html
@@ -138,14 +138,14 @@ dans le canevas. Par le passé, il y a eu aussi d'autre *renderers* tels que
 qui utiliser WebGL pour effectuer une rendu 3D dans le canevas.
 
 Notez qu'il y a quelques détails ésotériques ici. Si vous ne passez pas un
-canevas à three.js, il va en créer un pour vous mais vous aurez à l'ajouter
-au document. Où l'ajouter peut dépendre de contexte d'utilisation et vous aurez
-à modifier votre code en conséquence. Passer un canevas à three.js nous apparaît donc
+canevas à Three.js, il va en créer un pour vous mais vous aurez à l'ajouter
+au document. Où l'ajouter peut dépendre du contexte d'utilisation et vous aurez
+à modifier votre code en conséquence. Passer un canevas à Three.js nous apparaît donc
 plus flexible. Nous pouvons mettre le canevas n'importe où et le code le retrouvera.
 Dans le cas contraire, nous aurons à coder où insérer le canevas, ce qui amènera
 probablement à changer le code si le contexte d'utilisation change.
 
-Ensuite, nous avons besoin d'une caméra. Nous créerons une `PerspectiveCamera`.
+Ensuite, nous avons besoin d'une caméra. Nous créons une `PerspectiveCamera`.
 
 ```js
 const fov = 75;
@@ -157,7 +157,7 @@ const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
 
 `fov` est le raccourci pour `field of view` ou champ de vision.
 Dans ce cas, 75 degrés d'ouverture verticale. Il est à noter que
-la plupart des angles dans three.js sont exprimés en radians à l'exception
+la plupart des angles dans Three.js sont exprimés en radians à l'exception
 de la caméra perspective.
 
 `aspect` est l'aspect de l'affichage dans le canevas. Cela sera détaillé
@@ -175,7 +175,7 @@ cubes et prismes.
 <img src="resources/frustum-3d.svg" width="500" class="threejs_center"/>
 
 L'espacement entre les plans *near* et *far* est déterminé
-par le champ de vue. La largeur est fixée par le champ de vue et l'aspect.
+par le champ de vision. La largeur est fixée par le champ de vision et l'aspect.
 
 Tout ce qui est dans le *frustum* est dessiné. Ce qui est à l'extérieur ne l'est pas.
 
@@ -191,15 +191,15 @@ Voici ce que nous voudrions voir :
 
 <img src="resources/scene-down.svg" width="500" class="threejs_center"/>
 
-Dans le schéma ci-dessous, nous pouvons voir que notre caméra est placée
+Dans le schéma ci-dessus, nous pouvons voir que notre caméra est placée
 en `z = 2`. Elle regarde le long de la direction -Z.
 Notre *frustum* démarre à 0.1 unités de la caméra et s'étend jusqu'à 5 unités devant elle.
 Comme le schéma est vu du haut, le champ de vue est affecté par l'aspect.
 Notre canvas est deux fois plus large que haut donc le champ de vue horizontal
 est plus grand que les 75 degrés spécifié pour le champ vertical.
 
-Ensuite, nous créons une `Scene`. Dans three.js, une `Scene` est la racine
-du graphe de scène. Tout ce que nous voulons que three.js dessine doit être ajouté
+Ensuite, nous créons une `Scene`. Dans Three.js, une `Scene` est la racine
+du graphe de scène. Tout ce que nous voulons que Three.js dessine doit être ajouté
 à la scène. Cela sera davantage détaillé dans [un futur article sur le fonctionnement des scènes](threejs-scenegraph.html).
 
 ```js
@@ -216,14 +216,13 @@ const boxHeight = 1;
 const boxDepth = 1;
 const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
 ```
-Puis nous créons un matériau basique et fixons sa couleur.
-Elle peut être spécifiée au format hexadécimal (6 chiffres) du standard CSS.
+Puis nous créons un matériau basique et fixons sa couleur, qui peut être spécifiée au format hexadécimal (6 chiffres) du standard CSS.
 
 ```js
 const material = new THREE.MeshBasicMaterial({color: 0x44aa88});
 ```
 
-Nous créons ensuite un maillage (`Mesh`). Dans three.js, il représente la combinaison
+Nous créons ensuite un maillage (`Mesh`). Dans Three.js, il représente la combinaison
 d'une `Geometry` (forme de l'objet) et d'un matériau (`Material` - aspect
 d'un objet, brillant ou plat, quelle couleur, quelle texture appliquer, etc.)
 ainsi que la position, l'orientation et l'échelle de l'objet dans la scène.
@@ -238,7 +237,7 @@ Finalement, nous ajoutons le maillage à la scène.
 scene.add(cube);
 ```
 
-Nous alors effectuer le rendu de la scène en appelant la fonction *render* du *renderer*
+Nous pouvons, maintenant, effectuer le rendu de la scène en appelant la fonction *render* du *renderer*
 et en lui passant la scène et la caméra.
 
 ```js
@@ -250,10 +249,10 @@ Voici un exemple fonctionnel :
 {{{example url="../threejs-fundamentals.html" }}}
 
 Il est difficile de déterminer s'il s'agit d'un cube 3D puisque nous
-l'observons suivant l'axe -Z auquel le cube est lui même aligné.
+l'observons suivant l'axe -Z sur lequel le cube est lui même aligné.
 Nous n'en voyons donc qu'une face.
 
-Nous nous proposons de l'animer en le faisant tourner et cela fera clairement
+Animons notre cube en le faisant tourner et cela fera clairement
 apparaître qu'il est dessiné en 3D. Pour l'animation, nous effectuerons son rendu
 dans une boucle de rendu en utilisant
 [`requestAnimationFrame`](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame).
@@ -278,7 +277,7 @@ requestAnimationFrame(render);
 voulez animer quelque chose. Nous lui passons une fonction à appeler.
 Dans notre cas, c'est la fonction `render`. Le navigateur appellera cette fonction
 et, si nous mettons à jour l'affichage de la page, le navigateur refera le rendu
-de la page. Dans notre cas, nous appelons la fonction `renderer.render` de three
+de la page. Dans notre cas, nous appelons la fonction `renderer.render` de Three.js
 qui dessinera notre scène.
 
 `requestAnimationFrame` passe à notre fonction le temps depuis lequel la page est chargée.
@@ -287,8 +286,8 @@ avec des secondes. C'est pourquoi, nous l'avons converti.
 
 A présent, nous appliquons sur le cube des rotations le long des axes X et Y en fonction du temps écoulé.
 Les angles de rotation sont exprimés en [radians](https://en.wikipedia.org/wiki/Radian).
-Sachant que 2 pi radians fait faire un tour complet, notre cube effectuera une rotation complète
-sur chaque axe en à peu près 6.28 secondes.
+Sachant que 2 PI radians fait faire un tour complet, notre cube effectuera une rotation complète
+sur chaque axe en, à peu près, 6,28 secondes.
 
 Nous effectuons alors le rendu de la scène et
 demandons une autre image pour l'animation afin de poursuivre notre boucle.
@@ -338,9 +337,9 @@ Cela devrait à présent apparaître très clairement en 3D.
 Pour le sport, ajoutons 2 cubes supplémentaires.
 
 Nous partageons la même géométrie pour chaque cube mais un matériau différent par cube
-de sorte que chacun d'eux soit affecté d'une couleur différente.
+afin qu'ils aient une couleur différente.
 
-Tout d'abord, nous définissons une fonction qui crée une nouveau matériau
+Tout d'abord, nous définissons une fonction qui crée un nouveau matériau
 avec la couleur spécifiée. Ensuite, elle créé un maillage à partir de la
 géométrie spécifiée, l'ajoute à la scène et change sa position en X.
 
@@ -357,8 +356,8 @@ function makeInstance(geometry, color, x) {
 }
 ```
 
-Ensuite, nous l'appellerons à 3 reprises avec 3 différentes couleurs
-et positions en X, puis nous conserverons ces instances de `Mesh` dans un tableau.
+Ensuite, nous l'appellons à 3 reprises avec 3 différentes couleurs
+et positions en X, puis nous conservons ces instances de `Mesh` dans un tableau.
 
 ```js
 const cubes = [
@@ -368,7 +367,7 @@ const cubes = [
 ];
 ```
 
-Enfin, nous ferons tourner ces 3 cubes dans notre fonction de rendu.
+Enfin, nous faisons tourner ces 3 cubes dans notre fonction de rendu.
 Nous calculons une rotation légèrement différente pour chacun d'eux.
 
 ```js
@@ -391,8 +390,8 @@ et voilà le résultat.
 
 Si nous le comparons au schéma précédent, nous constatons qu'il
 est conforme à nos attentes. Les cubes en X = -2 et X = +2
-sont partiellement en dehors du *frustum*. Ils sont également
-exagérément déformés puisque le champ de vue dépeint au travers du
+sont partiellement en dehors du *frustum*. Ils sont, de plus,
+exagérément déformés puisque le champ de vision dépeint au travers du
 canevas est extrême.
 
 A présent, notre programme est schématisé par la figure suivante :
@@ -407,8 +406,8 @@ Nous espérons que cette courte introduction vous aide à débuter.
 [La prochaine étape consiste à  rendre notre code réactif et donc adaptable à de multiples situations](threejs-responsive.html).
 
 <div class="threejs_bottombar">
-<h3>es6 modules, three.js et structure de dossiers</h3>
-<p>Depuis la version 106 (r106), l'utilisation de three.js privilégie les <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import">modules es6</a>.</p>
+<h3>es6 modules, Three.js et structure de dossiers</h3>
+<p>Depuis la version 106 (r106), l'utilisation de Three.js privilégie les <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import">modules es6</a>.</p>
 <p>
 Ils sont chargés via le mot-clé <code>import</code> dans un script ou en ligne
 par le biais d'une balise <code>&lt;script type="module"&gt;</code>. Voici un exemple d'utilisation avec les deux :
@@ -428,7 +427,7 @@ ce qui est différent des autres balises telles que <code>&lt;img&gt;</code> et
 </p>
 <p>
 Les références à un même script ne seront chargées qu'une seule fois à partir du
-moment où leur chemin absolu est exactement identique. Pour three.js, cela veut
+moment où leur chemin absolu est exactement identique. Pour Three.js, cela veut
 dire qu'il est nécessaire de mettre toutes les bibliothèques d'exemples dans une
 structure correcte pour les dossiers :
 </p>
@@ -466,7 +465,7 @@ import * as THREE from '../../../build/three.module.js';
 </pre>
 <p>
 Utiliser la même structure permet de s'assurer, lors de l'importation de
-three et d'une autre bibliothèque d'exemple, qu'ils référenceront le même fichier
+Three.js et d'une autre bibliothèque d'exemple, qu'ils référenceront le même fichier
 three.module.js.
 </p>
 <pre class="prettyprint">
@@ -483,7 +482,7 @@ import {OrbitControls} from 'https://unpkg.com/[email protected]/examples/jsm/contro
 vous pouvez consulter <a href="https://r105.threejsfundamentals.org">une version plus ancienne de ce site</a>.
 Three.js a pour politique de ne pas s'embarrasser avec la rétro compatibilité.
 Cela suppose que vous utilisez une version spécifique de la bibliothèque que vous aurez téléchargé et
-incorporé à votre projet. Lors de la mise à jour vers une nouvelle version de three.js,
+incorporé à votre projet. Lors de la mise à jour vers une nouvelle version de Three.js,
 vous pouvez lire le <a href="https://github.com/mrdoob/three.js/wiki/Migration-Guide">guide de migration</a>
 pour voir ce que vous avez à changer. Cela nécessiterait beaucoup de travail de maintenir
 à la fois une version de ce site avec les modules es6 et une autre avec le script global.