Fix french sentences for #51

threejs/lessons/fr/langinfo.hanson

@@ -6,16 +6,14 @@
   description: 'Apprendre à utiliser Three.js.',
   link: 'http://threejsfundamentals.org/',
   commentSectionHeader: '<div>Questions ? <a href="http://stackoverflow.com/questions/tagged/three.js">Les poser sur stackoverflow</a>.</div>\n        <div>Problèmes / bug ? <a href="http://github.com/gfxfundamentals/threejsfundamentals/issues">Les reporter sur github</a>.</div>',
-  missing: "Désolé, cet article n'a pas encore été traduit. [Les traductions sont bienvenue](https://github.com/gfxfundamentals/threejsfundamentals)! 😄\n\n[Voici l'article anglais originel pour le moment]({{{origLink}}}).",
+  missing: "Désolé, cet article n'a pas encore été traduit. [Les traductions sont le bienvenue](https://github.com/gfxfundamentals/threejsfundamentals)! 😄\n\n[Voici l'article anglais originel pour le moment]({{{origLink}}}).",
   toc: 'Table des matières',
   categoryMapping: {
     'basics': 'Bases',
-    'optimization' : 'Optimisation', 
+    'optimization' : 'Optimisation',
     'solutions': 'Solutions',
     'tips': 'Сonseils',
     'fundamentals': 'Principes de base',
     'reference': 'Référence',
   },
 }
-
-

threejs/lessons/fr/threejs-fundamentals.md

@@ -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.hs 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.
 
@@ -19,14 +19,14 @@ se conforment au style ES6. [Consultez ici une brève liste des choses que vous
 déjà censés connaître](threejs-prerequisites.html).
 
 La plupart des navigateurs qui supportent three.js se mettent à jour automatiquement
-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 
+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 
+Bien sûr, les utilisateurs exécutant de très vieux navigateurs ont probablement
 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 
+la première tâche que les gens font est de faire afficher à l'ordinateur
 `"Hello World!"`. Pour la programmation 3D, l'équivalent est de faire afficher
 un cube en 3D. Donc, nous commencerons par "Hello Cube!".
 
@@ -41,59 +41,59 @@ 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
   une `Scene` et une `Camera` à un `Renderer` et il effectue le rendu (dessine) de la
-  partie de la scene 3D qui est à l'intérieur de l'espace visible (en réalité une pyramide tronquée ou *frustum*)
+  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*).
 
 * Il y a un [graphe de scène](threejs-scenegraph.html) qui est une structure arborescente,
-  constituée de divers objets tel qu'un objet `Scene`, de multiple maillages (`Mesh`), 
+  constituée de divers objets tel qu'un objet `Scene`, de multiple maillages (`Mesh`),
   des lumières (`Light`), des groupes (`Group`), des objets 3D `Object3D` et des objets `Camera`.
-  Un objet `Scene` définit la racine d'un graphe de scène et contient des propriétés telles que 
+  Un objet `Scene` définit la racine d'un graphe de scène et contient des propriétés telles que
   la couleur d'arrière plan et le brouillard. L'ensemble de ces objets définissent une structure
-  hiérarchique de type parent/enfant, arborescente, et indique où les objets apparaissent et 
+  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 peuvent les enfants d'une voiture de sorte que le déplacement
+  Par exemple, les roues d'une voiture peuvent les enfants du châssis impliquant que le déplacement
   et l'orientation de la voiture déplace automatiquement les roues. Plus de détails sont donnés
   dans [l'article sur les graphes de scène](threejs-scenegraph.html).
 
-  Il est à noter que `Camera` est à moitié dans le graphe de scène sur le diagramme. 
-  Cela représente 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. Tout comme les 
-  autres objets, une `Camera`, comme tout enfant d'un autre objet, se déplace et s'oriente
-  par rapport à son objet parent. Il y a un exemple d'inclusion de multiples objets `Camera`
-  dans un graphe de scène à la fin de [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
+  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
+  de multiples objets `Camera` dans un unique graphe de scène est donné en exemple.
 
-* Les objets de type `Mesh` représentent une géométrie (`Geometry`) liée à un matériau (`Material`) 
-  spécifique. Les objets `Material` et `Geometry` peuvent liés à plusieurs objets `Mesh`
+* Les objets de type `Mesh` représentent une géométrie (`Geometry`) liée à un matériau (`Material`)
+  spécifique. Les objets `Material` et `Geometry` peuvent être liés à plusieurs objets `Mesh`
   simultanément. Par exemple, pour dessiner deux cubes bleus à des positions différentes, nous
-  pouvons utiliser deux objets `Mesh` pour spécifier les positions et orientations de 
-  chaque cube. Nous pouvons utiliser seulement une géométrie (`Geometry`) pour décrire les données
-  spatiales du cube et seulement un matériau (`Material`) pour spécifier la couleur bleu. 
+  pouvons soit utiliser deux objets `Mesh` pour spécifier les positions et orientations de
+  chaque cube; soit nous pouvons utiliser seulement une géométrie unique (`Geometry`) pour décrire les
+  données spatiales du cube et un matériau unique (`Material`) pour spécifier la couleur bleu.
   Les deux objets `Mesh` peuvent ainsi référencer les mêmes objets `Geometry` et `Material`.
 
-* Les objets `Geometry` représentent les données associés aux sommets d'une géométrie telle qu'une
-  sphère, un cube, un avion, un chien, un chat, un humain, un arbre, un bâtiment, etc... 
+* Les objets `Geometry` représentent les données associées aux sommets d'une géométrie telle qu'une
+  sphère, un cube, un avion, un chien, un chat, un humain, un arbre, un bâtiment, etc...
   Three.js fournit plusieurs types intégrés de [primitives géométriques](threejs-primitives.html).
-  Vous pouvez aussi [créer vos propres géométries](threejs-custom-geometry.html) ou 
+  Vous pouvez aussi [créer vos propres géométries](threejs-custom-geometry.html) ou
   [charger des géométries à partir d'un fichier](threejs-load-obj.html).
 
-* Les objets `Material` représentent les 
+* Les objets `Material` représentent les
   [propriétés de surface utilisées pour dessiner la géométrie](threejs-materials.html)
-  telles que le couleur à utiliser ou à quel point elle est brillante. Un matériau (`Material`) peut 
-  aussi se référer à un ou plusieurs objets `Texture` dont l'utilité est, par exemple, de plaquer
+  telles que le couleur à utiliser ou leur 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.
-  
+
 * 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 
+  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).
 
 * Les objets `Light` représentent [différentes sortent de lumière](threejs-lights.html).
 
-Maintenant que tout cela est présente, nous allons mettre en place le plus petit *"Hello Cube"* possible 
-qui ressemble à ceci :
+Maintenant que tout cela a été défini, nous allons présenter un exemple de type *"Hello Cube"* utilisant au
+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">
@@ -101,13 +101,12 @@ import * as THREE from './resources/threejs/r114/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. 
-Il y a d'autres manières de le réaliser, mais depuis la version 106 (r106), 
+Il est important d'écrire `type="module"` dans la balise script.
+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 
-épargne d'avoir à charger les scripts supplémentaires dont ils dépendent 
-à la main.
+facilement importer les autres modules dont ils ont besoin. Cela nous
+épargne d'avoir à charger à la main les scripts supplémentaires dont ils dépendent.
 
 Ensuite, nous avons besoin d'une balise `<canvas>` :
 
@@ -138,13 +137,13 @@ dans le canevas. Par le passé, il y a eu aussi d'autre *renderers* tels que
 `WebGL2Renderer` ou `WebGPURenderer`. Pour le moment, il y a un `WebGLRenderer`
 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 
+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
-plus flexible. Nous pouvons mettre le canevas n'importe où et le code le retrouveras. 
-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. 
+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`.
 
@@ -157,31 +156,31 @@ 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 est dans la direction verticale. Il est à noter que
-la plupart des angles dans three.js sont exprimés en radians à l'exception 
-de la caméra perspective. 
+Dans ce cas, 75 d'ouverture verticale. Il est à noter que
+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é
 [dans un autre article](threejs-responsive.html). Toutefois, par défaut,
 un canevas est de taille 300x150 pixels ce qui lui confère l'aspect 300/150 ou 2.
 
-`near` et `far` délimitent la portion de l'espace devant la caméra dont 
+`near` et `far` délimitent la portion de l'espace devant la caméra dont
 le rendu est effectué. Tout ce qui est avant ou après est découpé (*clipped*),
 donc non dessiné.
 
-Ces 4 paramètres définissent une pyramide tronquée ou *"frustum"*. 
+Ces 4 paramètres définissent une pyramide tronquée ou *"frustum"*.
 En d'autres termes, il s'agit d'une autre forme 3D à l'instar des sphères,
 cubes et prismes.
 
 <img src="resources/frustum-3d.svg" width="500" class="threejs_center"/>
 
-La hauteur de l'espace entre les plans *near* et *far* est déterminée
+L'espacement entre les plans *near* et *far* est déterminée
 par le champ de vue. La largeur est fixée par le champ de vue et l'aspect.
 
 Tout ce qui est dans le *frustum* est dessiné. Ce qui est à l'extérieur ne l'est pas.
 
 La caméra regarde par défaut suivant l'axe -Z, +Y pointant le haut.
-Nous mettons notre cube à l'origine donc nous devons déplacer la caméra de l'origine légèrement vers son arrière 
+Nous mettons notre cube à l'origine donc nous devons déplacer la caméra de l'origine légèrement vers son arrière
 pour voir quelque chose.
 
 ```js
@@ -192,14 +191,14 @@ 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 
-en `z = 2`. Elle regarde le long de la direction -Z. 
+Dans le schéma ci-dessous, 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 
+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 scene. Cela est davantage détaillé dans [un futur article sur le fonctionnement des scènes](threejs-scenegraph.html).
 
@@ -208,7 +207,7 @@ const scene = new THREE.Scene();
 ```
 
 Ensuite nous créons une géométrie de type `BoxGeometry` qui contient les données pour un parallélépipède.
-Quasimment tout ce que nous souhaitons afficher avec Three.js nécessite une 
+Quasiment tout ce que nous souhaitons afficher avec Three.js nécessite une
 géométrie qui définit les sommets qui composent nos objets 3D.
 
 ```js
@@ -224,7 +223,7 @@ Elle peut être spécifiée au format hexadécimal (6 chiffres) du standard CSS.
 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.
@@ -250,13 +249,13 @@ 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é. 
+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é.
 Nous n'en voyons donc qu'une face.
 
-Nous nous proposons de l'animer 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 
+Nous nous proposons de l'animer 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).
 
 Voici notre boucle :
@@ -278,29 +277,29 @@ requestAnimationFrame(render);
 `requestAnimationFrame` est une requête auprès du navigateur dans le cas où vous
 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 
+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
 qui dessinera notre scène.
 
-`requestAnimationFrame` passe à notre fonction le temps depuis lequel la page est chargée. 
-Il est mesuré en millisecondes. Il est parfois plus facile de travailler 
+`requestAnimationFrame` passe à notre fonction le temps depuis lequel la page est chargée.
+Il est mesuré en millisecondes. Il est parfois plus facile de travailler
 avec des secondes. C'est pourquoi, nous l'avons converti.
 
-Nous affectons à présent le temps écoulé aux rotations X et Y du cube. 
-Elle sont exprimées en [radians](https://en.wikipedia.org/wiki/Radian). 
-2 pi radians font un tour complet donc notre cube effectue une rotation complète
+A présent, nous appliquons sur le cube des rotations sur les 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.
 
-Nous effectuons alors le rendu de la scène et 
+Nous effectuons alors le rendu de la scène et
 demandons une autre image pour l'animation afin de poursuivre notre boucle.
 
 A l'extérieur de la boucle, nous appelons `requestAnimationFrame` une première fois pour activer la boucle.
 
 {{{example url="../threejs-fundamentals-with-animation.html" }}}
 
-C'est un peu mieux mais il est toujours difficile de percevoir la 3d. 
+C'est un peu mieux mais il est toujours difficile de percevoir la 3d.
 Ce qui aiderait serait d'ajouter de la lumière.
-Three.js propose plusieurs type de lumière que nous détaillerons dans 
+Three.js propose plusieurs type de lumière que nous détaillerons dans
 [un futur article](threejs-lights.html). Pour le moment, créons une lumière directionnelle.
 
 ```js
@@ -313,13 +312,13 @@ Three.js propose plusieurs type de lumière que nous détaillerons dans
 }
 ```
 
-Les lumières directionnelles ont une position et une cible. Les deux sont par défaut en 0, 0, 0. 
-Dans notre cas, nous positionnons la lumière en -1, 2, 4, de manière à ce qu'elle soit légèrement 
+Les lumières directionnelles ont une position et une cible. Les deux sont par défaut en 0, 0, 0.
+Dans notre cas, nous positionnons la lumière en -1, 2, 4, de manière à ce qu'elle soit légèrement
 sur la gauche, au dessus et derrière notre caméra. La cible est toujours 0, 0, 0 donc elle va
 éclairer vers l'origine.
 
-Nous avons également besoin de changer le matériau. `MeshBasicMaterial` ne réagit pas à la 
-lumière. Nous le changerons par un `MeshPhongMaterial` qui y réagit.
+Nous avons également besoin de changer le matériau car `MeshBasicMaterial` ne s'applique pas aux
+lumières. Nous le remplaçons par un `MeshPhongMaterial` qui est affecté par les sources lumineuses.
 
 ```js
 -const material = new THREE.MeshBasicMaterial({color: 0x44aa88});  // cyan
@@ -338,10 +337,10 @@ Cela devrait à présent apparaître très clairement en 3D.
 
 Pour le sport, ajoutons 2 cubes supplémentaires.
 
-Nous partagerons la même géométrie pour chaque cube mais un matériau différent
-de sorte que chacun soit d'une couleur différente.
+Nous partageons la même géométrie pour chaque cube mais un matériau différente par cube
+de sorte que chacun d'eux soit affecté d'une couleur différente.
 
-Tout d'abord, nous définissons une fonction qui créé un nouveau matériau
+Tout d'abord, nous définissons une fonction qui crée une 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.
 
@@ -358,7 +357,7 @@ function makeInstance(geometry, color, x) {
 }
 ```
 
-Ensuite, nous l'appelerons à 3 reprises avec 3 différentes couleurs
+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.
 
 ```js
@@ -369,8 +368,8 @@ const cubes = [
 ];
 ```
 
-Enfin, nous ferons tourner ces 3 cubes dans notre fonction de rendu. 
-Nous calculons une rotation légèrement différente pour chacun.
+Enfin, nous ferons tourner ces 3 cubes dans notre fonction de rendu.
+Nous calculons une rotation légèrement différente pour chacun d'eux.
 
 ```js
 function render(time) {
@@ -390,21 +389,21 @@ et voilà le résultat.
 
 {{{example url="../threejs-fundamentals-3-cubes.html" }}}
 
-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 
+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
 canevas est extrême.
 
-Notre programme a à présent cette structure :
+A présent, notre programme est représenté par la structure suivante :
 
 <div class="threejs_center"><img src="resources/images/threejs-3cubes-scene.svg" style="width: 610px;"></div>
 
-Comme nous pouvons le constater, nous avons 3 objets de type `Mesh`, chacun référençant 
+Comme nous pouvons le constater, nous avons 3 objets de type `Mesh`, chacun référençant
 la même `BoxGeometry`. Chaque `Mesh` référence également un `MeshPhongMaterial` unique
 de sorte que chaque cube possède une couleur différente.
 
-Nous espérons que cette courte introduction vous aide à débuter. 
+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">
@@ -412,7 +411,7 @@ Nous espérons que cette courte introduction vous aide à débuter.
 <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 des deux
+par le biais d'une balise <code>&lt;script type="module"&gt;</code>. Voici un exemple d'utilisation avec les deux :
 </p>
 <pre class=prettyprint>
 &lt;script type="module"&gt;
@@ -423,15 +422,15 @@ import * as THREE from './resources/threejs/r114/build/three.module.js';
 &lt;/script&gt;
 </pre>
 <p>
-Les chemins doivent être absolus ou relatifs. Les deuxièmes commencent toujours par
-<code>./</code> ou <code>../</code>,
+Les chemins doivent être absolus ou relatifs. Un chemin relatif commencent toujours par
+<code>./</code> ou par <code>../</code>,
 ce qui est différent des autres balises telles que <code>&lt;img&gt;</code> et <code>&lt;a&gt;</code>.
 </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 
+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
 dire qu'il est nécessaire de mettre toutes les bibliothèques d'exemples dans une
-structure correcte pour les dossiers
+structure correcte pour les dossiers :
 </p>
 <pre class="dos">
 unDossier
@@ -460,14 +459,14 @@ unDossier
 <p>
 La raison nécessitant cette structuration des dossiers est parce que les scripts
 des exemples tels que <a href="https://github.com/mrdoob/three.js/blob/master/examples/jsm/controls/OrbitControls.js"><code>OrbitControls.js</code></a>
-ont des chemins relatifs tels que
+ont des chemins relatifs tels que :
 </p>
 <pre class="prettyprint">
 import * as THREE from '../../../build/three.module.js';
 </pre>
 <p>
-Utiliser la même structure permet de s'assurer lors de l'import à la fois de 
-three et d'une autre bibliothèque des exemples qu'ils référenceront le même fichier
+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.module.js.
 </p>
 <pre class="prettyprint">
@@ -480,14 +479,15 @@ import {OrbitControls} from './someFolder/examples/jsm/controls/OrbitControls.js
 import * as THREE from 'https://unpkg.com/[email protected]/<b>build/three.module.js</b>';
 import {OrbitControls} from 'https://unpkg.com/[email protected]/examples/jsm/controls/OrbitControls.js';
 </pre>
-<p>Si vous préférez la vieille manière<code>&lt;script src="path/to/three.js"&gt;&lt;/script&gt;</code>,
+<p>Si vous préférez la vieille manière <code>&lt;script src="path/to/three.js"&gt;&lt;/script&gt;</code>,
 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étrocompatibilité.
-Cela suppose que vous utilisiez une version spécifique de la bibliothèque que vous télécharger et 
-incorporez à votre projet. Lors de la mise à jour vers une nouvelle version, vous pouvez lire le<a href="https://github.com/mrdoob/three.js/wiki/Migration-Guide">guide de migration</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,
+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. 
-Aussi, nous n'utiliserons que les modules es6. Comme dit par ailleurs, 
-pour le support des anciens navigateurs, vous pouvez utiliser un 
+à la fois une version de ce site avec les modules es6 et une autre avec le script global.
+Pour cela, nous n'utiliserons que les modules es6. Comme dit par ailleurs,
+pour le support des anciens navigateurs, vous pouvez utiliser un
 <a href="https://babeljs.io">transpileur</a>.</p>
-</div>
+</div>

threejs/lessons/fr/threejs-prerequisites.md

@@ -7,13 +7,13 @@ Ils supposent que :
   * vous savez programmer en Javascript ;
   * vous savez ce que c'est qu'un *DOM*, comment écrire du HTML, ainsi que créer des éléments *DOM*
 en Javascript ;
-  * vous savez exploiter les 
-[modules es6](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) 
-que ce soit via le mot clé import ou via les balises `<script type="module">` ;
-  * vous avez des connaissances en CSS et savez ce que sont 
-[les sélecteurs CSS](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors). 
+  * vous savez exploiter les
+[modules es6](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import)
+que ce soit via le mot clef import ou via les balises `<script type="module">` ;
+  * vous avez des connaissances en CSS et savez ce que sont
+[les sélecteurs CSS](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors).
   * vous connaissez ES5, ES6, voire ES7 ;
-  * vous savez que le navigateur n'exécute que du Javascript de façon évènementiel via des fonctions de rappel (*callbacks*) ;
+  * vous savez que le navigateur n'exécute que du Javascript de façon événementiel via des fonctions de rappel (*callbacks*) ;
   * vous savez ce qu'est une fonction de clôture (*closure*).
 
 Voici ci-dessous quelques rappels et notes.
@@ -21,7 +21,7 @@ Voici ci-dessous quelques rappels et notes.
 ## Modules es6
 
 Les modules es6 peuvent être chargé via le mot-clé `import` dans un script
-ou en ligne via une balise `<script type="module">`. Voici un exemple des deux 
+ou en ligne via une balise `<script type="module">`. Voici un exemple des deux
 
 ```html
 <script type="module">
@@ -39,14 +39,14 @@ Davantage de détails se trouvent à la fin de [cet article](threejs-fundamental
 
 ## `document.querySelector` et `document.querySelectorAll`
 
-Vous pouvez utiliser `document.querySelector` pour sélectionner le 
+Vous pouvez utiliser `document.querySelector` pour sélectionner le
 premier élément qui correspond à un sélecteur CSS.
 `document.querySelectorAll` retourne tous les éléments qui correspondent
 à un sélecteur CSS.
 
 ## `onbody` n'est pas nécessaire
 
-Beaucoup de pages vielles d'il y a 20 ans utilisent 
+Beaucoup de pages vielles d'il y a 20 ans utilisent
 
     <body onload="somefunction()">
 
@@ -89,7 +89,7 @@ Cette fonction se *clôt* sur la variable `foo`. Voici [davantage d'information]
 
 ## Comprendre le fonctionnement de `this`
 
-`this` est une variable passée automatiquement aux fonctions tout comme les arguments y sont passé.
+`this` est une variable passée automatiquement aux fonctions tout comme les arguments y sont passés.
 Une explication simple est que quand vous appelez une fonction directement comme ceci :
 
     somefunction(a, b, c);
@@ -109,7 +109,7 @@ Ce fonctionnement peut dérouter lorsqu'il est combiné avec les fonctions de ra
 Ceci ne fonctionne pas comme s'y attendrait une personne inexpérimentée parce que, quand
 `loader.load` appelle la fonction de rappel, il n'utilise pas l'opérateur `.` et donc
 par défaut `this` est null (à moins que loader le fixe arbitrairement à une valeur).
-Si vous souhaitez que `this` se rapporte à `someobject` quand la fonction de rappelle 
+Si vous souhaitez que `this` se rapporte à `someobject` quand la fonction de rappelle
 est activée, vous devez dire à Javascript de le lier à la fonction.
 
      const callback = someobject.somefunction.bind(someobject);
@@ -122,7 +122,7 @@ est activée, vous devez dire à Javascript de le lier à la fonction.
 ### `var` est déprécié. Privilégiez l'usage de `const` et/ou `let`
 
 Il n'y a **PLUS AUCUNE** raison d'utiliser `var`. L'utiliser est dorénavant considéré
-comme une mauvaise pratique. Utilisez `const` si la variable ne sera jamais réaffectée,
+comme une mauvaise pratique. Utilisez `const` si la variable n'est jamais réaffectée,
 ce qui se passe dans la majorité des cas. Utilisez `let` dans le cas où la valeur change.
 Cela aidera à éviter beaucoup de bogues.
 
@@ -130,7 +130,7 @@ Cela aidera à éviter beaucoup de bogues.
 
 `for of` est récent, `for in` est ancien. `for in` avait des problèmes résolus par `for of`
 
-Voici un exemple où vous pouvez itérer au travers de toutes les paires clé/valeur
+Voici un exemple où vous pouvez itérer au travers de toutes les paires clef/valeur
 d'un objet :
 
 ```js
@@ -141,7 +141,7 @@ for (const [key, value] of Object.entries(someObject)) {
 
 ### Utilisez `forEach`, `map`, et `filter` quand c'est utile
 
-Les fonctions [`forEach`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), 
+Les fonctions [`forEach`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach),
 [`map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map), et
 [`filter`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) ont
 été ajoutées aux tableaux (*arrays*) et sont utilisés de manière assez intensives en JavaScript moderne.
@@ -161,7 +161,7 @@ nouveau code
 
 ### Utilisez les raccourcis pour la déclaration des objets
 
-ancien code
+ancien code :
 
 ```js
  const width = 300;
@@ -175,7 +175,7 @@ ancien code
  };
 ```
 
-nouveau code
+nouveau code :
 
 ```js
  const width = 300;
@@ -191,7 +191,7 @@ nouveau code
 
 ### Utilisez l'opérateur d'expansion `...`
 
-L'opérateur d'expansion a de multiples usages. Voici un exemple 
+L'opérateur d'expansion a de multiples usages. Voici un exemple :
 
 ```js
  function log(className, ...args) {
@@ -202,7 +202,7 @@ L'opérateur d'expansion a de multiples usages. Voici un exemple
  }
 ```
 
-et un autre exemple
+et un autre exemple :
 
 ```js
 const position = [1, 2, 3];
@@ -211,9 +211,9 @@ somemesh.position.set(...position);
 
 ### Utilisez `class`
 
-La syntaxe pour créer des objets au comportement de classe avant ES5 
-n'était connu que des programmeurs chevronnés. Depuis ES5, vous pouvez
-à présent [utiliser le mot-clé `class`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes)
+La syntaxe pour créer des objets au comportement de classe avant ES5
+n'était connue que des programmeurs chevronnés. Depuis ES5, vous pouvez
+à présent [utiliser le mot-clef `class`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes)
 qui est plus proche du style C++/C#/Java.
 
 ### Comprendre les accesseurs (*getters* et *setters*)
@@ -250,13 +250,13 @@ const foo = (function(args) {/* code */}).bind(this));
 Les promesses (*promises*) aident à l'utilisation de code asynchrone.
 Async/await aident à l'utilisation des promesses.
 
-Cela nécessiterait des développements trop long à détailler ici. 
+Cela nécessiterait des développements trop long à détailler ici.
 Toutefois, vous pouvez [en lire davantage sur les promesses ici](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises)
 et sur [async/await ici](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_await).
 
 ### Utilisez les gabarits de libellés (*template Literals*)
 
-Les gabarits de libellés sont des chaînes de caractères délimités par
+Les gabarits de libellés sont des chaînes de caractères délimitées par
 des accents graves au lieu d'apostrophes doubles (*quotes*).
 
     const foo = `this is a template literal`;
@@ -274,9 +274,9 @@ const bar = "this\nis\na\ntemplate\nliteral";
 
 ainsi `foo` et `bar` ci-dessus sont similaires.
 
-L'autre est que vous pouvez sortir du mode chaîne et insérer des fragments
-de code Javascript en utilisant `${javascript-expression}`. 
-C'est l'objet des gabarits. Par exemple,
+L'autre particularité est que vous pouvez sortir du mode chaîne et insérer des fragments
+de code Javascript en utilisant `${javascript-expression}`.
+C'est l'objet des gabarits. Par exemple :
 
 ```js
 const r = 192;
@@ -302,20 +302,20 @@ someElement.style.width = `${aWidth + bWidth}px`;
 
 # Apprenez les conventions de codage JavaScript
 
-Alors que vous êtes libres de formater votre code comme vous le souhaitez, il 
+Alors que vous êtes libre de formater votre code comme vous le souhaitez, il
 y a au moins une convention dont vous devez avoir connaissance. Les variables,
-les noms de fonctions et de méthodes sont toutes en *lowerCasedCamelCase* (
-c'est à dire que les mots formant les noms des entités sont collés les uns aux autres et leur première lettre
-est en majuscule, les autres en minuscules à l'exception de la toute première lettre du nom qui 
-est également en minuscule -- NDT). 
+les noms de fonctions et de méthodes sont toutes en *lowerCasedCamelCase* (c'est
+à dire que les mots formant les noms des entités sont collés les uns aux autres et leur première lettre
+est en majuscule, les autres en minuscules à l'exception de la toute première lettre du nom qui
+est également en minuscule -- NDT).
 Les constructeurs, les noms des classes sont en *CapitalizedCamelCase* (
 les mots formant les noms des entités sont collés les uns aux autres et leur première lettre
 est en majuscule, les autres en minuscules -- NDT).
 Si vous suivez cette règle, votre code ressemblera à la plupart des autres
-écrits en JavaScript. Beaucoup de [linters](https://eslint.org), qui sont 
+écrits en JavaScript. Beaucoup de [linters](https://eslint.org), qui sont
 des programmes vérifiant les erreurs dans votre code,
 mettrons en évidence des erreurs si vous utiliser la mauvaise casse puisqu'en
-suivant la convention ci-dessus ils sauront que ces lignes ci-dessous sont 
+suivant la convention ci-dessus ils sauront que ces lignes ci-dessous sont
 mauvaises :
 
 ```js
@@ -326,57 +326,56 @@ const v = Vector();     // évidemment une erreur si toutes les fonctions commen
 <!-- JYD -->
 # Envisagez l'utilisation de Visual Studio Code
 
-Bien sûr, vous pouvez utiliser l'éditeur de votre choix mais, si vous ne l'avez pas 
-encore essayé, envisagez d'utliser [Visual Studio Code](https://code.visualstudio.com/) 
+Bien sûr, vous pouvez utiliser l'éditeur de votre choix mais, si vous ne l'avez pas
+encore essayé, envisagez d'utiliser [Visual Studio Code](https://code.visualstudio.com/)
 pour JavaScript et après l'avoir installé, [intégrez-y eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint).
-Cela vous prendra quelques minutes à installer mais vous aidera grandement pour 
+Cela vous prendra quelques minutes à installer mais vous aidera grandement pour
 trouver les bogues de votre JavaScript.
 
 Quelques exemples
 
-Si vous activez [la règle `no-undef`](https://eslint.org/docs/rules/no-undef) 
+Si vous activez [la règle `no-undef`](https://eslint.org/docs/rules/no-undef)
 alors VSCode via ESLint vous avertira de l'utilisation de nombreuses variables non définies.
 
 <div class="threejs_center"><img style="width: 615px;" src="resources/images/vscode-eslint-not-defined.png"></div>
 
 Ci-dessous vous pouvez voir que nous avons écrit `doTheThing` à la place `doThing`.
-`doThing` se retrouve souligné en rouge et un passage au dessus me dira que 
+`doThing` se retrouve souligné en rouge et un passage au dessus me dira que
 c'est non défini. Une erreur est donc évitée.
 
-Vous aurez des avertissements (*warnings*) en utilisant `THREE` donc ajoutez `/* global THREE */` 
+Vous aurez des avertissements (*warnings*) en utilisant `THREE` donc ajoutez `/* global THREE */`
 en haut de vos fichiers JavaScript pour notifier à eslint que `THREE` existe.
 
 <div class="threejs_center"><img style="width: 615px;" src="resources/images/vscode-eslint-not-a-constructor.png"></div>
 
-Ci-dessus, vous pouvez voir que eslint connaît la règle que les noms commençant par 
-une majuscule `UpperCaseNames` sont des constructeurs et vous devez donc utiliser `new`. 
+Ci-dessus, vous pouvez voir que eslint connaît la règle que les noms commençant par
+une majuscule `UpperCaseNames` sont des constructeurs et vous devez donc utiliser `new`.
 Une autre erreur évitée. C'est [la règle `new-cap` rule](https://eslint.org/docs/rules/new-cap).
 
-Il y a [des centaines de règles que vous pouvez activer, désactiver ou personnaliser](https://eslint.org/docs/rules/). 
+Il y a [des centaines de règles que vous pouvez activer, désactiver ou personnaliser](https://eslint.org/docs/rules/).
 Par exemple, précédemment nous avons indiquer que nous devions utiliser `const` et `let` à la place de `var`.
 
 Ici nous avons utilisé `var` et nous avons été avertis que nous devions utiliser `let` ou `const`
 
 <div class="threejs_center"><img style="width: 615px;" src="resources/images/vscode-eslint-var.png"></div>
 
-Ici nous avons utilisé `let` mais comme la valeur de la variable ne change jamais, nous 
+Ici nous avons utilisé `let` mais comme la valeur de la variable ne change jamais, nous
 nous voyons suggérer l'utilisation de `const`.
 
 <div class="threejs_center"><img style="width: 615px;" src="resources/images/vscode-eslint-let.png"></div>
 
 Bien sûr, si vous préférez conserver `var`, vous pouvez désactiver cette règle.
-Comme écrit plus haut, nous préférons privilégier `const` et `let` à la place de `var` 
+Comme écrit plus haut, nous préférons privilégier `const` et `let` à la place de `var`
 puisqu'ils sont plus efficaces et évitent les bogues.
 
-Pour les cas où vous avez vraiment besoin d'outrepasser une règle, 
-[vous pouvez ajouter un commentaire pour les désactiver](https://eslint.org/docs/user-guide/configuring#disabling-rules-with-inline-comments) 
-pour une seul ligne ou une section de code.
+Pour les cas où vous avez vraiment besoin d'outrepasser une règle,
+[vous pouvez ajouter un commentaire pour les désactiver](https://eslint.org/docs/user-guide/configuring#disabling-rules-with-inline-comments)
+pour une seule ligne ou une section de code.
 
 # Si vous avez vraiment besoin d'assurer le support de vieux navigateurs, utilisez un transpileur
 
 La plupart des navigateurs se mettent à jour automatiquement donc utiliser les subtilités
-vues plus haut vous aiderons à être productifs et éviter les bogues. 
-Ceci étant écrit, si vous êtes dans un projet qui doit absolument supporter des
+vues plus haut vous aiderons à être productif et éviter les bogues.
+Ceci étant dit, si vous êtes dans un projet qui doit absolument supporter des
 vieux navigateurs, il y a des [outils qui interpréterons votre code ES5/ES6/ES7
 et le transpilent en code JavaScript pre-ES5](https://babeljs.io).
-

threejs/lessons/fr/threejs-responsive.md

@@ -1,12 +1,12 @@
-Title: Design réactif et Three.js 
+Title: Design réactif et Three.js
 Description: Comment rendre three.js adaptable à des affichages de taille différente.
 TOC: Design réactif
 
-Ceci est le second article dans une série à propos de three.js.
-Le premier était [à propos des principes de base](threejs-fundamentals.html).
-Si vous ne l'avez pas encore lu, vous voudrez peut-être commencer par là.
+Ceci est le second article dans une série traitant de three.js.
+Le premier traitait [des principes de base](threejs-fundamentals.html).
+Si vous ne l'avez pas encore lu, vous deviriez peut-être commencer par le lire.
 
-Cet article indique comment rendre votre application three.js adaptable
+Ce présent article explique comment rendre votre application three.js adaptable
 à n'importe quelle situation. Rendre une page web adaptable (*responsive*)
 se réfère généralement à faire en sorte que la page s'affiche de manière
 appropriée sur des affichages de taille différente, des ordinateurs de bureau
@@ -14,10 +14,10 @@ aux *smart-phones*, en passant par les tablettes.
 
 Concernant three.js, il y a d'ailleurs davantage de situations à traiter.
 Par exemple, un éditeur 3D avec des contrôles à gauche, droite, en haut ou
-en bas est quelque chose que nous voudrions gérer. Un schéma interactif 
+en bas est quelque chose que nous voudrions gérer. Un schéma interactif
 au milieu d'un document en est un autre exemple.
 
-Le dernier exemple que nous avions utilisé est un canevas sans CSS et 
+Le dernier exemple que nous avions utilisé est un canevas sans CSS et
 sans taille :
 
 ```html
@@ -28,8 +28,8 @@ Ce canevas a par défaut une taille de 300x150 pixels CSS.
 Dans le navigateur, la manière recommandée de fixer la taille
 de quelque chose est d'utiliser CSS.
 
-Paramétrons le canevas pour occuper complètement la page en ajoutant 
-du CSS
+Paramétrons le canevas pour occuper complètement la page en ajoutant
+du CSS :
 
 ```html
 <style>
@@ -47,10 +47,10 @@ html, body {
 
 En HTML, la balise *body* a une marge fixée à 5 pixels par défaut donc
 la changer à 0 la retire. Modifier la hauteur de *html* et *body* à 100%
-leur fait occuper toute la fenêtre. Sinon, ils ne sont seulement aussi large 
+leur fait occuper toute la fenêtre. Sinon, ils ne sont seulement aussi large
 que leur contenu.
 
-Ensuite, nous faisons en sort que l'élément  `id=c` fasse 
+Ensuite, nous faisons en sorte que l'élément `id=c` fasse
 100% de la taille de son conteneur qui, dans ce cas, est le corps du document.
 
 Finalement, nous le passons du mode `display` à celui de `block`.
@@ -58,19 +58,19 @@ Le mode par défaut d'affichage d'un canevas est `inline`, ce qui implique
 que des espaces peuvent y être ajoutés à l'affichage.
 En passant le canevas à `block`, ce problème est supprimé.
 
-Voici le résultat
+Voici le résultat :
 
 {{{example url="../threejs-responsive-no-resize.html" }}}
 
-Le canevas, comme nous le voyons, remplit maintenant la page mais il y a 2
-problèmes. Tout d'abord, nos cubes sont étirés et ressemblent à des boîtes, trop
-hautes et trop larges. Ouvrez l'exemple dans sa propre fenêtre et 
-redimensionnez la, vous verrez comment les cubes se retrouvent déformés 
+Le canevas, comme nous le voyons, remplit maintenant la page mais il y a deux
+problèmes. Tout d'abord, nos cubes sont étirés et ressemblent à des boîtes trop
+hautes et trop larges. Ouvrez l'exemple dans sa propre fenêtre et
+redimensionnez la, vous verrez comment les cubes s'en trouvent déformés
 en hauteur et en largeur.
 
 <img src="resources/images/resize-incorrect-aspect.png" width="407" class="threejs_center nobg">
 
-Le second problème est qu'ils semblent affichés en basse résolution ou 
+Le second problème est qu'ils semblent affichés en basse résolution ou
 à la fois flous et pixellisés. Si vous étirez beaucoup la fenêtre, vous verrez
 pleinement le problème.
 
@@ -78,7 +78,7 @@ pleinement le problème.
 
 Tout d'abord, nous allons résoudre le problème d'étirement.
 Pour cela, nous devons calquer l'aspect de la caméra sur celui
-de la taille d'affichage du canevas. Nous pouvons le faire 
+de la taille d'affichage du canevas. Nous pouvons le faire
 en utilisant les propriétés `clientWidth` et `clientHeight` du canevas.
 
 Nous mettons alors notre boucle de rendu comme cela :
@@ -99,7 +99,7 @@ A présent les cubes ne devraient plus être déformés.
 {{{example url="../threejs-responsive-update-camera.html" }}}
 
 Ouvrez l'exemple dans une fenêtre séparée et redimensionnez là.
-Vous devriez voir que les cubes ne sont plus étirés, que ce soit 
+Vous devriez voir que les cubes ne sont plus étirés, que ce soit
 en hauteur ou en largeur.
 Ils restent corrects quelque soit l'aspect de la taille de la fenêtre.
 
@@ -108,25 +108,25 @@ Ils restent corrects quelque soit l'aspect de la taille de la fenêtre.
 Maintenant résolvons le problème de la pixellisation.
 
 Les éléments de type *canvas* ont deux tailles. La première
-est celle du canevas affiché dans la page. C'est ce que nous paramétrons avec le CSS. 
-L'autre taille est le nombre de pixels dont est constitué le canevas lui-même. 
-Ceci n'est pas différent d'une image. 
-Par exemple, nous pouvons avoir une image de taille 128x64 et, en utilisant le CSS, 
+est celle du canevas affiché dans la page. C'est ce que nous paramétrons avec le CSS.
+L'autre taille est le nombre de pixels dont est constitué le canevas lui-même.
+Ceci n'est pas différent d'une image.
+Par exemple, nous pouvons avoir une image de taille 128x64 et, en utilisant le CSS,
 nous pouvons l'afficher avec une taille de 400x200.
 
 ```html
 <img src="some128x64image.jpg" style="width:400px; height:200px">
 ```
 
-La taille interne d'un canevas, sa résolution, est souvent appelé sa taille de tampon
-de dessin (*drawingbuffer*). Dans three.js, nous pouvons ajuster cette taille 
+La taille interne d'un canevas, sa résolution, est souvent appelée sa taille de tampon
+de dessin (*drawingbuffer*). Dans three.js, nous pouvons ajuster cette taille
 de canevas en appelant `renderer.setSize`.
-Quelle taille devons nous choisir ? La réponse la plus évident est "la même taille que
+Quelle taille devons nous choisir ? La réponse la plus évidente est "la même taille que
 celle d'affichage du canevas". A nouveau, pour le faire, nous pouvons avoir recours
 au propriétés `clientWidth` et `clientHeight`.
 
 Ecrivons une fonction qui vérifie si le canevas du *renderer* est ou non à la taille
-qui est affiché et l'ajuste en conséquence.
+qui est affichée et l'ajuste en conséquence.
 
 ```js
 function resizeRendererToDisplaySize(renderer) {
@@ -142,16 +142,16 @@ function resizeRendererToDisplaySize(renderer) {
 ```
 
 Remarquez que nous vérifions sur le canevas a réellement besoin d'être redimensionné.
-Le redimensionnement est une partie intéressante de la spécification du canevas 
+Le redimensionnement est une partie intéressante de la spécification du canevas
 et il est mieux de ne pas lui donner à nouveau la même taille s'il est déjà
 à la dimension que nous voulons.
 
-Une fois que nous savons si le redimensionnement est nécessaire ou non, nous 
+Une fois que nous savons si le redimensionnement est nécessaire ou non, nous
 appelons `renderer.setSize` et lui passons les nouvelles largeur et hauteur.
-Il est important de passer `false` en troisième. 
+Il est important de passer `false` en troisième.
 `render.setSize` modifie par défaut la taille du canevas CSS, mais ce n'est
 pas ce que nous voulons. Nous souhaitons que le navigateur continue à fonctionner
-comme pour les autres éléments, qui est d'utiliser CSS pour déterminer la 
+comme pour les autres éléments, qui est d'utiliser CSS pour déterminer la
 taille d'affichage d'un élément. Nous ne voulons pas que les canevas utilisés
 par three aient un comportement différent des autres éléments.
 
@@ -206,43 +206,43 @@ autrement dit, les écrans à haute densité d'affichage.
 C'est le cas de la plupart des Macs, des machines sous Windows
 ainsi que des smartphones.
 
-La façon dont cela fonctionne dans le navigateur est 
-qu'il utilise les pixels CSS pour mettre à jour la taille 
-qui est supposée être la même quelque soit la résolution de 
+La façon dont cela fonctionne dans le navigateur est
+qu'il utilise les pixels CSS pour mettre à jour la taille
+qui est supposée être la même quelque soit la résolution de
 l'affichage. Le navigateur effectue le rendu du texte avec davantage
 de détails mais la même taille physique.
 
 Il y a plusieurs façons de gérer les HD-DPI avec three.js.
 
-La première façon est de ne rien faire de spécial. Cela 
-est, de manière discutable, le plus commun. Effectuer le 
+La première façon est de ne rien faire de spécial. Cela
+est, de manière discutable, le plus commun. Effectuer le
 rendu de graphismes 3D prend beaucoup de puissance de calcul GPU
 (*Graphics Processing Units*, les processeurs dédiés de carte graphique).
 Les GPUs mobiles ont moins de puissance que les ordinateurs de bureau,
-du moins en 2018, et pourtant les téléphones mobules ont des affichages
+du moins en 2018, et pourtant les téléphones mobiles ont des affichages
 haute résolution. Le haut de gamme actuel pour les smartphones a un ratio
 HD-DPI de 3x, ce qui signifie que pour chaque pixel d'un affichage non HD-DPI,
 ces téléphones ont 9 pixels. Il y a donc 9 fois plus de travail
 pour le rendu.
 
-Calculer pour 9 pixels nécessite des ressources donc, si 
+Calculer pour 9 pixels nécessite des ressources donc, si
 nous laissons le code comme cela, nous calculerons pour 1 pixel
 et le navigateur le dessinera avec 3 fois sa taille (3 x 3 = 9 pixels).
 
-Pour toute application three.js lourde, c'est probablement ce que vous 
-voulez sinon vous risquez d'avoir un taux de rafraîssement faible (*framerate*).
+Pour toute application three.js lourde, c'est probablement ce que vous
+voulez sinon vous risquez d'avoir un taux de rafraîchissement faible (*framerate*).
 
 Ceci étant dit, si vous préférez effectuer le rendu à la résolution de l'appareil,
 voici quelques façons de le faire en three.js.
 
 La première est d'indiquer à three.js le facteur de multiplication de la résolution
-en utilisant `renderer.setPixelRatio`. Nous pouvons demander au navigateur ce 
+en utilisant `renderer.setPixelRatio`. Nous pouvons demander au navigateur ce
 facteur entre les pixels CSS et les pixels du périphérique et les passer à three.js
 
      renderer.setPixelRatio(window.devicePixelRatio);
 
 Après cela, tout appel à `renderer.setSize` va automatiquement
-utiliser la taille que vous avez demandée, multipliée par le 
+utiliser la taille que vous avez demandée, multipliée par le
 ratio que vous avez demandé.
 **Ceci est fortement DÉCONSEILLÉ**. Voir ci-dessous.
 
@@ -266,26 +266,25 @@ Cette seconde façon est objectivement meilleure. Pourquoi ? Parce que cela sign
 que nous avons ce que nous avons demandé. Il y a plusieurs cas où,
 quand on utilise three.js, nous avons besoin de savoir la taille effective
 du tampon d'affichage du canevas. Par exemple, quand on réalise un filtre de
-post-processing, ou si nous faisons un *shader* qui accède à `gl_FragCoord`, 
+post-processing, ou si nous faisons un *shader* qui accède à `gl_FragCoord`,
 si nous sommes en train de faire une capture d'écran, ou en train de lire les pixels
 pour une sélection par GPU, pour dessiner dans un canevas 2D, etc...
 Il y a plusieurs cas où, si nous utilisons `setPixelRatio` alors notre
-taille effective est différente de la taille que nous avons demandé et nous 
+taille effective est différente de la taille que nous avons demandé et nous
 aurons alors à deviner quand utiliser la taille demandée ou la taille utilisée
-par three.js. 
+par three.js.
 En le faisant par soi-même, nous savons toujours que la taille utilisée
-est celle que nous avons demandé. Il n'y a aucun cas où cela se fait tout 
+est celle que nous avons demandé. Il n'y a aucun cas où cela se fait tout
 seul autrement.
 
 Voici un exemple utilisant le code vu plus haut.
 
 {{{example url="../threejs-responsive-hd-dpi.html" }}}
 
-Cela devrait être difficile de voir la différence, mais si vous avez 
+Cela devrait être difficile de voir la différence, mais si vous avez
 un affichage HD-DPI et que vous comparez cet exemple aux autres plus
-haut, vous devriez remarquer que les arêtes sont plus vives. 
+haut, vous devriez remarquer que les arêtes sont plus vives.
 
-Cet article a couvert un sujet très basique mais fondamental. 
-Ensuite, nous allons rapidement 
+Cet article a couvert un sujet très basique mais fondamental.
+Ensuite, nous allons rapidement
 [passer en revue les primitives de base proposées par three.js](threejs-primitives.html).
-