Kezdőlap Felfedezés Súgó
Bejelentkezés
javascript
/
three.js
tükrözi: https://github.com/tazdij/three.js.git
2
0
Másolás 0
Fájlok Problémák 0 Wiki
Forráskód Böngészése

Docs: Manual translation into french (#24516)

* Manual translation to french

* Fixing h1 titles
Alexandre Allard 2 éve
szülő
961d5caad5
commit
28546c21ac
20 módosított fájl, 2615 hozzáadás és 1 törlés
Egyesített Nézet Diff Statisztika Mutatása
  1. 2 1
      docs/index.html
  2. 35 0
      docs/list.json
  3. 257 0
      docs/manual/fr/buildTools/Testing-with-NPM.html
  4. 147 0
      docs/manual/fr/introduction/Animation-system.html
  5. 336 0
      docs/manual/fr/introduction/Color-management.html
  6. 163 0
      docs/manual/fr/introduction/Creating-a-scene.html
  7. 142 0
      docs/manual/fr/introduction/Creating-text.html
  8. 64 0
      docs/manual/fr/introduction/Drawing-lines.html
  9. 60 0
      docs/manual/fr/introduction/FAQ.html
  10. 81 0
      docs/manual/fr/introduction/How-to-create-VR-content.html
  11. 124 0
      docs/manual/fr/introduction/How-to-dispose-of-objects.html
  12. 169 0
      docs/manual/fr/introduction/How-to-run-things-locally.html
  13. 223 0
      docs/manual/fr/introduction/How-to-update-things.html
  14. 111 0
      docs/manual/fr/introduction/How-to-use-post-processing.html
  15. 148 0
      docs/manual/fr/introduction/Installation.html
  16. 107 0
      docs/manual/fr/introduction/Libraries-and-Plugins.html
  17. 167 0
      docs/manual/fr/introduction/Loading-3D-models.html
  18. 67 0
      docs/manual/fr/introduction/Matrix-transformations.html
  19. 177 0
      docs/manual/fr/introduction/Useful-links.html
  20. 35 0
      docs/manual/fr/introduction/WebGL-compatibility-check.html

+ 2 - 1
docs/index.html
Fájl Megtekintése 

@@ -38,6 +38,7 @@
 
 						<option value="ja">日本語</option>
 
 						<option value="ja">日本語</option>
 
 						<option value="it">it</option>
 
 						<option value="it">it</option>
 
 						<option value="pt-br">pt-br</option>
 
 						<option value="pt-br">pt-br</option>
 
+						<option value="fr">fr</option>
 
 					</select>
 
 					</select>
 
 				</div>
 
 				</div>
 
 				<div id="content"></div>
 
 				<div id="content"></div>
 
@@ -88,7 +89,7 @@
 
 
 
 			if ( /^(api|manual|examples)/.test( hash ) ) {
 
 			if ( /^(api|manual|examples)/.test( hash ) ) {
 
 
 
-				const hashLanguage = /^(api|manual|examples)\/(en|ar|ko|zh|ja|it|pt-br)\//.exec( hash );
 
+				const hashLanguage = /^(api|manual|examples)\/(en|ar|ko|zh|ja|it|pt-br|fr)\//.exec( hash );
 
 
 
 				if ( hashLanguage === null ) {
 
 				if ( hashLanguage === null ) {

+ 35 - 0
docs/list.json
Fájl Megtekintése 

@@ -1204,6 +1204,41 @@
 
 
 
 		}
 
 		}
 
 
 
+	},
 
+	"fr": {
 
+
 
+		"Manuel": {
 
+
 
+			"Débuter": {
 
+				"Créer une scène": "manual/fr/introduction/Creating-a-scene",
 
+				"Installation": "manual/fr/introduction/Installation",
 
+				"Compatibilité WebGL": "manual/fr/introduction/WebGL-compatibility-check",
 
+				"Exécuter localement": "manual/fr/introduction/How-to-run-things-locally",
 
+				"Dessiner des lignes": "manual/fr/introduction/Drawing-lines",
 
+				"Créer un texte": "manual/fr/introduction/Creating-text",
 
+				"Importer des modèles 3D": "manual/fr/introduction/Loading-3D-models",
 
+				"Librairies et Plugins": "manual/fr/introduction/Libraries-and-Plugins",
 
+				"FAQ": "manual/fr/introduction/FAQ",
 
+				"Liens Utiles": "manual/fr/introduction/Useful-links"
 
+			},
 
+
 
+			"Étapes Suivantes": {
 
+				"Mettre les éléments à jour": "manual/fr/introduction/How-to-update-things",
 
+				"Supprimer un objet": "manual/fr/introduction/How-to-dispose-of-objects",
 
+				"Créer du contenu VR": "manual/fr/introduction/How-to-create-VR-content",
 
+				"Utiliser le post-processing": "manual/fr/introduction/How-to-use-post-processing",
 
+				"Matrices de transformation": "manual/fr/introduction/Matrix-transformations",
 
+				"Système d'animation": "manual/fr/introduction/Animation-system",
 
+				"Gestion des couleurs": "manual/fr/introduction/Color-management"
 
+			},
 
+
 
+			"Outils de build": {
 
+				"Tests avec NPM": "manual/fr/buildTools/Testing-with-NPM"
 
+			}
 
+
 
+		}
 
+
 
 	}
 
 	}
 
+	
 
 
 }
 
 }

+ 257 - 0
docs/manual/fr/buildTools/Testing-with-NPM.html
Fájl Megtekintése 

@@ -0,0 +1,257 @@
 
+<!DOCTYPE html>
 
+<html lang="fr">
 
+	<head>
 
+		<meta charset="utf-8">
 
+		<base href="../../../" />
 
+		<script src="page.js"></script>
 
+		<link type="text/css" rel="stylesheet" href="page.css" />
 
+	</head>
 
+	<body>
 
+		<h1>Tests avec NPM ([name])</h1>
 
+
 
+		<p class="desc">
 
+			Ici vous sera expliqué comment obtenir three.js dans un environnement [link:https://nodejs.org/en/ node.js] pour que
 
+			vous puissez exécuter des tests automatisés. Les tests peuvent êtres lancés en lignes de commande, ou grâce à des
 
+			outils de CI automatisés comme [link:https://travis-ci.org/ Travis].
 
+		</p>
 
+
 
+		<h2>La version courte</h2>
 
+
 
+		<p>
 
+			Si vous êtes à l'aise avec node et npm,
 
+			<code>
 
+				$ npm install three --save-dev
 
+			</code>
 
+			et ajoutez
 
+		<code>
 
+			const THREE = require('three');
 
+		</code>
 
+			à votre test.
 
+		</p>
 
+
 
+		<h2>Créer un projet testable de zéro</h2>
 
+		<p>
 
+			Si vous n'êtes pas familier avec ces outils, vous trouverez ici un guide rapide (pour linux, le processus d'installation
 
+			sera légèrement différent de celui pour Windows, mais les commandes NPM sont identiques).
 
+		</p>
 
+
 
+		<h3>Setup basique</h3>
 
+		<div>
 
+			<ol>
 
+				<li>
 
+					Installez [link:https://www.npmjs.org/ npm] et nodejs. La méthode la plus rapide ressemble généralement à
 
+					<code>
 
+$ sudo apt-get install -y npm nodejs-legacy
 
+# fix any problems with SSL in the default registry URL
 
+$ npm config set registry http://registry.npmjs.org/
 
+					</code>
 
+				</li>
 
+
 
+				<li>
 
+					Créez un nouveau répertoire de projet
 
+					<code>
 
+						 $ mkdir test-example; cd test-example
 
+					</code>
 
+				</li>
 
+
 
+				<li>
 
+					Demandez à npm de créer un nouveau fichier de projet pour vous:
 
+					<code>
 
+					 $ npm init
 
+					</code>
 
+					 et acceptez tous les paramètres par défaut en appuyant sur Entrée à chaque prompt.
 
+					 Cela créera package.json.
 
+				</li><br />
 
+
 
+				<li>
 
+					Essayez la fonctionnalité de test avec
 
+					<code>
 
+$ npm test
 
+					</code>
 
+					Cela va échouer, comme prévu.
 
+					Si vous jetez un coup d'oeil à votre package.json, la définition du test de script sera
 
+					<code>
 
+						"test": "echo \"Error: no test specified\" && exit 1"
 
+					</code>
 
+				</li>
 
+
 
+			</ol>
 
+		</div>
 
+
 
+		<h2>Ajouter mocha</h2>
 
+		<div>
 
+			Nous allons utiliser [link:https://mochajs.org/ mocha].
 
+
 
+			<ol>
 
+				<li>
 
+					Installez mocha avec
 
+					<code>
 
+$ npm install mocha --save-dev
 
+					</code>
 
+					Remarquez que node_modules/ est créé et que vos dépendances y apparaissent.
 
+				  	Notez également que votre package.json a été mis à jour: la propriété devDependencies
 
+					est ajoutée et mis à jour par l'utilisation de --save-dev.
 
+				</li><br />
 
+
 
+				<li>
 
+					Modifiez votre package.json pour qu'il utilise mocha pour effectuer les tests. Lorsqu'un test est invoqué, nous voulons simplement lancer
 
+					mocha et spécifier un verbose reporter. Par défaut cela lancera le contenu de test/
 
+					(ne pas avoir de répertoire test/ peut causer une npm ERR!, créez le en utilisant mkdir test)
 
+					<code>
 
+						"test": "mocha --reporter list"
 
+					</code>
 
+				</li>
 
+
 
+				<li>
 
+					Relancez les tests avec
 
+					<code>
 
+						$ npm test
 
+					</code>
 
+
 
+					Cela doit maintenant réussir, signalant 0 passages (1ms)
 
+				 	ou similaire.
 
+				</li>
 
+
 
+			</ol>
 
+		</div>
 
+
 
+		<h2>Ajouter three.js</h2>
 
+		<div>
 
+			<ol>
 
+				<li>
 
+					Ajoutons notre dépendance de three.js avec
 
+					<code>
 
+$ npm install three --save-dev
 
+					</code>
 
+					<ul>
 
+						<li>
 
+							Si vous avez besoin d'une version de three différente, utilisez
 
+							<code>
 
+								$ npm show three versions
 
+							</code>
 
+						  	pour voir
 
+							ce qui est disponible. Pour indiquer à npm la bonne, utilisez
 
+							<code>
 
+ $ npm install [email protected] --save
 
+							</code>
 
+							(0.84.0 dans cet exemple). --save qui en fait une dépendance de ce projet, au lieu
 
+							d'une dépendance dev. Voir la documentation [link:https://docs.npmjs.com/cli/v8/configuring-npm/package-json ici] pour plus d'informations.
 
+						</li>
 
+					</ul>
 
+				</li>
 
+
 
+				<li>
 
+					Mocha cherche des tests dans test/, exécutons donc la commande
 
+					<code>
 
+					$ mkdir test
 
+					</code>
 
+				</li>
 
+
 
+				<li>
 
+					Finalement, nous avons besoin d'un test JS à lancer. Ajoutons un test simple qui va vérifier que
 
+					l'objet three.js est disponible et fonctionnel. Créez test/verify-three.js contenant:
 
+<code>
 
+const THREE = require('three');
 
+const assert = require('assert');
 
+
 
+describe('The THREE object', function() {
 
+  it('should have a defined BasicShadowMap constant', function() {
 
+    assert.notEqual('undefined', THREE.BasicShadowMap);
 
+  }),
 
+
 
+  it('should be able to construct a Vector3 with default of x=0', function() {
 
+    const vec3 = new THREE.Vector3();
 
+    assert.equal(0, vec3.x);
 
+  })
 
+})
 
+</code>
 
+				</li>
 
+
 
+				<li>
 
+				Finalement testons à nouveau avec $ npm test. Cela doit lancer le test ci-dessous et réussir,
 
+				affichant quelque chose du genre:
 
+				<code>
 
+The THREE object should have a defined BasicShadowMap constant: 0ms
 
+The THREE object should be able to construct a Vector3 with default of x=0: 0ms
 
+2 passing (8ms)
 
+				</code>
 
+				</li>
 
+			</ol>
 
+		</div>
 
+
 
+		<h2>Ajoutez votre propre code</h2>
 
+		<div>
 
+			Vous devez faire trois choses:
 
+
 
+			<ol>
 
+				<li>
 
+					Écrivez un test pour un comportement attendu de votre code, et placez-le sous test/.
 
+					[link:https://github.com/air/encounter/blob/master/test/Physics-test.js Ici] vous trouverez un exemple issu d'un vrai projet.
 
+				</li>
 
+
 
+				<li>
 
+					Exportez votre code de manière à ce que nodejs puisse le voir et l'utiliser quand la conjoncture le requiert.
 
+					Voir [link:https://github.com/air/encounter/blob/master/js/Physics.js ici].
 
+				</li>
 
+
 
+				<li>
 
+					Puis il faut require votre code dans le fichier de test, de la même manière que nous avons require('three') dans l'exemple au-dessus.
 
+				</li>
 
+			</ol>
 
+
 
+			<p>
 
+			Les items 2 et 3 varient selon la façon dont vous organisez votre code. Dans l'exemple de Physics.js
 
+		  	montré plus-haut, la partie concernant l'export est à la toute fin. Nous assignons un objet à module.exports:
 
+			</p>
 
+			<code>
 
+//=============================================================================
 
+// make available in nodejs
 
+//=============================================================================
 
+if (typeof exports !== 'undefined')
 
+{
 
+  module.exports = Physics;
 
+}
 
+			</code>
 
+		</div>
 
+
 
+		<h2>Gérer les dépendances</h2>
 
+		<div>
 
+			<p>
 
+				Si vous utlisez déjà quelque chose d'astucieux comme require.js ou browserify, sautez cette partie.
 
+			</p>
 
+			<p>
 
+				Généralement un projet three.js s'exécute dans le navigateur. Le module de chargement est par conséquent réalisé par
 
+				le navigateur qui exécute un ensemble de scripts. Vos fichiers individuels n'ont pas à gérer les
 
+				dépendances. Dans un contexte nodejs, il n'y a pas d'index.html reliant tout
 
+				ensemble, vous devez donc être explicites.
 
+			</p>
 
+			<p>
 
+				Si vous exportez un module qui dépend d'autres fichiers, vous devrez dire à node de les charger.
 
+				Voici une approche:
 
+			</p>
 
+			<ol>
 
+				<li>
 
+					Au début de votre module, vérifiez si vous êtes dans un environnement nodejs.
 
+				</li>
 
+				<li>
 
+					Si c'est le cas, déclarez explicitement vos dépendances.
 
+				</li>
 
+				<li>
 
+					Si ce n'est pas le cas, vous êtes probablement dans un navigateur vous n'avez donc rien d'autre à faire.
 
+				</li>
 
+			</ol>
 
+			Code d'exemple issu de Physics.js:
 
+			<code>
 
+//=============================================================================
 
+// setup for server-side testing
 
+//=============================================================================
 
+if (typeof require === 'function') // test for nodejs environment
 
+{
 
+  const THREE = require('three');
 
+  const MY3 = require('./MY3.js');
 
+}
 
+			</code>
 
+		</div>
 
+
 
+	</body>
 
+</html>

+ 147 - 0
docs/manual/fr/introduction/Animation-system.html
Fájl Megtekintése 

@@ -0,0 +1,147 @@
 
+<!DOCTYPE html>
 
+<html lang="fr">
 
+	<head>
 
+		<meta charset="utf-8" />
 
+		<base href="../../../" />
 
+		<script src="page.js"></script>
 
+		<link type="text/css" rel="stylesheet" href="page.css" />
 
+	</head>
 
+	<body>
 
+		<h1>Système d'animation ([name])</h1>
 
+
 
+		<h2>Aperçu</h2>
 
+
 
+		<p class="desc">
 
+			Dans le système d'animation de three.js vous pouvez animer différentes propriétés de vos modèles:
 
+			les os d'un [page:SkinnedMesh skinned and rigged model], les morph targets, les différentes propriétés des matériaux
 
+			(couleurs, opacité, booléens), la visibilité et les transformations. Les propriétés animées peuvent avoir différentes animations comme un fade-in,
 
+			un fade-out, un fondu ou un warp. Le poids et l'échelle temporelle des différentes animations simultanées
 
+			sur le même objet peuvent également être changées indépendamment.
 
+			Différentes animations sur le même objet peuvent-être
 
+			synchronisées.<br /><br />
 
+
 
+			Pour effectuer tout cela dans un système homogène, le système d'animation three.js 
+			[link:https://github.com/mrdoob/three.js/issues/6881 a complètement changé en 2015]
 
+			(attention aux informations dépassées!), et a maintenant une architecture similaire à
 
+			Unity/Unreal Engine 4. Cette page offre un bref aperçu des principaux composants du système
 
+			et de comment ils fonctionnent ensemble.
 
+
 
+		</p>
 
+
 
+		<h3>Animation Clips</h3>
 
+
 
+		<p class="desc">
 
+
 
+			Si vous aveez réussi à importer un modèle 3D (peu importe qu'il ait
 
+			des os ou une morph targets ou les deux) — par exemple en l'exportant depuis Blender avec le
 
+			[link:https://github.com/KhronosGroup/glTF-Blender-IO glTF Blender exporter] et
 
+			en le chargeant dans la scène three.js en utilisant [page:GLTFLoader] — un des champs doit-être
 
+			un tableau nommé "animations", contenant les [page:AnimationClip AnimationClips]
 
+			pour ce modèle (voir une liste des loaders possibles ci-dessous).<br /><br />
 
+
 
+			Chaque `AnimationClip` conserve les données d'une certaine activité d'un objet. Si le
 
+			mesh est un personnage, par exemple, il pourrait y avoir un AnimationClip pour une marche, un second
 
+			pour un saut, un troisième pour un pas de côté et ainsi de suite.
 
+
 
+		</p>
 
+
 
+		<h3>Keyframe Tracks</h3>
 
+
 
+		<p class="desc">
 
+
 
+			A l'intérieur d'un `AnimationClip` les données pour chaque propriétés animées sont stockées
 
+			dans un [page:KeyframeTrack] séparé. En considérant que l'objet personnage a un [page:Skeleton skeleton],
 
+			un keyframe track pourrait stocker les changements de valeur de la position de l'os inférieur d'un bras
 
+			à travers le temps, un track différent stockerait les changements de valeur de la rotation du même bras, un troisème
 
+			pourrait stocker la position, la rotation ou l'échelle d'un autre os, ainsi de suite. Il doit-être clair qu'un,
 
+			AnimationClip peut-être composé de beaucoup de ce genre de tracks.<br /><br />
 
+
 
+			En considérant que le modèle a un morph targets (par exemple un morph
 
+			target pour un visage amical et un autre pour un visage énervé), chaque track conserve
 
+			l'information de comment l'[page:Mesh.morphTargetInfluences influence] d'un certain morph
 
+			change durant l'exécution du clip.
 
+
 
+		</p>
 
+
 
+		<h3>Mixer d'Animations</h3>
 
+
 
+		<p class="desc">
 
+
 
+			Les informations stockées représentent uniquement la base de l'animation - le playback est en réalité contrôlé par
 
+			l'[page:AnimationMixer]. Vous vous doutez bien que ce n'est pas uniquement un visualiseur d'animations, mais
 
+			une simulation d'un hardware comme une vraie console de mixage , qui peut contrôler plusieurs animations
 
+			simultanément, les mélangeant et les fusionnant.
 
+
 
+		</p>
 
+
 
+		<h3>Actions d'Animations</h3>
 
+
 
+		<p class="desc">
 
+
 
+			L'`AnimationMixer` en lui-même a seulement quelques propriétés (générales) et méthodes, car il
 
+			peut-être contrôlé par l'[page:AnimationAction AnimationActions]. En configurant un
 
+			`AnimationAction` vous pouvez déterminer qu'un certain `AnimationClip` doit-être joué, mis en pause
 
+			ou stoppé sur un des mixers, si et à quelle fréquence le clip doit-être répeté, si il
 
+			doit-être joué avec un fade, une mise à l'échelle temporelle, et d'autres choses, comme le fondu
 
+			ou la synchronisation.
 
+
 
+		</p>
 
+
 
+		<h3>Animations de Groupes d'Objets</h3>
 
+
 
+		<p class="desc">
 
+
 
+			Si vous voulez qu'un groupe d'objets reçoive un statut d'animation partagé, vous pouvez utiliser un
 
+			[page:AnimationObjectGroup].
 
+
 
+		</p>
 
+
 
+		<h3>Formats et loaders supportés</h3>
 
+
 
+		<p class="desc">
 
+			Notez que tous les formats de modèles n'incluent pas les animations (notamment OBJ ne les supporte pas), et que seulement certains
 
+			loaders three.js supportent les séquences d'[page:AnimationClip AnimationClip]. Plusieurs autres <i>supportent</i>
 
+			ce type d'animations:
 
+		</p>
 
+
 
+			<ul>
 
+				<li>[page:ObjectLoader THREE.ObjectLoader]</li>
 
+				<li>THREE.BVHLoader</li>
 
+				<li>THREE.ColladaLoader</li>
 
+				<li>THREE.FBXLoader</li>
 
+				<li>[page:GLTFLoader THREE.GLTFLoader]</li>
 
+				<li>THREE.MMDLoader</li>
 
+			</ul>
 
+
 
+		<p class="desc">
 
+			Notez que 3ds max et Maya ne peuvent actuellement pas exporter plusieurs animations (qui ne sont pas sur
 
+			la même timeline) directement dans un seul fichier.
 
+		</p>
 
+
 
+		<h2>Exemple</h2>
 
+
 
+		<code>
 
+		let mesh;
 
+
 
+		// Create an AnimationMixer, and get the list of AnimationClip instances
 
+		const mixer = new THREE.AnimationMixer( mesh );
 
+		const clips = mesh.animations;
 
+
 
+		// Update the mixer on each frame
 
+		function update () {
 
+			mixer.update( deltaSeconds );
 
+		}
 
+
 
+		// Play a specific animation
 
+		const clip = THREE.AnimationClip.findByName( clips, 'dance' );
 
+		const action = mixer.clipAction( clip );
 
+		action.play();
 
+
 
+		// Play all animations
 
+		clips.forEach( function ( clip ) {
 
+			mixer.clipAction( clip ).play();
 
+		} );
 
+		</code>
 
+
 
+	</body>
 
+</html>

+ 336 - 0
docs/manual/fr/introduction/Color-management.html
Fájl Megtekintése 

@@ -0,0 +1,336 @@
 
+<!DOCTYPE html>
 
+<html lang="fr">
 
+
 
+<head>
 
+	<meta charset="utf-8">
 
+	<base href="../../../" />
 
+	<script src="page.js"></script>
 
+	<link type="text/css" rel="stylesheet" href="page.css" />
 
+	<style>
 
+		blockquote {
 
+			font-size: 0.8em;
 
+			line-height: 1.5em;
 
+			margin-left: 0;
 
+			border-left: 4px solid #cccccc;
 
+			padding: 1em 2em 1em 2em;
 
+		}
 
+
 
+		blockquote p:first-child {
 
+			margin-top: 0;
 
+		}
 
+
 
+		blockquote p:last-child {
 
+			margin-bottom: 0;
 
+		}
 
+
 
+		figure {
 
+			width: 100%;
 
+			margin: 1em 0;
 
+			font-style: italic;
 
+		}
 
+
 
+		figure img {
 
+			width: 100%;
 
+		}
 
+
 
+		figure.float {
 
+			float: right;
 
+			max-width: 30%;
 
+			margin: 1em;
 
+		}
 
+
 
+		@media all and ( max-width: 640px ) {
 
+
 
+			figure.float {
 
+				float: none;
 
+				max-width: 100%;
 
+			}
 
+
 
+		}
 
+	</style>
 
+</head>
 
+
 
+<body>
 
+	<h1>Gestion des couleurs ([name])</h1>
 
+
 
+	<h2>Qu'est ce qu'un espace colorimétrique?</h2>
 
+
 
+	<p>
 
+		Chaque espace colorimétrique est un ensemble de plusieurs décisions de design, choisies ensemble pour supporter
 
+		un large éventail de couleurs tout en satisfaisant les contraites techniques liées à la précision et aux technologies
 
+		d'affichage. Lors de la création d'un asset 3D, ou l'assemblage d'assets 3D ensemble dans une scène, il est
 
+		important de savoir quelles sont ces propriétés, et comment les propriétés d'un espace colorimétrique se rapporte
 
+		aux autres espaces colorimétriques de la scène.
 
+	</p>
 
+
 
+	<figure class="float">
 
+		<img src="resources/srgb_gamut.png" alt="">
 
+		<figcaption>
 
+			Les couleurs sRGB et le point blanc (D65) affichées dans le modèle CIE 1931 chromaticity
 
+			diagram. Les régions colorées représentent une projection 2D de la gamme sRGB, qui est un
 
+			volume 3D. Source: <a href="https://en.wikipedia.org/wiki/SRGB" target="_blank" rel="noopener">Wikipedia</a>
 
+		</figcaption>
 
+	</figure>
 
+
 
+	<ul>
 
+		<li>
 
+			<b>Couleurs primaires:</b> Les couleurs primaires (e.g. rouge, vert, bleu) ne sont pas absolues; elle sont
 
+			sélectionnées depuis le spectre visible basé sur les contraintes de la précision limitée et
 
+			les capacités des appareils d'affichage disponibles. Les couleurs sont exprimées comme un ratio des couleurs primaires.
 
+		</li>
 
+		<li>
 
+			<b>Point blanc:</b> La plupart des espaces colorimétriques sont conçus de telle manière qu'une somme équivalente
 
+			de couleurs primaires <i>R = G = B</i> apparaissent comme n'ayant pas de couleurs, ou "achromatique". L'apparition
 
+			des valeurs chromatiques (comme le blanc ou le gris) dépend de la perception humaine, qui dépend elle-même
 
+			fortement du contexte d'observation. Un espace colorimétrique spécifie son "point blanc" pour équilibrer
 
+			ces besoins. Le point blanc définit par l'espace colorimétrique sRGB est
 
+			<a href="https://en.wikipedia.org/wiki/Illuminant_D65" target="_blank">D65</a>.
 
+		</li>
 
+		<li>
 
+			<b>Fonctions de transfert:</b> Après avoir choisir la gamme de couleur et le modèle de couleur, il nous reste à toujours définir
 
+			le mapping ("fonctions de transfert") des valeurs numériques de l'espace colorimétrique. Est-ce-que <i>r = 0.5</i>
 
+			représente 50% moins d'illumination physique que <i>r = 1.0</i>? Ou 50% de luminosité en moins, comme perçu
 
+			par l'oeil humain moyen? Ce sont différentes choses, et ces différences peuvent être représentées par
 
+			une fonction mathématique. Les fonctions de transfert peuvent être <i>linéaires</i> ou <i>non-linéaires</i>, selon
 
+			les objectifs de l'espace colorimétrique. Le sRGB définit des fonctions de transfert non-linéaires. Ces fonctions
 
+			fonctions sont parfois approximées en <i>fonctions gamma</i>, mais le terme "gamma" est
 
+			ambigu et doit-être évité dans ce contexte.
 
+		</li>
 
+	</ul>
 
+
 
+	Ces trois paramètres — les couleurs primaires, le point blanc, et les fonctions de transfert — définissent un
 
+	espace colorimétrique, chacun est choisi pour un objectif particulier. Après avoir défini les paramètres, quelques termes supplémentaires
 
+	sont utiles:
 
+
 
+	<ul>
 
+		<li>
 
+			<b>Le modèle de couleur:</b> La syntaxe pour identifier naturellement les couleurs au sein de la gamme de couleur choisie —
 
+			un système de coordonnées pour les couleurs. Dans three.js nous utilisons princpalement le système de couleurs RGB,
 
+			ayant trois coordonnées <i>r, g, b ∈ [0,1]</i> ("domaines fermés") ou
 
+			<i>r, g, b ∈ [0,∞]</i> ("domaine ouvert") chacune représentant une fraction d'une couleur
 
+			primaire. D'autres modèles de couleurs (HSL, Lab, LCH) sont communément utilisés pour un contrôle artistique.
 
+		</li>
 
+		<li>
 
+			<b>La gamme de couleurs:</b> Une fois que les couleurs primaires et le point blanc ont été choisis, ils représentent
 
+			un volume parmis le spectre visible (une "gamme"). Les couleurs qui ne sont pas dans ce volume ("hors de la gamme")
 
+			ne peuvent pas être exprimées par un domaine fermé [0,1] de valeurs RGB. Dans le domaine ouvert [0,∞], la gamme est
 
+			théoriquement infinie.
 
+		</li>
 
+	</ul>
 
+
 
+	<p>
 
+		Considérons deux espaces colorimétriques très communs: [page:SRGBColorSpace] ("sRGB") et
 
+		[page:LinearSRGBColorSpace] ("sRGB-Linéaire"). Les deux utilisent les mêmes primaires et point blanc,
 
+		et donc ont la même gamme de couleur. Le deux utilisent le modèle RGB. Leur seule différence sont
 
+		les fonctions de transfert — Le sRGB-Linéaire est linéaire et respecte l'intensité physique de la lumière.
 
+		Le sRGB utilise les fonctions de transfert non-linéaire du sRGB, et reproduit de manière plus proche la façon dont
 
+		l'oeil humain perçoit la lumière et la réactivité des écrans.
 
+	</p>
 
+
 
+	<p>
 
+		Cette différence est imporante. Les calculs de lumières et les autres opérations de rendu doivent
 
+		généralement se produire dans un espace de lumière linéaire. Cependant, les espaces colorimétriques linéaires sont moins efficaces
 
+		dans le stockage d'images ou de framebuffer, et semblent incorrects qiuand ils sont vus par un humain.
 
+		Par conséquent, les textures d'entrée et l'image du rendu final vont généralement utiliser l'espace colorimétrique
 
+		sRGB non-linéaire.
 
+	</p>
 
+
 
+	<blockquote>
 
+		<p>
 
+			ℹ️ <i><b>NOTE:</b> Alors que certains écrans modernes supportent des gammes plus larges comme Display-P3,
 
+				les APIs graphiques du web reposent largement sur le sRGB. Les applications utilisant three.js
 
+				aujourd'hui utilisent généralement uniquement le sRGB et les espaces colorimétriques sRGB-linéaires.</i>
 
+		</p>
 
+	</blockquote>
 
+
 
+	<h2>Rôle des espaces colorimétriques</h2>
 
+
 
+	<p>
 
+		Workflows linéaires — requis pour les méthodes de rendu modernes — ils impliquent généralement
 
+		plus d'un espace de couleur, chacun assigné à un rôle particulier. Les espace colorimétriques linéaires et non-linéaires
 
+		sont appropriés pour différents usages, expliqués ci-dessous.
 
+	</p>
 
+
 
+	<h3>Espaces colorimétriques d'entrée</h3>
 
+
 
+	<p>
 
+		Les couleurs fournies à three.js — par les sélecteurs de couleurs, les textures, les modèles 3D, et d'autres sources —
 
+		ont toutes un espace colorimétrique associé. Celles qui ne sont pas déjà dans l'espace colorimétrique sRGB-Linéaire 
+		doivent-être converties, et les textures doivent recevoir les bonnes consignes de <i>texture.encoding</i>.
 
+		Certaines conversions (pour l'héxadecimal et les couleurs CSS en sRGB) peuvent être automatisées si
 
+		l'héritage de la gestion des couleurs est désactivé avant l'initialisation des couleurs:
 
+	</p>
 
+
 
+	<code>
 
+THREE.ColorManagement.legacyMode = false;
 
+	</code>
 
+
 
+	<ul>
 
+		<li>
 
+			<b>Matériaux, lumières, et shaders:</b> Les couleurs des matériaux, lumières, et shaders stockent
 
+			des composantes RGB dans l'espace colorimétrique sRGB-Linéaire.
 
+		</li>
 
+		<li>
 
+			<b>Vertex colors:</b> [page:BufferAttribute BufferAttributes] stocke
 
+			des composantes RGB dans l'espace colorimétrique sRGB-Linéaire.
 
+		</li>
 
+		<li>
 
+			<b>Textures colorées:</b> PNG ou JPEG [page:Texture Textures] contiennent des informations de couleurs
 
+			(comme .map ou .emissiveMap) utilisant le domaine fermé de l'espace colorimétrique sRGB, et doivent être annotés avec
 
+			<i>texture.encoding = sRGBEncoding</i>. Des formats comme OpenEXR (parfois utilisés par .envMap pi
 
+			.lightMap) utilisent l'espace colorimétrique sRGB-Linéaire indiqué par <i>texture.encoding = LinearEncoding</i>,
 
+			et peuvent contenir des valeurs du domaine ouvert [0,∞].
 
+		</li>
 
+		<li>
 
+			<b>Textures non-colorées:</b> Les textures qui ne stockent aucune information de couleur (comme .normalMap
 
+			ou .roughnessMap) n'ont pas d'espace colorimétrique associé, et utilisent généralement l'annotation de texture (par défaut)
 
+			<i>texture.encoding = LinearEncoding</i>. Dans de rares cas, les données ne concernant pas la couleur
 
+			peuvent être représentées par d'autres encodages non-linéaires pour des raisons techniques.
 
+		</li>
 
+	</ul>
 
+
 
+	<blockquote>
 
+		<p>
 
+			⚠️ <i><b>ATTENTION:</b> [page:Scene.fog], [page:Scene.background], et [page:WebGLRenderer.setClearColor]
 
+			sont des exceptions à la règle. Ces propriétés ne sont pas affectées par [page:WebGLRenderer.outputEncoding]
 
+			et doivent donc stocker les composantes RGB dans l'espace colorimétrique de <u>sortie</u> du moteur de rendu.</i>
 
+		</p>
 
+	</blockquote>
 
+
 
+	<blockquote>
 
+		<p>
 
+			⚠️ <i><b>ATTENTION:</b> Plusieurs formats de modèles 3D ne définissent par correctement ou de manière cohérente
 
+			les informations des espaces colorimétriques. Malgré le fait que three.js tente de gérer la plupart des situations, les problèmes
 
+			sont communs avec les formats de fichiers plus anciens. Pour de meilleurs résultats, utilisez glTF 2.0 ([page:GLTFLoader])
 
+			et testez vos modèles 3D dans des visualiseurs en ligne relativement tôt pour vérifier que le modèle est correct en tant que tel.</i>
 
+		</p>
 
+	</blockquote>
 
+
 
+	<h3>Espaces colorimétriques fonctionnels</h3>
 
+
 
+	<p>
 
+		Le rendu, l'interpolation, et plusieurs autres opérations doivent être performées dans un espace colorimétrique 
+		au domaine ouvert, dans lequel les composantes RGB sont proportionnelles
 
+		à l'illumination physique. Dans three.js, l'espace colorimétrique est le sRGB-Linéaire.
 
+	</p>
 
+
 
+	<h3>L'espace colorimétrique de sortie</h3>
 
+
 
+	<p>
 
+		La sortie d'un écran, d'une image, ou d'une vidéo peut impliquer la conversion depuis un espace colorimétrique
 
+		sRGB-Linéaire au domaine ouvert vers un autre espace colorimétrique. Cette conversion peut être effectuée dans
 
+		le pass principal du moteur de rendu ([page:WebGLRenderer.outputEncoding]), ou durant le post-processing.
 
+	</p>
 
+
 
+	<code>
 
+renderer.outputEncoding = THREE.sRGBEncoding; // optional with post-processing
 
+	</code>
 
+
 
+	<ul>
 
+		<li>
 
+			<b>Affichage:</b> Les couleurs envoyées à un canvas WebGL pour affichage doivent-être dans l'espace colorimétrique
 
+			sRGB.
 
+		</li>
 
+		<li>
 
+			<b>Image:</b> Les couleurs envoyées à une image doivent utiliser l'espace colorimétrique approprié au
 
+			format et à l'utilisation. Les images entièrement rendues sur des textures au format PNG ou JPEG 
+			utilisent généralement l'espace colorimétrique sRGB. Les images contenant de l'émission, des light maps, ou d'autres données
 
+			qui ne sont pas restreintes à l'intervalle [0,1] utiliseront généralement l'espace colorimétrique sRGB à domaine ouvert,
 
+			et un format d'image compatible comme OpenEXR.
 
+		</li>
 
+	</ul>
 
+
 
+	<blockquote>
 
+		<p>
 
+			⚠️ <i><b>ATTENTION:</b> Les cibles de rendu doivent utiliser soit le sRGB soit le sRGB-Linéaire. Le sRGB gère
 
+			mieux la précision limitée. Dans le domaine fermé, 8 bits suffisent généralement au sRGB
 
+			tandis que ≥12 bits (demi float) peuvent être requis pour du sRGB-Linéaire. Si les étapes ultérieures
 
+			du pipeline nécessitent une entrée en sRGB-Linéaire, les conversions additionnelles peuvent
 
+			avoir un petit impact sur les performances.</i>
 
+		</p>
 
+	</blockquote>
 
+
 
+	<h2>Utiliser des instances de THREE.Color</h2>
 
+
 
+	<p>
 
+		Les méthodes de lecture ou de modification des instances de [page:Color] partent du principe que les données sont déjà
 
+		dans l'espace colorimétrique de three.js, le sRGB-Linéaire. Les composantes RGB et HSL sont des représentations
 
+		directes de données stockées par l'instance Color, et ne sont jamais converties
 
+		implicitement. Les données Color peuvent être explicitement converties avec <i>.convertLinearToSRGB()</i>
 
+		ou <i>.convertSRGBToLinear()</i>.
 
+	</p>
 
+
 
+	<code>
 
+		// RGB components (no change).
 
+		color.r = color.g = color.b = 0.5;
 
+		console.log( color.r ); // → 0.5
 
+
 
+		// Manual conversion.
 
+		color.r = 0.5;
 
+		color.convertSRGBToLinear();
 
+		console.log( color.r ); // → 0.214041140
 
+	</code>
 
+
 
+	<p>
 
+		Avec <i>ColorManagement.legacyMode = false</i> d'activé (recommandé), certaines conversions
 
+		sont faites automatiquement. Parce que l'héxadécimal et les couleurs CSS sont généralement en sRGB, les méthodes [page:Color]
 
+		vont automatiquement convertir ces entrées du sRGB au sRGB-Linéaire dans des setters, ou
 
+		convertir depuis du sRGB-Linéaire au sRGB lors du renvoi de valeurs héxadécimales ou CSS depuis les getters.
 
+	</p>
 
+
 
+	<code>
 
+		// Hexadecimal conversion.
 
+		color.setHex( 0x808080 );
 
+		console.log( color.r ); // → 0.214041140
 
+		console.log( color.getHex() ); // → 0x808080
 
+
 
+		// CSS conversion.
 
+		color.setStyle( 'rgb( 0.5, 0.5, 0.5 )' );
 
+		console.log( color.r ); // → 0.214041140
 
+
 
+		// Override conversion with 'colorSpace' argument.
 
+		color.setHex( 0x808080, LinearSRGBColorSpace );
 
+		console.log( color.r ); // → 0.5
 
+		console.log( color.getHex( LinearSRGBColorSpace ) ); // → 0x808080
 
+		console.log( color.getHex( SRGBColorSpace ) ); // → 0xBCBCBC
 
+	</code>
 
+
 
+	<h2>Erreurs communes</h2>
 
+
 
+	<p>
 
+		Quand une couleur ou une texture individuelle est mal configurée, elle apparaîtra plus lumineuse ou plus sombre
 
+		qu'attendu. Quand l'espace colorimétrique de sortie du moteur de rendu est mal configuré, la scène entière peut sembler
 
+		plus sombre (e.g. conversion manquante vers le sRGB) ou plus lumineuse (e.g. une double conversion vers le sRGB avec du
 
+		post-processing). Dans chaque cas le problème peut ne pas être uniforme, et simplement augmenter/diminuer
 
+		peut ne pas le résoudre.
 
+	</p>
 
+
 
+	<p>
 
+		Un problème plus subtil peut se produire quand <i>à la fois</i> l'espace colorimétrique d'entrée et 
+		l'espace colorimétrique de sortie sont incorrects — les niveaux de luminosité globaux peuvent être corrects, mais les couleurs peuvent changer
 
+		d'une manière inattendue sous différentes lumières, ou des ombres peuvent sembler plus abruptes et moins lisses
 
+		que prévu. Ces deux erreurs assemblées ne forment pas une réussite, et il est important que
 
+		l'espace colorimétrique soit linéaire ("scene referred") et que l'espace colorimétrique de sortie soit linéaire
 
+		("display referred").
 
+	</p>
 
+
 
+	<h2>Lectures additionnelles</h2>
 
+
 
+	<ul>
 
+		<li>
 
+			<a href="https://developer.nvidia.com/gpugems/gpugems3/part-iv-image-effects/chapter-24-importance-being-linear" target="_blank" rel="noopener">GPU Gems 3: The Importance of Being Linear</a>, par Larry Gritz et Eugene d'Eon
 
+		</li>
 
+		<li>
 
+			<a href="https://blog.johnnovak.net/2016/09/21/what-every-coder-should-know-about-gamma/" target="_blank" rel="noopener">What every coder should know about gamma</a>, par John Novak
 
+		</li>
 
+		<li>
 
+			<a href="https://hg2dc.com/" target="_blank" rel="noopener">The Hitchhiker's Guide to Digital Color</a>, par Troy Sobotka
 
+		</li>
 
+		<li>
 
+			<a href="https://docs.blender.org/manual/en/latest/render/color_management.html" target="_blank" rel="noopener">Color Management</a>, Blender
 
+		</li>
 
+	</ul>
 
+
 
+</body>
 
+
 
+</html>

+ 163 - 0
docs/manual/fr/introduction/Creating-a-scene.html
Fájl Megtekintése 

@@ -0,0 +1,163 @@
 
+<!DOCTYPE html>
 
+<html lang="fr">
 
+	<head>
 
+		<meta charset="utf-8">
 
+		<base href="../../../" />
 
+		<script src="page.js"></script>
 
+		<link type="text/css" rel="stylesheet" href="page.css" />
 
+	</head>
 
+	<body>
 
+		<h1>Créer une scène ([name])</h1>
 
+
 
+		<p>L'objectif de cette section est d'effectuer une brève introduction à three.js. Nous commencerons par mettre en place une scène, avec un cube en rotation. Un exemple fonctionnel est fourni à la fin de la page au cas où vous seriez bloqués et que vous auriez besoin d'aide.</p>
 
+
 
+		<h2>Avant de commencer</h2>
 
+
 
+		<p>Avant de pouvoir utiliser three.js, vous aurez besoin d'un endroit pour l'afficher. Enregistrez le code HTML suivant dans un fichier sur votre ordinateur, ainsi qu'une copie de three.js dans le dossier js/, et ouvrez-le dans votre navigateur.</p>
 
+
 
+		<code>
 
+		&lt;!DOCTYPE html&gt;
 
+		&lt;html&gt;
 
+			&lt;head&gt;
 
+				&lt;meta charset="utf-8"&gt;
 
+				&lt;title&gt;My first three.js app&lt;/title&gt;
 
+				&lt;style&gt;
 
+					body { margin: 0; }
 
+				&lt;/style&gt;
 
+			&lt;/head&gt;
 
+			&lt;body&gt;
 
+				&lt;script src="js/three.js"&gt;&lt;/script&gt;
 
+				&lt;script&gt;
 
+					// Our Javascript will go here.
 
+				&lt;/script&gt;
 
+			&lt;/body&gt;
 
+		&lt;/html&gt;
 
+		</code>
 
+
 
+		<p>C'est tout. Tout le code qui va suivre doit aller dans la balise &lt;script&gt;.</p>
 
+
 
+		<h2>Créer la scène</h2>
 
+
 
+		<p>Pour pouvoir afficher quelque chose avec three.js, nous avons besoin de trois choses: une scène, une caméra et un moteur de rendu, afin de pouvoir effectuer un rendu de la scène à travers la caméra.</p>
 
+
 
+		<code>
 
+		const scene = new THREE.Scene();
 
+		const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
 
+
 
+		const renderer = new THREE.WebGLRenderer();
 
+		renderer.setSize( window.innerWidth, window.innerHeight );
 
+		document.body.appendChild( renderer.domElement );
 
+		</code>
 
+
 
+		<p>Prenons un moment pour expliquer ce qu'il se passe. Nous avons maintenant mis en place la scène, notre caméra et le moteur de rendu.</p>
 
+
 
+		<p>Il existe différentes caméras dans three.js. Pour l'instant, utilisons une `PerspectiveCamera`.</p>
 
+
 
+		<p>Le premier attribut est le `field of view`. Le champ de vision (FOV) est l'étendue de la scène visible sur l'écran à un moment donné. La valeur est en degrés.</p>
 
+
 
+		<p>Le second attribut est nommé `aspect ratio`. Vous devrez presque toujours utiliser la largeur de l'élément divisée par sa hauteur, ou vous aurez le même résultat que lorsque vous regardez un vieux film sur une télévision avec un écran large - l'image semble écrasée.</p>
 
+
 
+		<p>Les deux attributs suivants sont le `near` et le `far` du plan de coupe. Les objets plus loins de la caméra que la valeur `far` ou plus proches que `near` ne seront pas rendus. Vous n'avez pas besoin de vous préoccuper de ça pour l'instant, mais vous devriez ajuster ces valeurs dans vos applications afin d'obtenir de meilleures performances.</p>
 
+
 
+		<p>Ensuite vient le moteur de rendu. C'est là où la magie opère. En plus du WebGLRenderer que nous utilisons ici, three.js est livré avec quelques autres moteurs de rendu, principalement utilisés comme moteurs de support pour les utilisateurs avec des navigateurs plus anciens ou n'ayant pas de support de WebGL.</p>
 
+
 
+		<p>En plus d'instancier le moteur de rendu, nous avons aussi besoin de définir la taille à laquelle doit-être effectué le rendu de l'application. Il est recommandé d'utiliser la largeur et la hauteur de la zone qu'est censée occuper l'application - dans ce cas, la largeur et la hauteur de la fenêtre du navigateur. Pour les applications gourmandes en ressources, vous pouvez aussi donner à `setSize` des valeurs plus petites, comme `window.innerWidth/2` et `window.innerHeight/2`, qui permettra d'effectuer le rendu à un quart de sa taille initiale.</p>
 
+
 
+		<p>Si vous souhaitez conserver la taille de votre application mais effectuer un rendu avec une résolution plus faible, vous pouvez le faire appelant `setSize` avec false comme `updateStyle` (le troisième argument). Par exemple, `setSize(window.innerWidth/2, window.innerHeight/2, false)` effectuera un rendu de votre application à demi-résolution, en considérant que votre &lt;canvas&gt; a 100% de largeur et de hauteur.</p>
 
+
 
+		<p>Pour finir, nous ajoutons l'élement `renderer` à notre document HTML. C'est un élément &lt;canvas&gt; que le moteur de rendu utilise pour nous affficher la scène.</p>
 
+
 
+		<p><em>"C'est sympa tout ça, mais où sont les cubes que tu nous avais promis?"</em> Ajoutons-les maintenant.</p>
 
+
 
+		<code>
 
+		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 );
 
+
 
+		camera.position.z = 5;
 
+		</code>
 
+
 
+		<p>Pour créer un cube, nous avons besoin d'une `BoxGeometry`. C'est un objet qui contient tous les points (`vertices`) et le remplissage (`faces`) du cube. Nous en verrons plus à ce propos dans le futur.</p>
 
+
 
+		<p>En plus de la forme (geometry), nous avons besoin d'un matériau (material) pour le colorer. Three.js contient plusieurs matériaux, mais nous nous contenterons du `MeshBasicMaterial` pour l'instant. Tous les matériaux prennent un objet avec un ensemble de propriétés qui s'appliquent à eux. Pour rester dans la simplicité, ne renseignons qu'un attribut couleur avec la valeur `0x00ff00`, qui est du vert. Cela fonctionne de la même manière que les couleurs en CSS ou dans Photoshop (`hex colors`).</p>
 
+
 
+		<p>La dernière chose dont nous avons besoin est un `Mesh`. Un mesh (maillage) est un objet qui prends une forme (geometry), et qui y applique un matériau (material), que nous pouvons ensuite insérer dans notre scène, et déplacer librement.</p>
 
+
 
+		<p>Par défaut, quand nous appelons `scene.add()`, l'élément est ajouté aux coordonnées `(0,0,0)`. Cela causera la superposition du cube et de la caméra qui seront les uns à l'intérieur des autres. Pour éviter ça, nous devons simplement déplacer un peu la caméra.</p>
 
+
 
+		<h2>Faire un rendu de la scène</h2>
 
+
 
+		<p>Si vous avez copié le code du dessus dans le fichier HTML créé plus tôt, vous ne verrez rien. C'est parce que nous n'effectuons aucun rendu pour l'instant. Pour cela, nous avons besoin de ce que l'on appelle une `render or animate loop`.</p>
 
+
 
+		<code>
 
+		function animate() {
 
+			requestAnimationFrame( animate );
 
+			renderer.render( scene, camera );
 
+		}
 
+		animate();
 
+		</code>
 
+
 
+		<p>Cela va créer une boucle qui va déclencher le moteur de rendu afin qu'il dessine la scène à chaque fois que l'écran est rafraîchi (sur un écran classique c'est 60 fois par secondes). Si l'écriture de jeux sur navigateur vous est étrangère, vous devez vous dire <em>"Pourquoi nous ne créons pas de setInterval ?"</em> C'est que - nous pourrions, mais `requestAnimationFrame` a plusieurs avantages. Le plus important est peut-être qu'il se met en pause lorsque l'utilisateur change d'onglet sur son navigateur, par conséquence, pas de perte de leur précieuse puissance de calcul ou de durée de vie de leur batterie.</p>
 
+
 
+		<h2>Animer le cube</h2>
 
+
 
+		<p>Si vous insérez tout le code au-dessus dans le fichier que vous avez créé avant que nous commencions, vous devriez voir un cube vert. Rendons tout ça un peu plus intéressant en le faisant tourner.</p>
 
+
 
+		<p>Ajoutez le code suivant juste au dessus de l'appel `renderer.render` dans votre fonction `animate`:</p>
 
+
 
+		<code>
 
+		cube.rotation.x += 0.01;
 
+		cube.rotation.y += 0.01;
 
+		</code>
 
+
 
+		<p>Ceci sera exécuté à chaque frame (normalement 60 fois par secondes), et donnera au cube une belle animation de rotation. Pour résumer, tout ce que vous souhaitez déplacer ou changer pendant que l'application est en cours d'exécution doit passer par la boucle animate. Vous pouvez évidemment appeler d'autres fonctions depuis cet endroit, afin de ne pas finir avec une fonction `animate` de plusieurs centaines de lignes.</p>
 
+
 
+		<h2>Le résultat</h2>
 
+		<p>Félicitations! Vous avez maintenant terminé votre première application three.js. C'est trivial, mais il faut bien commencer quelque part.</p>
 
+
 
+		<p>Le code complet est disponible ci-dessous et ainsi que sous forme d'éditable [link:https://jsfiddle.net/fxurzeb4/ exemple live]. Amusez-vous avec pour avoir une meilleure idée de son fonctionnement.</p>
 
+
 
+		<code>
 
+		&lt;!DOCTYPE html&gt;
 
+		&lt;html&gt;
 
+			&lt;head&gt;
 
+				&lt;meta charset="utf-8"&gt;
 
+				&lt;title&gt;My first three.js app&lt;/title&gt;
 
+				&lt;style&gt;
 
+					body { margin: 0; }
 
+				&lt;/style&gt;
 
+			&lt;/head&gt;
 
+			&lt;body&gt;
 
+				&lt;script src="js/three.js"&gt;&lt;/script&gt;
 
+				&lt;script&gt;
 
+					const scene = new THREE.Scene();
 
+					const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
 
+
 
+					const renderer = new THREE.WebGLRenderer();
 
+					renderer.setSize( window.innerWidth, window.innerHeight );
 
+					document.body.appendChild( renderer.domElement );
 
+
 
+					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 );
 
+
 
+					camera.position.z = 5;
 
+
 
+					function animate() {
 
+						requestAnimationFrame( animate );
 
+
 
+						cube.rotation.x += 0.01;
 
+						cube.rotation.y += 0.01;
 
+
 
+						renderer.render( scene, camera );
 
+					};
 
+
 
+					animate();
 
+				&lt;/script&gt;
 
+			&lt;/body&gt;
 
+		&lt;/html&gt;
 
+		</code>
 
+	</body>
 
+</html>

+ 142 - 0
docs/manual/fr/introduction/Creating-text.html
Fájl Megtekintése 

@@ -0,0 +1,142 @@
 
+<!DOCTYPE html>
 
+<html lang="fr">
 
+	<head>
 
+		<meta charset="utf-8">
 
+		<base href="../../../" />
 
+		<script src="page.js"></script>
 
+		<link type="text/css" rel="stylesheet" href="page.css" />
 
+	</head>
 
+	<body>
 
+		<h1>Créer un texte ([name])</h1>
 
+		<div>
 
+			<p>
 
+				Parfois vous aurez besoin d'utiliser du texte dans votre application three.js - ici
 
+				sont présentées quelques façons de le faire.
 
+			</p>
 
+		</div>
 
+
 
+		<h2>1. DOM + CSS</h2>
 
+		<div>
 
+			<p>
 
+				Utiliser du HTML est généralement la manière la plus simple et la plus rapide d'ajouter du texte. Ceci est la méthode
 
+				utilisée pour les overlays descriptifs de la plupart des exemples three.js.
 
+			</p>
 
+			<p>Vous pouvez ajouter du contenu à une</p>
 
+			<code>&lt;div id="info"&gt;Description&lt;/div&gt;</code>
 
+
 
+			<p>
 
+				et utiliser CSS pour donner une position absolute située au-dessus de tout le reste du contenu grâce au
 
+				z-index plus particulièrement si vous utilisez three.js en plein-écran.
 
+			</p>
 
+
 
+			<code>
 
+#info {
 
+	position: absolute;
 
+	top: 10px;
 
+	width: 100%;
 
+	text-align: center;
 
+	z-index: 100;
 
+	display:block;
 
+}
 
+			</code>
 
+
 
+		</div>
 
+
 
+		
+		<h2>2. Utiliser [page:CSS2DRenderer] ou [page:CSS3DRenderer]</h2>
 
+		<div>
 
+			<p>
 
+				Utilisez ces moteurs de rendu pour dessiner des textes de haute-qualité contenus dans l'élément DOM de vos scène three.js.
 
+				Cette approche est similaire à la 1. excepté qu'avec ces moteurs de rendu les éléments peuvent être intégrés plus précisément et dynamiquement à la scène.
 
+			</p>
 
+		</div>
 
+		
+
 
+		<h2>3. Associer un texte au canvas et l'utiliser comme [page:Texture]</h2>
 
+		<div>
 
+			<p>Utilisez cette méthode si vous souhaitez dessiner du texte facilement sur un plane dans votre scène three.js.</p>
 
+		</div>
 
+
 
+
 
+		<h2>4. Créez un modèle dans votre application 3D préférée et exportez le dans three.js</h2>
 
+		<div>
 
+			<p>Utilisez cette méthode si vous préférez travailler avec vos applications 3D puis importer vos modèles dans three.js.</p>
 
+		</div>
 
+
 
+
 
+		<h2>5. Forme de texte procédurale</h2>
 
+		<div>
 
+			<p>
 
+				Si vous souhaitez travailler en three.js pur ou créer des formes de texte 3D procédurales et dynamiques,
 
+				vous pouvez créer un mesh qui aura pour geometry une instance de THREE.TextGeometry:
 
+			</p>
 
+			<p>
 
+				<code>new THREE.TextGeometry( text, parameters );</code>
 
+			</p>
 
+			<p>
 
+				Pour que cela fonctionne, dans tous les cas, votre TextGeometry aura besoin d'une instance de THREE.Font
 
+				avec comme paramètre "font".
 
+
 
+				Voir [page:TextGeometry] pour avoir plus d'informations sur comment cela peut-être mis en place, une description de chaque
 
+				paramètre accepté, et une liste des fonts JSON qui viennent avec la distribution THREE.js.
 
+			</p>
 
+
 
+			<h3>Exemples</h3>
 
+
 
+			<p>
 
+				[example:webgl_geometry_text WebGL / geometry / text]<br />
 
+				[example:webgl_shadowmap WebGL / shadowmap]
 
+			</p>
 
+
 
+			<p>
 
+				Si Typeface ne fonctionne pas, ou que vous souhaitez une font qui n'est pas ici, il y a un tutoriel
 
+				avec un script python pour blender qui vous permet d'exporter du texte dans au format JSON de Three.js:
 
+				[link:http://www.jaanga.com/2012/03/blender-to-threejs-create-3d-text-with.html]
 
+			</p>
 
+
 
+		</div>
 
+
 
+
 
+		<h2>6. Fonts Bitmap</h2>
 
+		<div>
 
+			<p>
 
+				BMFonts (bitmap fonts) permet de transformer les lots de glyphs en une seule BufferGeometry. Le rendu BMFont
 
+				supporte les sauts-de-ligne, l'espacement des lettres, le crénage, les fonctions de distance signée avec
 
+				des dérivées, les fonctions de distance signée multi-channel, les fonts multi-texture, et bien plus.
 
+				Voir [link:https://github.com/felixmariotto/three-mesh-ui three-mesh-ui] ou [link:https://github.com/Jam3/three-bmfont-text three-bmfont-text].
 
+			</p>
 
+			<p>
 
+				Les fonts de base sont disponibles dans des projets comme
 
+				[link:https://github.com/etiennepinchon/aframe-fonts A-Frame Fonts], ou vous pouvez créer la votre
 
+				depuis n'importe quelle font .TTF, en optimisant les performances en n'incluant que les character requis par le projet.
 
+			</p>
 
+			<p>
 
+				Quelques outils utiles:
 
+			</p>
 
+			<ul>
 
+				<li>[link:http://msdf-bmfont.donmccurdy.com/ msdf-bmfont-web] <i>(web-based)</i></li>
 
+				<li>[link:https://github.com/soimy/msdf-bmfont-xml msdf-bmfont-xml] <i>(ligne de commande)</i></li>
 
+				<li>[link:https://github.com/libgdx/libgdx/wiki/Hiero hiero] <i>(applciations desktop)</i></li>
 
+			</ul>
 
+		</div>
 
+
 
+
 
+		<h2>7. Troika Text</h2>
 
+		<div>
 
+			<p>
 
+				Le package [link:https://www.npmjs.com/package/troika-three-text troika-three-text] effectue un rendu 
+				de qualité et anti-alisé des textes, utilisant une technique similaire à BMFonts, mais fonctionne directement avec n'importe quel fichier de font .TTF 
+				ou .WOFF pour que vous n'ayez pas à pré-générer une texture glyph hors-ligne. Il ajoute également des fonctionnalités 
+				comme:
 
+			</p>
 
+			<ul>
 
+				<li>Des effets comme les strokes, les ombres portées, et les courbures</li>
 
+				<li>La capacité d'appliquer n'importe quel matériau three.js, même un ShaderMaterial customisé</li>
 
+				<li>Le support des ligatures de fonts, des scripts pour les lettres jointes, et un layout bi-directionnel de droite-à-gauche</li>
 
+				<li>Une optimisation pour les grandes quantités de textes dynamiques, en réalisant la plupart du travail en dehors du thread principal dans un web worker</li>
 
+			</ul>
 
+		</div>
 
+
 
+
 
+	</body>
 
+</html>

+ 64 - 0
docs/manual/fr/introduction/Drawing-lines.html
Fájl Megtekintése 

@@ -0,0 +1,64 @@
 
+<!DOCTYPE html>
 
+<html lang="fr">
 
+	<head>
 
+		<meta charset="utf-8">
 
+		<base href="../../../" />
 
+		<script src="page.js"></script>
 
+		<link type="text/css" rel="stylesheet" href="page.css" />
 
+	</head>
 
+	<body>
 
+		<h1>Dessiner des lignes ([name])</h1>
 
+		<div>
 
+			<p>
 
+				Disons que vous voulez dessiner une ligne ou un cercle, pas un wireframe [page:Mesh].
 
+				Premièrement nous devons préparer le [page:WebGLRenderer renderer], [page:Scene scene] et la caméra (voir la page Créer une scène).
 
+			</p>
 
+
 
+			<p>Voici le code que nous allons utiliser:</p>
 
+			<code>
 
+const renderer = new THREE.WebGLRenderer();
 
+renderer.setSize( window.innerWidth, window.innerHeight );
 
+document.body.appendChild( renderer.domElement );
 
+
 
+const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 500 );
 
+camera.position.set( 0, 0, 100 );
 
+camera.lookAt( 0, 0, 0 );
 
+
 
+const scene = new THREE.Scene();
 
+			</code>
 
+			<p>La prochaine chose que nous allons faire est définir un matériau (material). Pour les lignes, nous devons utiliser [page:LineBasicMaterial] ou [page:LineDashedMaterial].</p>
 
+			<code>
 
+//create a blue LineBasicMaterial
 
+const material = new THREE.LineBasicMaterial( { color: 0x0000ff } );
 
+			</code>
 
+
 
+			<p>
 
+				Après le matériau, nous devons utiliser une forme (geometry) avec quelques sommets:
 
+			</p>
 
+
 
+			<code>
 
+const points = [];
 
+points.push( new THREE.Vector3( - 10, 0, 0 ) );
 
+points.push( new THREE.Vector3( 0, 10, 0 ) );
 
+points.push( new THREE.Vector3( 10, 0, 0 ) );
 
+
 
+const geometry = new THREE.BufferGeometry().setFromPoints( points );
 
+			</code>
 
+
 
+			<p>Notez que les lignes sont tracées entre chaque paire consécutive de sommets, mais pas entre la première et la deuxième (la ligne n'est pas fermée).</p>
 
+
 
+			<p>Maintenant que nous avons les points pour deux lignes et un matériau, nous pouvons les assembler pour former une ligne.</p>
 
+			<code>
 
+const line = new THREE.Line( geometry, material );
 
+			</code>
 
+			<p>Il ne manque qu'à l'ajouter à la scène et appeler [page:WebGLRenderer.render render].</p>
 
+
 
+			<code>
 
+scene.add( line );
 
+renderer.render( scene, camera );
 
+			</code>
 
+
 
+			<p>Vous devez maintenant voir une flèche pointant vers le haut, faite de deux lignes bleues.</p>
 
+		</div>
 
+	</body>
 
+</html>

+ 60 - 0
docs/manual/fr/introduction/FAQ.html
Fájl Megtekintése 

@@ -0,0 +1,60 @@
 
+<!DOCTYPE html>
 
+<html lang="fr">
 
+	<head>
 
+		<meta charset="utf-8">
 
+		<base href="../../../" />
 
+		<script src="page.js"></script>
 
+		<link type="text/css" rel="stylesheet" href="page.css" />
 
+	</head>
 
+	<body>
 
+		<h1>[name]</h1>
 
+
 
+		<h2>Quel format de modèle 3D est le mieux supporté?</h2>
 
+		<div>
 
+			<p>
 
+				Le format recommandé pour l'import et l'export de modèles est glTF (GL Transmission Format). Parce que glTF est ciblé sur la rapidité du temps d'exécution, le format est compact et rapide à charger.
 
+			</p>
 
+			<p>
 
+				three.js fournit des loaders pour plusieurs autres formats populaires comme FBX, Collada ou OBJ. Néanmoins, vous devez toujours essayer d'établir un workflow basé sur glTF dans vos projets. Pour plus d'informations, voir [link:#manual/introduction/Loading-3D-models loading 3D models].
 
+			</p>
 
+		</div>
 
+
 
+		<h2>Pourquoi y a-t-il des tags meta viewport dans les exemples?</h2>
 
+		<div>
 
+				<code>&lt;meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"&gt;</code>
 
+
 
+				<p>Ces tags contrôlent la taille du viewport et l'échelle pour les navigateurs mobiles (où le contenu de la page peut être rendu à des tailles différentes de celle du viewport visible).</p>
 
+
 
+				<p>[link:https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html Safari: Using the Viewport]</p>
 
+
 
+				<p>[link:https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag MDN: Using the viewport meta tag]</p>
 
+		</div>
 
+
 
+		<h2>Comment conserver l'échelle de la scène au resize?</h2>
 
+		<p>
 
+			Nous voulons que tous les objets, peu importe leur distance à la caméra, conservent leur taille, même si la fenêtre est redimensionnée.
 
+
 
+			L'équation clé pour résoudre ce problème est la formule suivante, concernant la hauteur visible à une distance donnée:
 
+
 
+			<code>
 
+visible_height = 2 * Math.tan( ( Math.PI / 180 ) * camera.fov / 2 ) * distance_from_camera;
 
+			</code>
 
+			Si nous augmentons la hauteur de la fenêtre d'un certain pourcentage, alors nous souhaitons que la hauteur visible à toutes distances soit augmentée
 
+			du même pourcentage.
 
+
 
+			Cela ne peut pas être fait en changeant la position de la camera. Il faut plutôt changer le champ de vision de celle-ci.
 
+			[link:http://jsfiddle.net/Q4Jpu/ Example].
 
+		</p>
 
+
 
+		<h2>Pourquoi une partie de mon objet est invisible?</h2>
 
+		<p>
 
+			Cela peut être causé par le face culling. Les faces ont une orientation qui décident quel côté est lequel. Et le culling retire la face arrière dans des circonstances normales. Pour voir si c'est bien votre problème, changez la propriété material side pour THREE.DoubleSide.
 
+			<code>material.side = THREE.DoubleSide</code>
 
+		</p>
 
+
 
+		<h2>Pourquoi three.js retourne quelques fois des valeurs étranges pour des inputs invalides?</h2>
 
+		<p>
 
+			Pour des raisons de performances, three.js ne valide pas les inputs dans la plupart des cas. Il en va de la responsabilité de votre application de vérifier que tous les inputs sont valides.
 
+		</p>
 
+	</body>
 
+</html>

+ 81 - 0
docs/manual/fr/introduction/How-to-create-VR-content.html
Fájl Megtekintése 

@@ -0,0 +1,81 @@
 
+<!DOCTYPE html>
 
+<html lang="fr">
 
+
 
+<head>
 
+	<meta charset="utf-8">
 
+	<base href="../../../" />
 
+	<script src="page.js"></script>
 
+	<link type="text/css" rel="stylesheet" href="page.css" />
 
+</head>
 
+
 
+<body>
 
+	<h1>Créer du contenu VR ([name])</h1>
 
+
 
+	<p>
 
+		Ce guide fournit une brève vue d'ensemble des composants basiques d'une application VR web
 
+		faite avec three.js.
 
+	</p>
 
+
 
+	<h2>Workflow</h2>
 
+
 
+	<p>
 
+		Premièrement, vous devez inclure [link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/webxr/VRButton.js VRButton.js]
 
+		dans votre projet.
 
+	</p>
 
+
 
+	<code>
 
+import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';
 
+	</code>
 
+
 
+	<p>
 
+		*VRButton.createButton()* fait deux choses importantes: Cela crée un bouton qui indique
 
+		la compatibilité VR. De plus, cela initie une session VR si l'utilisateur active le bouton. La seule chose que vous avez 
+		à faire est d'ajouter la ligne de code suivante à votre application.
 
+	</p>
 
+
 
+	<code>
 
+document.body.appendChild( VRButton.createButton( renderer ) );
 
+	</code>
 
+
 
+	<p>
 
+		Ensuite, vous devez dire à votre instance de `WebGLRenderer` d'activer le rendu XR.
 
+	</p>
 
+
 
+	<code>
 
+renderer.xr.enabled = true;
 
+	</code>
 
+
 
+	<p>
 
+		Finalement, vous n'avez plus qu'à ajuster votre boucle d'animation étant donné que nous ne pouvons pas utiliser notre fonction bien aimée
 
+		*window.requestAnimationFrame()*. Pour les projets VR nous utilisons [page:WebGLRenderer.setAnimationLoop setAnimationLoop].
 
+		Le code minimal ressemble à cela:
 
+	</p>
 
+
 
+	<code>
 
+renderer.setAnimationLoop( function () {
 
+
 
+	renderer.render( scene, camera );
 
+
 
+} );
 
+	</code>
 
+
 
+	<h2>Étapes Suivantes</h2>
 
+
 
+	<p>
 
+		Jetez un coup d'oeil à un des exemples officiels WebVR pour voir le workflow en action.<br /><br />
 
+
 
+		[example:webxr_vr_ballshooter WebXR / VR / ballshooter]<br />
 
+		[example:webxr_vr_cubes WebXR / VR / cubes]<br />
 
+		[example:webxr_vr_dragging WebXR / VR / dragging]<br />
 
+		[example:webxr_vr_paint WebXR / VR / paint]<br />
 
+		[example:webxr_vr_panorama_depth WebXR / VR / panorama_depth]<br />
 
+		[example:webxr_vr_panorama WebXR / VR / panorama]<br />
 
+		[example:webxr_vr_rollercoaster WebXR / VR / rollercoaster]<br />
 
+		[example:webxr_vr_sandbox WebXR / VR / sandbox]<br />
 
+		[example:webxr_vr_sculpt WebXR / VR / sculpt]<br />
 
+		[example:webxr_vr_video WebXR / VR / video]
 
+	</p>
 
+
 
+</body>
 
+
 
+</html>

+ 124 - 0
docs/manual/fr/introduction/How-to-dispose-of-objects.html
Fájl Megtekintése 

@@ -0,0 +1,124 @@
 
+<!DOCTYPE html>
 
+<html lang="fr">
 
+
 
+<head>
 
+	<meta charset="utf-8">
 
+	<base href="../../../" />
 
+	<script src="page.js"></script>
 
+	<link type="text/css" rel="stylesheet" href="page.css" />
 
+</head>
 
+
 
+<body>
 
+	<h1>Supprimer un objet ([name])</h1>
 
+
 
+	<p>
 
+		Un des aspects importants dans l'amélioration des performances et qui permet d'éviter les fuites de mémoire dans votre application est la suppression des entités non-utilisées de la librairie.
 
+		Dès que vous créez une instance d'un type *three.js*, vous allouez une certaine quantité de mémoire. Toutefois, *three.js* crée pour certains objets
 
+		comme les formes ou les matériaux, des entités WebGL associées comme des buffers ou des programmes de shaders qui sont nécessaires au rendu. Il est important de
 
+		souligner que ces objets ne sont pas automatiquement débarassés. Au contraire, l'application doit utiliser une API particulière pour libérer ce genre de ressources.
 
+		Ce guide vous fournit une brève vue d'ensemble du fonctionnement de cette API et des objets considérés comme pertinents dans ce contexte.
 
+	</p>
 
+
 
+	<h2>Formes</h2>
 
+
 
+	<p>
 
+		Une forme représente généralement des informations concernant des sommets présentés comme un ensemble d'attributs. *three.js* crée en interne un objet de type [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLBuffer WebGLBuffer]
 
+		pour chaque attribut. Ces entités sont supprimées uniquement si vous appelez [page:BufferGeometry.dispose](). Si une forme devient obsolète dans votre application,
 
+		exécutez cette méthode pour libérer toutes les ressources associées.
 
+	</p>
 
+
 
+	<h2>Matériaux</h2>
 
+
 
+	<p>
 
+		Un matériau définit comment un objet est rendu. *three.js* utilise les informations de la définition du matériau pour construire un programme de shader pour le rendu.
 
+		Les programmes de shader peuvent être supprimés seulement si leur matériau respectif est supprimé. Dans un souci de performances, *three.js* essaye de réutiliser des
 
+		programmes de shaders existants si possible. Donc un programme de shader est supprimé uniquement si tous les matériaux associés sont supprimés. Vous pouvez indiquer la suppression d'un matériau en 
+		exécutant [page:Material.dispose]().
 
+	</p>
 
+
 
+	<h2>Textures</h2>
 
+
 
+	<p>
 
+		La suppression d'un matériau n'a aucun effet sur les textures. Elles sont gérées séparément étant donné qu'une seule texture peut-être utilisée par plusieurs matériaux au même moment.
 
+		Chaque fois que vous créez une instance de [page:Texture], three.js crée en interne une instance de [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLTexture WebGLTexture].
 
+		Comme les buffers, cet objet ne peut-être supprimé qu'en appelant [page:Texture.dispose]().
 
+	</p>
 
+
 
+	<p>
 
+		Si vous utilisez une `ImageBitmap` comme source de données pour une texture, vous devez appeler [link:https://developer.mozilla.org/en-US/docs/Web/API/ImageBitmap/close ImageBitmap.close]() au niveau de l'application pour libérer toutes les ressources côté processeur.
 
+		Un appel automatisé de `ImageBitmap.close()` dans [page:Texture.dispose]() n'est pas possible, étant donné que le bitmap devient inutilisable, et que le moteur n'a aucun moyen de savoir si l'image bitmap est utilisée ailleurs.
 
+	</p>
 
+
 
+	<h2>Cibles de rendu</h2>
 
+
 
+	<p>
 
+		Les objets de type [page:WebGLRenderTarget] n'allouent pas qu'une instance de [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLTexture WebGLTexture] mais également
 
+		[link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLFramebuffer WebGLFramebuffer]s et [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderbuffer WebGLRenderbuffer]s
 
+		pour réaliser des rendus customisés. Ces objets ne sont désalloués qu'en exécutant [page:WebGLRenderTarget.dispose]().
 
+	</p>
 
+
 
+	<h2>Divers</h2>
 
+
 
+	<p>
 
+		Il y a d'autres classes du dossier example comme controls ou les effets de post processings qui fournissent la méthode `dispose()` pour retirer des event listeners internes
 
+		ou des cibles de rendu. En général, il est recommandé de jeter un coup d'oeil à l'API ou à la documentation d'une classe en cherchant un `dispose()`. Si il existe, vous devez l'utiliser pour faire votre petit ménage après utilisation.
 
+	</p>
 
+
 
+	<h2>FAQ</h2>
 
+
 
+	<h3>Pourquoi *three.js* ne peut pas supprimer automatiquement les objets?</h3>
 
+
 
+	<p>
 
+		Cette question a été posée énormément de fois par la communauté, il est donc important de clarifier ce sujet. Le fait est que *three.js* ne connaît pas la durée de vie ou la portée des
 
+		entités comme les formes ou les matériaux créés par les utilisateurs. Il en va de la responsabilité de l'application. Par exemple, si un matériau n'est pas utilisé pour le rendu pour l'instant,
 
+		il peut être nécessaire pour le prochain frame. Donc si l'application décide qu'un certain objet peut-être supprimé, elle doit en notifier le moteur en appelant la méthode
 
+		`dispose()`.
 
+	</p>
 
+
 
+	<h3>Retirer un mesh de la scène supprime également sa forme et son matériau?</h3>
 
+
 
+	<p>
 
+		Non, vous devez explicitement supprimer la forme et le matériau via *dispose()*. Gardez à l'esprit que les formes et matériaux peuvent être partagés entre plusieurs objets 3D comme les meshes.
 
+	</p>
 
+
 
+	<h3>Est-ce que *three.js* fournit des informations à propos des objets en cache?</h3>
 
+
 
+	<p>
 
+		Oui. Il est possible d'interroger [page:WebGLRenderer.info], qui est une propriété spéciale du moteur de rendu avec une série d'informations et de statistiques à propos de l'usage graphique
 
+		et du proccessus de rendu. Entre autres, cela peut vous donner des informations comme le nombre de textures, de formes et de programmes de shaders stockés en interne. Si vous remarquez des problèmes de performance
 
+		dans votre application, une bonne idée serait de débugger cette propriété pour facilement identifier une fuite de mémoire.
 
+	</p>
 
+
 
+	<h3>Que se passe t-il quand on appelle `dispose()` sur une texture mais que l'image n'est pas encore chargée?</h3>
 
+
 
+	<p>
 
+		Des ressources internes sont allouées pour une texture uniquement si l'image est entièrement chargée. Si vous supprimez une texture avant que l'image soit chargée,
 
+		rien ne se produit. Aucune ressource n'était allouée il n'y a donc rien à libérer.
 
+	</p>
 
+
 
+	<h3>Que se passe t-il quand on appelle `dispose()` puis qu'on utilise l'objet plus tard?</h3>
 
+
 
+	<p>
 
+		Les ressources internes libérées sont réallouées par le moteur. Il n'y aura donc pas d'erreur d'exécution mais vous remarquerez probablement un impact négatif sur les performances au frame actuel,
 
+		particulièrement quand le programme de shaders doit-être compilé.
 
+	</p>
 
+
 
+	<h3>Comment gérer les objets *three.js* dans mon application? Quand dois-je supprimer les objets?</h3>
 
+
 
+	<p>
 
+		En général, il n'y a pas de recommandation universelle pour cette question. Savoir si l'utilisation de `dispose()` est appropriée dépend grandement des cas d'utilisation. Il est important de souligner qu'il
 
+		n'est pas nécessaire de toujours se débarasser des objets. Un bon exemple serait un jeu avec de multiple niveaux. Le bon moment pour supprimer les objets serait à un changement
 
+		de niveau. L'application devrait traverser les anciennes scènes et supprimer tous les matériaux, les formes et les textures obsolètes. Comme mentionné dans la section précédente, supprimer des
 
+		objets toujours utilisés ne produit pas d'erreur d'exécution. La pire chose qui pourrait se produire serait une baisse de la performance à un seul frame.
 
+	</p>
 
+
 
+	<h2>Exemples qui montrent l'utilisation de dispose()</h2>
 
+
 
+	<p>
 
+		[example:webgl_test_memory WebGL / test / memory]<br />
 
+		[example:webgl_test_memory2 WebGL / test / memory2]<br />
 
+	</p>
 
+
 
+</body>
 
+
 
+</html>

+ 169 - 0
docs/manual/fr/introduction/How-to-run-things-locally.html
Fájl Megtekintése 

@@ -0,0 +1,169 @@
 
+<!DOCTYPE html>
 
+<html lang="fr">
 
+	<head>
 
+		<meta charset="utf-8">
 
+		<base href="../../../" />
 
+		<script src="page.js"></script>
 
+		<link type="text/css" rel="stylesheet" href="page.css" />
 
+	</head>
 
+	<body>
 
+		<h1>Exécuter localement ([name])</h1>
 
+		<p>
 
+			Si vous n'utilisez que des formes procédurales et que vous ne chargez acune texture, vos pages web sont censées fonctionner
 
+			directement depuis le système de fichiers, vous n'avez qu'à double-cliquer sur le fichier HTML dans un explorateur de fichier et il
 
+			devrait apparaître en étant fonctionnel dans le navigateur (vous verrez <em>file:///yourFile.html</em> dans votre barre d'URL).
 
+		</p>
 
+
 
+		<h2>Contenu chargé depuis des fichiers externes</h2>
 
+		<div>
 
+			<p>
 
+				Si vous chargez des modèles ou des textures depuis des fichiers externes, à cause des restrictions de sécurité de la [link:http://en.wikipedia.org/wiki/Same_origin_policy same origin policy] des navigateurs,
 
+			 	charger depuis un système de fichiers échouera avec une security exception.
 
+		 	</p>
 
+
 
+			<p>
 
+				Pour résoudre ce problème, exécutez vos fichiers depuis un serveur web local. Cela vous permettra d'accéder à votre page ainsi:
 
+			</p>
 
+			
+			<p>
 
+				<code>http://localhost/yourFile.html</code>
 
+			</p>
 
+
 
+			<p>
 
+				Même s'il est également possible de changer les paramètres de sécurité du navigateur au lieu de faire tourner un serveur web local,
 
+				nous ne recommandons pas cette approche. Le faire pourrait exposer votre appareil à des vulnérabilités, si le
 
+				même navigateur est utilisé pour naviguer d'une manière classique sur le web. Utiliser un serveur local est une pratique standard dans 
+				le développement web, et nous expliquons comment installer et utiliser un serveur local ci-dessous.
 
+			</p>
 
+		</div>
 
+
 
+
 
+		<h2>Créer un serveur local</h2>
 
+		<div>
 
+			<p>
 
+				Plusieurs langages de programmation ont un simple serveur HTTP d'intégré. Ils ne sont pas aussi fournis que
 
+				des serveurs de production comme [link:https://www.apache.org/ Apache] ou [link:https://nginx.org NGINX], néanmoins ils devraient être suffisants pour tester votre
 
+				application three.js.
 
+			</p>
 
+
 
+			<h3>Plugins pour les éditeurs de codes populaires</h3>
 
+			<div>
 
+				<p>Certains éditeurs de code ont des plugins qui créent un simple serveur à la demande.</p>
 
+				<ul>
 
+					<li>[link:https://marketplace.visualstudio.com/items?itemName=yandeu.five-server Five Server] pour Visual Studio Code.</li>
 
+					<li>[link:https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer Live Server] pour Visual Studio Code.</li>
 
+					<li>[link:https://atom.io/packages/atom-live-server Live Server] pour Atom.</li>
 
+				</ul>
 
+			</div>
 
+
 
+			<h3>Servez</h3>
 
+			<div>
 
+				<p>
 
+					[link:https://greggman.github.io/servez Servez] est un serveur simple avec une interface graphique.
 
+				</p>
 
+			</div>
 
+
 
+			<h3>Node.js five-server</h3>
 
+			<div>
 
+				<p>Serveur de développement avec capacité de redémarrage en direct. Pour l'installer:</p>
 
+				<code>
 
+# Remove live-server (if you have it)
 
+npm -g rm live-server
 
+
 
+# Install five-server
 
+npm -g i five-server
 
+
 
+# Update five-server (from time to time)
 
+npm -g i five-server@latest
 
+				</code>
 
+
 
+				<p>Pour le lancer (depuis votre dossier local):</p>
 
+				<code>five-server . -p 8000</code>
 
+			</div>
 
+
 
+			<h3>Node.js http-server</h3>
 
+			<div>
 
+				<p>Node.js a un simple serveur de package HTTP. Pour l'installer:</p>
 
+				<code>npm install http-server -g</code>
 
+
 
+				<p>Pour le lancer (depuis votre dossier local):</p>
 
+				<code>http-server . -p 8000</code>
 
+			</div>
 
+
 
+			<h3>Serveur Python</h3>
 
+			<div>
 
+				<p>
 
+					Si vous avez [link:http://python.org/ Python] d'installé, il devrait suffire pour exécuter
 
+					cela en ligne de commande (depuis votre dossier de travail):
 
+				</p>
 
+				<code>
 
+//Python 2.x
 
+python -m SimpleHTTPServer
 
+
 
+//Python 3.x
 
+python -m http.server
 
+				</code>
 
+
 
+				<p>Cela remontera les fichiers du dossier courant au localhost sur le port 8000, par exemple écrivez dans la barre d'URL:</p>
 
+
 
+				<code>http://localhost:8000/</code>
 
+			</div>
 
+
 
+			<h3>Serveur Ruby</h3>
 
+			<div>
 
+				<p>Si vous avez Ruby d'installé, vous pouvez obtenir le même résultat en exécutant ceci à la place:</p>
 
+				<code>
 
+ruby -r webrick -e "s = WEBrick::HTTPServer.new(:Port => 8000, :DocumentRoot => Dir.pwd); trap('INT') { s.shutdown }; s.start"
 
+				</code>
 
+			</div>
 
+
 
+			<h3>Serveur PHP</h3>
 
+			<div>
 
+				<p>PHP a également un serveur web intégré, depuis la 5.4.0:</p>
 
+				<code>php -S localhost:8000</code>
 
+			</div>
 
+
 
+			<h3>Lighttpd</h3>
 
+			<div>
 
+				<p>
 
+					Lighttpd est un serveur web très léger pouvant servir pour des usages variés. Nous verrons comment l'installer sur OSX avec
 
+					HomeBrew ci-dessous. Contrairement aux autres serveurs cités ici, lighttpd est un serveur de production complet
 
+					et prêt à l'utilisation.
 
+				</p>
 
+
 
+				<ol>
 
+					<li>
 
+						L'installer via homebrew
 
+						<code>brew install lighttpd</code>
 
+					</li>
 
+					<li>
 
+						Créez un fichier de configuration nommé lighttpd.conf dans le dossier où vous souhaitez exécuter votre
 
+						serveur web. Vous trouverez un exemple ici [link:http://redmine.lighttpd.net/projects/lighttpd/wiki/TutorialConfiguration here].
 
+					 </li>
 
+					<li>
 
+						Dans le fichier de configuration, changez le server.document-root pour le dossier d'où vous souhaitez remonter les fichiers.
 
+					</li>
 
+					<li>
 
+						Lancez-le avec
 
+						<code>lighttpd -f lighttpd.conf</code>
 
+					</li>
 
+					<li>
 
+						Rendez-vous sur http://localhost:3000/ et vous-y retrouverez les fichiers statiques du dossier
 
+						choisi.
 
+					</li>
 
+				</ol>
 
+			</div>
 
+			<h3>IIS</h3>
 
+			<div>
 
+				<p>Si vous utilisez Microsoft IIS comme serveur web. Veuillez ajouter un type de paramètres MIME concernant l'extension .fbx avant de charger.</p>
 
+				<code>File name extension: fbx        MIME Type: text/plain</code>
 
+				<p>Par défaut, IIS bloque le téléchargementt des fichiers .fbx, .obj. Vous devez configurer IIS pour autoriser le téléchargement de ce genre de fichiers.</p>
 
+			</div>
 
+			<p>
 
+				D'autres alternatives simples sont [link:http://stackoverflow.com/q/12905426/24874 présentées ici]
 
+				sur Stack Overflow.
 
+			</p>
 
+		</div>
 
+
 
+	</body>
 
+</html>

+ 223 - 0
docs/manual/fr/introduction/How-to-update-things.html
Fájl Megtekintése 

@@ -0,0 +1,223 @@
 
+<!DOCTYPE html>
 
+<html lang="fr">
 
+	<head>
 
+		<meta charset="utf-8">
 
+		<base href="../../../" />
 
+		<script src="page.js"></script>
 
+		<link type="text/css" rel="stylesheet" href="page.css" />
 
+	</head>
 
+	<body>
 
+		<h1>Mettre les éléments à jour ([name])</h1>
 
+		<div>
 
+			<p>Tous les objets mettent par défaut automatiquement leur matrice à jour si ils ont été ajoutés dans la scène avec</p>
 
+			<code>
 
+const object = new THREE.Object3D();
 
+scene.add( object );
 
+			</code>
 
+			ou si ils sont l'enfant d'un autre objet qui a été ajouté à la scène:
 
+			<code>
 
+const object1 = new THREE.Object3D();
 
+const object2 = new THREE.Object3D();
 
+
 
+object1.add( object2 );
 
+scene.add( object1 ); //object1 and object2 will automatically update their matrices
 
+			</code>
 
+		</div>
 
+
 
+		<p>Cependant, si vous savez que l'objet va être statique, vous pouvez désactiver ce comportement et mettre la matrice à jour manuellement quand le besoin se présente.</p>
 
+
 
+		<code>
 
+object.matrixAutoUpdate = false;
 
+object.updateMatrix();
 
+		</code>
 
+
 
+		<h2>BufferGeometry</h2>
 
+		<div>
 
+			<p>
 
+				Les BufferGeometries stockent des informations comme (la position des sommets, l'indice des faces, les normales, les couleurs,
 
+				les UVs et tout autre attribut customisé) dans [page:BufferAttribute buffers] - c'est un,
 
+				[link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays typed arrays].
 
+				Ceci les rend généralement plus rapides que les Geometries standard, le contrecoup est qu'il est plus difficile de les 
+				utiliser.
 
+			</p>
 
+			<p>
 
+				En ce qui concerne la mise à jour des BufferGeometries, la chose la plus importante à comprendre est que
 
+				vous ne pouvez pas changer la taille des buffers (c'est très coûteux, en réalité, c'est équivalent à créer une nouvelle forme).
 
+				Vous pouvez toutefois mettre à jour le contenu des buffers.
 
+			</p>
 
+			<p>
 
+				Ce qui signifie que si vous savez qu'un attribut de votre BufferGeometry va augmenter, disons le nombre de sommets,
 
+				vous devez pré-allouer un buffer assez grand pour contenir n'importe quel nouveau sommet qui pourra être créé. Évidemment,
 
+				cela signifie également qu'il y aura une taille maximale pour votre BufferGeometry - il n'y a
 
+				aucun moyen de créer une BufferGeometry qui peut être étendue à l'infini d'une manière efficiente.
 
+			</p>
 
+			<p>
 
+				Nous utiliserons l'exemple d'une ligne qui est étendue à chaque rendu. Nous allouerons de l'espace
 
+				dans le buffer pour 500 sommets mais nous n'en dessinerons que deux au début, en utilisant [page:BufferGeometry.drawRange].
 
+			</p>
 
+			<code>
 
+const MAX_POINTS = 500;
 
+
 
+// geometry
 
+const geometry = new THREE.BufferGeometry();
 
+
 
+// attributes
 
+const positions = new Float32Array( MAX_POINTS * 3 ); // 3 vertices per point
 
+geometry.setAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
 
+
 
+// draw range
 
+const drawCount = 2; // draw the first 2 points, only
 
+geometry.setDrawRange( 0, drawCount );
 
+
 
+// material
 
+const material = new THREE.LineBasicMaterial( { color: 0xff0000 } );
 
+
 
+// line
 
+const line = new THREE.Line( geometry, material );
 
+scene.add( line );
 
+			</code>
 
+		 	<p>
 
+				Ensuite nous ajouterons aléatoirement des points à l'aide d'un pattern comme:
 
+			</p>
 
+			<code>
 
+const positions = line.geometry.attributes.position.array;
 
+
 
+let x, y, z, index;
 
+x = y = z = index = 0;
 
+
 
+for ( let i = 0, l = MAX_POINTS; i < l; i ++ ) {
 
+
 
+    positions[ index ++ ] = x;
 
+    positions[ index ++ ] = y;
 
+    positions[ index ++ ] = z;
 
+
 
+    x += ( Math.random() - 0.5 ) * 30;
 
+    y += ( Math.random() - 0.5 ) * 30;
 
+    z += ( Math.random() - 0.5 ) * 30;
 
+
 
+}
 
+			</code>
 
+			<p>
 
+				If you want to change the <em>number of points</em> rendered after the first render, do this:
 
+			</p>
 
+			<code>
 
+line.geometry.setDrawRange( 0, newValue );
 
+			</code>
 
+			<p>
 
+				If you want to change the position data values after the first render, you need to
 
+				set the needsUpdate flag like so:
 
+			</p>
 
+			<code>
 
+line.geometry.attributes.position.needsUpdate = true; // required after the first render
 
+			</code>
 
+
 
+			<p>
 
+				If you change the position data values after the initial render, you may need to recompute
 
+				bounding volumes so other features of the engine like view frustum culling or helpers properly work.
 
+			</p>
 
+			<code>
 
+line.geometry.computeBoundingBox();
 
+line.geometry.computeBoundingSphere();
 
+			</code>
 
+
 
+			<p>
 
+				[link:https://jsfiddle.net/t4m85pLr/1/ Here is a fiddle] showing an animated line which you can adapt to your use case.
 
+			</p>
 
+
 
+			<h3>Examples</h3>
 
+
 
+			<p>
 
+				[example:webgl_custom_attributes WebGL / custom / attributes]<br />
 
+				[example:webgl_buffergeometry_custom_attributes_particles WebGL / buffergeometry / custom / attributes / particles]
 
+			</p>
 
+
 
+		</div>
 
+
 
+		<h2>Materiaux</h2>
 
+		<div>
 
+			<p>Toutes les valeurs uniformes peuvent être changées librement(e.g. couleurs, textures, opacité, etc), les valeurs sont envoyées aux shaders à chaque frame.</p>
 
+
 
+			<p>De plus, les paramètresen relation avec GLstate peuvent changer à tout moment (depthTest, blending, polygonOffset, etc).</p>
 
+
 
+			<p>Les propriétés suivantes ne peuvent pas être changées facilement durant l'exécution (une fois que le matériau a été rendu au moins une fois):</p>
 
+			<ul>
 
+				<li>numbers and types of uniforms</li>
 
+				<li>présence ou non de
 
+					<ul>
 
+						<li>texture</li>
 
+						<li>fog</li>
 
+						<li>vertex colors</li>
 
+						<li>morphing</li>
 
+						<li>shadow map</li>
 
+						<li>alpha test</li>
 
+						<li>transparent</li>
 
+					</ul>
 
+				</li>
 
+			</ul>
 
+
 
+			<p>Des changements dans ces propriétés exigent la création d'un nouveau programme de shader. Vous devrez définir</p>
 
+			<code>material.needsUpdate = true</code>
 
+
 
+			<p>Gardez à l'esprit que cela risque d'être assez lent et de causer des saccades dans le framerate (particulièrement sur Windows, étant donné que la compilation de shader est plus lente dans DirectX que dans OpenGL).</p>
 
+
 
+			<p>Pour des expériences pluis fluides vous pouvez émuler des changements dans ces fonctionnalités pour qu'elles contiennent un genre de valeurs "factices"  comme zéro en intensité de lumières, des textures blanches ou zéro brouillard.</p>
 
+
 
+			<p>Vous pouvez librement changer le matériau utilisé pour les différents morceaux de formes, mais pas comment un objet est divisé en morceaux (selon le matériau des faces). </p>
 
+
 
+			<h3>Si vous avez besoin d'avoir différentes configurations de matériaux durant l'exécution:</h3>
 
+			<p>Si le nombre de matériaux / morceaux est petit, vous pouvez pré-diviser l'objet préalablement (e.g. cheveux / visage / corps / vêtements supérieurs / pantalon pour un humain, avant / côtés / toit / fenêtres / pneu / intérieur pour une voiture.). </p>
 
+
 
+			<p>Si le nombre est grand (e.g. chaque face peut potentiellement être différente), songez à utiliser une autre solution, comme l'utilisation d'attributs / textures pour avoir une apparence différente par face.</p>
 
+
 
+			<h3>Exemples</h3>
 
+			<p>
 
+				[example:webgl_materials_car WebGL / materials / car]<br />
 
+				[example:webgl_postprocessing_dof WebGL / webgl_postprocessing / dof]
 
+			</p>
 
+		</div>
 
+
 
+
 
+		<h2>Textures</h2>
 
+		<div>
 
+			<p>Les images, canvas, vidéos et les données des textures doivent avoir le flag suivant si elles sont changées:</p>
 
+			<code>
 
+				texture.needsUpdate = true;
 
+			</code>
 
+			<p>La cible du rendu se met automatiquement à jour.</p>
 
+
 
+			<h3>Exemples</h3>
 
+			<p>
 
+				[example:webgl_materials_video WebGL / materials / video]<br />
 
+				[example:webgl_rtt WebGL / rtt]
 
+			</p>
 
+
 
+		</div>
 
+
 
+
 
+		<h2>Caméras</h2>
 
+		<div>
 
+			<p>La position de la caméra et sa cible sont automatiquement mises à jour. Si vous devez changer</p>
 
+			<ul>
 
+				<li>
 
+					fov
 
+				</li>
 
+				<li>
 
+					aspect
 
+				</li>
 
+				<li>
 
+					near
 
+				</li>
 
+				<li>
 
+					far
 
+				</li>
 
+			</ul>
 
+			<p>
 
+				alors vous aurez besoin de recalculer la matrice de projection:
 
+			</p>
 
+			<code>
 
+camera.aspect = window.innerWidth / window.innerHeight;
 
+camera.updateProjectionMatrix();
 
+			</code>
 
+		</div>
 
+	</body>
 
+</html>

+ 111 - 0
docs/manual/fr/introduction/How-to-use-post-processing.html
Fájl Megtekintése 

@@ -0,0 +1,111 @@
 
+<!DOCTYPE html>
 
+<html lang="fr">
 
+	<head>
 
+		<meta charset="utf-8">
 
+		<base href="../../../" />
 
+		<script src="page.js"></script>
 
+		<link type="text/css" rel="stylesheet" href="page.css" />
 
+	</head>
 
+	<body>
 
+		<h1>Utiliser le post-processing ([name])</h1>
 
+
 
+		<p>
 
+			Plusieurs applications three.js effectuent un rendu de leurs objets 3D directement dans la scène. Parfois, vous souhaitez appliquer un ou plusieurs
 
+			effects graphiques comme la profondeur de champ, le flou lumineux, du grain, ou différents types d'Anti-aliasing. Le post-processing est une approche très utilisée
 
+			pour implémenter de tels effets. Premièrement, la scène est rendue dans une cible de rendu qui représente un buffer dans la mémoire de la carte vidéo.
 
+			A la prochaine étape un ou plusieurs effets de post-processing appliquent des filtres au buffer de l'image qui est finalement rendue à
 
+			l'écran.
 
+		</p>
 
+		<p>
 
+			three.js fournit une solution complète de post-processing via [page:EffectComposer] pour implémenter un tel workflow.
 
+		</p>
 
+
 
+		<h2>Workflow</h2>
 
+
 
+		<p>
 
+			La première étape est d'importer tous les fichiers nécessaires du dossier exemple. Le guide part du principe que vous utilisez le
 
+			[link:https://www.npmjs.com/package/three npm package] officiel de three.js. Pour notre démo basique, nous avons besoin des fichiers suivants.
 
+		</p>
 
+
 
+		<code>
 
+		import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
 
+		import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
 
+		import { GlitchPass } from 'three/examples/jsm/postprocessing/GlitchPass.js';
 
+		</code>
 
+
 
+		<p>
 
+			Après avoir importé tous les fichiers correctement, nous pouvons créer notre composer en lui passant une instance de [page:WebGLRenderer].
 
+		</p>
 
+
 
+		<code>
 
+		const composer = new EffectComposer( renderer );
 
+		</code>
 
+
 
+		<p>
 
+			Lors de l'utilisation d'un composer, il est nécessaire de changer la boucle d'animation de l'application. Au lieu d'appeler la méthode de rendu
 
+			[page:WebGLRenderer], nous devons utiliser appeler [page:EffectComposer].
 
+		</p>
 
+
 
+		<code>
 
+		function animate() {
 
+
 
+			requestAnimationFrame( animate );
 
+
 
+			composer.render();
 
+
 
+		}
 
+		</code>
 
+
 
+		<p>
 
+			Notre composer est maintenant prêt, il est donc possible de configurer la chaîne d'effets de post-processing. Ces effets (passes) sont chargés de la création
 
+			de l'apparence visuelle finale de l'application. Ils sont traités dans l'ordre de leur ajout/insertion. Dans notre example, l'instance de `RenderPass`
 
+			est exécutée en première, puis l'instance de `GlitchPass` est exécutée. Le dernier effet activé de la chaîne est automatiquement rendu dans la scène. Le setup
 
+			des effets ressemble à ça:
 
+		</p>
 
+
 
+		<code>
 
+		const renderPass = new RenderPass( scene, camera );
 
+		composer.addPass( renderPass );
 
+
 
+		const glitchPass = new GlitchPass();
 
+		composer.addPass( glitchPass );
 
+		</code>
 
+
 
+		<p>
 
+			`RenderPass` est normalement placé au début de la chaîne pour fournir la scène rendue en tant qu'entrée pour les prochaines étapes de post-processing. Dans notre cas,
 
+			`GlitchPass` va utiliser les données de l'image pour appliquer un effet de glitch. Regardez cet [link:https://threejs.org/examples/webgl_postprocessing_glitch exemple live]
 
+			pour voir cela en action.
 
+		</p>
 
+
 
+		<h2>Effets Intégrés</h2>
 
+
 
+		<p>
 
+			Vous pouvez utiliser une large palette d'effets de post-processing pré-définis fournis par le moteur. Ils se trouvent dans le dossier
 
+			[link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm/postprocessing postprocessing].
 
+		</p>
 
+
 
+		<h2>Effets Customisés</h2>
 
+
 
+		<p>
 
+			Parfois vous voulez écrire un shader de post-processing customisé et l'inclure dans les effets (passes) de post-processing. Dans ce scénario,
 
+			vous pouvez utiliser `ShaderPass`. Après avoir importé le fichier et votre shader customisé, vous pouvez utiliser le code suivant pour mettre en place l'effet (pass).
 
+		</p>
 
+
 
+		<code>
 
+		import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';
 
+		import { LuminosityShader } from 'three/examples/jsm/shaders/LuminosityShader.js';
 
+
 
+		// later in your init routine
 
+
 
+		const luminosityPass = new ShaderPass( LuminosityShader );
 
+		composer.addPass( luminosityPass );
 
+		</code>
 
+
 
+		<p>
 
+			Ce repository fournit un fichier appelé [link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/shaders/CopyShader.js CopyShader] qui est
 
+			une bonne base de code pour créer votre propose shader customisé. `CopyShader` copie simplement le contenu de l'image du buffer de l'[page:EffectComposer]
 
+			à son buffer d'écriture sans y appliquer aucun effet.
 
+		</p>
 
+
 
+	</body>
 
+</html>

+ 148 - 0
docs/manual/fr/introduction/Installation.html
Fájl Megtekintése 

@@ -0,0 +1,148 @@
 
+<!DOCTYPE html>
 
+<html lang="fr">
 
+	<head>
 
+		<meta charset="utf-8">
 
+		<base href="../../../" />
 
+		<script src="page.js"></script>
 
+		<link type="text/css" rel="stylesheet" href="page.css" />
 
+	</head>
 
+	<body>
 
+		<h1>[name]</h1>
 
+
 
+		<p>
 
+			Vous pouvez installer three.js avec [link:https://www.npmjs.com/ npm] et d'autres outils de build modernes, ou commencer rapidement avec just un hébergement static ou un CDN. Pour la plupart des utilisateurs, installer depuis npm est le meilleur choix.
 
+		</p>
 
+
 
+		<p>
 
+			Peu importe votre choix, soyez cohérents et importez tous vos fichiers avec la même version de la librairie. Mélanger des fichiers de différentes sources peut causer une duplication de certaines parties de code, ou même casser l'application d'une manière imprédictible.
 
+		</p>
 
+
 
+		<p>
 
+			Toutes les méthodes d'installation de three.js dépendent des Modules ES (voir [link:https://eloquentjavascript.net/10_modules.html#h_hF2FmOVxw7 Eloquent JavaScript: ECMAScript Modules]), ce qui vous permet d'inclure uniquement les parties requises de la librairie dans le projet final.
 
+		</p>
 
+
 
+		<h2>Installer depuis npm</h2>
 
+
 
+		<p>
 
+			Pour installer le module npm [link:https://www.npmjs.com/package/three three], ouvrez une fenêtre de terminal dans le dossier de votre projet et lancez la commande suivante:
 
+		</p>
 
+
 
+		<code>
 
+		npm install three
 
+		</code>
 
+
 
+		<p>
 
+			Le package sera téléchargé et installé. Puis vous pouvez l'importer dans votre projet:
 
+		</p>
 
+
 
+		<code>
 
+		// Option 1: Import the entire three.js core library.
 
+		import * as THREE from 'three';
 
+
 
+		const scene = new THREE.Scene();
 
+
 
+
 
+		// Option 2: Import just the parts you need.
 
+		import { Scene } from 'three';
 
+
 
+		const scene = new Scene();
 
+		</code>
 
+
 
+		<p>
 
+			En l'installant depuis npm, vous utiliserez quasiment toujours une sorte de [link:https://eloquentjavascript.net/10_modules.html#h_zWTXAU93DC bundling tool] pour combiner tous les packages dont votre projet a besoin en un seul fichier JavaScript. N'importe quel bundler JavaScript modern peut être utilisé avec three.js, le choix le plus populaire est [link:https://webpack.js.org/ webpack].
 
+		</p>
 
+
 
+		<p>
 
+			Toutes les fonctionnalités ne sont pas directement accédées depuis le module <em>three</em> (également appelé "bare import"). D'autres parties populaires de la librairie — comme les contrôles, les loaders, et les effets de post-processing — doivent être importés depuis le sous-dossier [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm examples/jsm]. Pour en apprendre plus, consulter <em>Examples</em> ci-dessous.
 
+		</p>
 
+
 
+		<p>
 
+			Apprenez-en plus à propos des modules npm depuis [link:https://eloquentjavascript.net/20_node.html#h_J6hW/SmL/a Eloquent JavaScript: Installation avec npm].
 
+		</p>
 
+
 
+		<h2>Installer depuis un CDN ou un hébergement statique</h2>
 
+
 
+		<p>
 
+			La librairie three.js peut être utilisée sans aucun build system, soit en uploadant les fichiers sur votre propre server web ou en utilisant un CDN existant. Parce que la librairie repose sur les modules ES, n'importe quel script qui y fait référence doit utiliser le <em>type="module"</em> comme montré ci-dessous.
 
+			Il est également requis de définir une Import Map qui effectue la résolution du bare module specifier `three`.
 
+		</p>
 
+
 
+		<code>
 
+		&lt;script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js">&lt;/script>
 
+
 
+		&lt;script type="importmap">
 
+		  {
 
+		    "imports": {
 
+		      "three": "https://unpkg.com/three@&lt;version&gt;/build/three.module.js"
 
+		    }
 
+		  }
 
+		&lt;/script>
 
+
 
+		&lt;script type="module">
 
+
 
+		  import * as THREE from 'three';
 
+
 
+		  const scene = new THREE.Scene();
 
+
 
+		&lt;/script>
 
+		</code>
 
+
 
+		<p>
 
+			Étant donné que les Import maps ne sont pas encore supportées par tous les navigateurs, il est nécessaire d'ajouter le polyfill *es-module-shims.js*.
 
+		</p>
 
+
 
+		<h2>Exemples</h2>
 
+
 
+		<p>
 
+			Le noyau de three.js est concentré sur les composants les plus importans d'un moteur 3D. Plusieurs autres composants utiles - comme les contrôles, les loaders, et les effets de post-processing - font partie du dossier [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm examples/jsm]. Ils sont désignés comme "exemples", parce que, en plus de pouvoir les utiliser directement tel qu'ils sont, ils sont aussi supposés être remixés et customisés. Ces composants sont toujours synchronisés avec le noyau de la librarie, là où des packages tiers similaires sur npm sont maintenus par différentes personnes et peuvent ne pas être à jour.
 
+		</p>
 
+
 
+		<p>
 
+			Les examples n'ont pas besoin d'être <em>installés</em> séparément, mais doivent être <em>importés</em> séparément. Si three.js a été installé avec npm, vous pouvez charger le composant [page:OrbitControls] avec:
 
+		</p>
 
+
 
+
 
+		<code>
 
+		import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 
+
 
+		const controls = new OrbitControls( camera, renderer.domElement );
 
+		</code>
 
+
 
+		<p>
 
+			Si three.js a été installé depuis un CDN, utilisez le même CDN pour installer d'autres composants:
 
+		</p>
 
+
 
+		<code>
 
+		&lt;script type="module">
 
+
 
+		  import { OrbitControls } from 'https://unpkg.com/three@&lt;version&gt;/examples/jsm/controls/OrbitControls.js';
 
+
 
+		  const controls = new OrbitControls( camera, renderer.domElement );
 
+
 
+		&lt;/script>
 
+		</code>
 
+
 
+		<p>
 
+			Il est important que tous les fichiers utilisent la même version. N'importez pas différents exemples de différentes versions, ou n'utilisez pas d'examples d'une version de three.js différente de celle de la librarie elle-même.
 
+		</p>
 
+
 
+		<h2>Compatibilité</h2>
 
+
 
+		<h3>Imports CommonJS</h3>
 
+
 
+		<p>
 
+			Alors que la plupart des bundlers JavaScript modernes supportent les modules ES par défaut, cela peut ne pas être le cas de certains build tools plus anciens. Dans ce cas, vous pouvez probablement configurer le bundler pour qu'il comprenne les modules ES: [link:http://browserify.org/ Browserify] a just besoin du plugin [link:https://github.com/babel/babelify babelify], par exemple.
 
+		</p>
 
+
 
+		<h3>Node.js</h3>
 
+
 
+		<p>
 
+			Parce que three.js est construit pour le web, il dépend de navigateurs et d'APIs DOM qui n'existent pas toujours dans Node.js. Certains de ces problèmes peuvent être résolus en utilisant des morceaux de code comme [link:https://github.com/stackgl/headless-gl headless-gl],  ou en remplaçant des composents comme [page:TextureLoader] avec des alternatives customisées. D'autres APIs DOM peuvent être profondément entrelacées avec le code qui les utilises, et il sera compliqué de le modifier. Nous soutenons les pull requests simples et maintenables pour améliorer le support de Node.js, mais recommendons d'ouvrir une issue pour parler de vos améliorations avant.
 
+		</p>
 
+
 
+		<p>
 
+			Faites attention à bien ajouter `{ "type": "module" }` à votre `package.json` pour autoriser les modules ES6 dans votre projet Node.
 
+		</p>
 
+
 
+	</body>
 
+</html>

+ 107 - 0
docs/manual/fr/introduction/Libraries-and-Plugins.html
Fájl Megtekintése 

@@ -0,0 +1,107 @@
 
+<!DOCTYPE html>
 
+<html lang="fr">
 
+	<head>
 
+		<meta charset="utf-8" />
 
+		<base href="../../../" />
 
+		<script src="page.js"></script>
 
+		<link type="text/css" rel="stylesheet" href="page.css" />
 
+	</head>
 
+	<body>
 
+		<h1>Librairies et Plugins ([name])</h1>
 
+
 
+		<p class="desc">
 
+			Ici sont listés des plugins et librairies développés en externe et compatibles avec three.js. Cette
 
+			liste et les packages associés sont maintenus par la communauté et ne sont pas forcément
 
+			à jour. Si vous souhaitez mettre à jour cette liste, faites une PR!
 
+		</p>
 
+
 
+		<h3>Physique</h3>
 
+
 
+		<ul>
 
+			<li>[link:https://github.com/lo-th/Oimo.js/ Oimo.js]</li>
 
+			<li>[link:https://enable3d.io/ enable3d]</li>
 
+			<li>[link:https://github.com/kripken/ammo.js/ ammo.js]</li>
 
+			<li>[link:https://github.com/pmndrs/cannon-es cannon-es]</li>
 
+		</ul>
 
+
 
+		<h3>Postprocessing</h3>
 
+
 
+		<p>
 
+			En plus de [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm/postprocessing official three.js postprocessing effects],
 
+			du support pour des effets et frameworks additionels sont disponibles à travers des librairies externes.
 
+		</p>
 
+
 
+		<ul>
 
+			<li>[link:https://github.com/vanruesc/postprocessing postprocessing]</li>
 
+		</ul>
 
+
 
+		<h3>Intersections et Performance de Raycast</h3>
 
+
 
+		<ul>
 
+			<li>[link:https://github.com/gkjohnson/three-mesh-bvh three-mesh-bvh]</li>
 
+		</ul>
 
+
 
+		<h3>Path Tracing</h3>
 
+		
+		<ul>
 
+			<li>[link:https://github.com/gkjohnson/three-gpu-pathtracer three-gpu-pathtracer]</li>
 
+		</ul>
 
+		
+		<h3>Formats de fichiers</h3>
 
+
 
+		<p>
 
+			En plus de [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm/loaders official three.js loaders],
 
+			du support pour des formats additionels sont disponibles à travers des librairies externes.
 
+		</p>
 
+
 
+		<ul>
 
+			<li>[link:https://github.com/gkjohnson/urdf-loaders/tree/master/javascript urdf-loader]</li>
 
+			<li>[link:https://github.com/NASA-AMMOS/3DTilesRendererJS 3d-tiles-renderer-js]</li>
 
+			<li>[link:https://github.com/kaisalmen/WWOBJLoader WebWorker OBJLoader]</li>
 
+			<li>[link:https://github.com/IFCjs/web-ifc-three IFC.js]</li>
 
+		</ul>
 
+
 
+		<h3>Géometrie</h3>
 
+
 
+		<ul>
 
+			<li>[link:https://github.com/spite/THREE.MeshLine THREE.MeshLine]</li>
 
+		</ul>
 
+
 
+		<h3>Texte 3D et Layout</h3>
 
+
 
+		<ul>
 
+			<li>[link:https://github.com/protectwise/troika/tree/master/packages/troika-three-text troika-three-text]</li>
 
+			<li>[link:https://github.com/felixmariotto/three-mesh-ui three-mesh-ui]</li>
 
+		</ul>
 
+
 
+		<h3>Systèmes de particules</h3>
 
+
 
+		<ul>
 
+			<li>[link:https://github.com/creativelifeform/three-nebula three-nebula]</li>
 
+		</ul>
 
+
 
+		<h3>Cinématique inverse</h3>
 
+
 
+		<ul>
 
+			<li>[link:https://github.com/jsantell/THREE.IK THREE.IK]</li>
 
+			<li>[link:https://github.com/lo-th/fullik fullik]</li>
 
+			<li>[link:https://github.com/gkjohnson/closed-chain-ik-js closed-chain-ik]</li>
 
+		</ul>
 
+
 
+		<h3>Jeu IA</h3>
 
+
 
+		<ul>
 
+			<li>[link:https://mugen87.github.io/yuka/ yuka]</li>
 
+			<li>[link:https://github.com/donmccurdy/three-pathfinding three-pathfinding]</li>
 
+		</ul>
 
+
 
+		<h3>Wrappers et Frameworks</h3>
 
+
 
+		<ul>
 
+			<li>[link:https://aframe.io/ A-Frame]</li>
 
+			<li>[link:https://github.com/pmndrs/react-three-fiber react-three-fiber]</li>
 
+			<li>[link:https://github.com/ecsyjs/ecsy-three ECSY]</li>
 
+		</ul>
 
+
 
+	</body>
 
+</html>

+ 167 - 0
docs/manual/fr/introduction/Loading-3D-models.html
Fájl Megtekintése 

@@ -0,0 +1,167 @@
 
+<!DOCTYPE html>
 
+<html lang="fr">
 
+
 
+<head>
 
+	<meta charset="utf-8">
 
+	<base href="../../../" />
 
+	<script src="page.js"></script>
 
+	<link type="text/css" rel="stylesheet" href="page.css" />
 
+</head>
 
+
 
+<body>
 
+	<h1>Importer des modèles 3D ([name])</h1>
 
+
 
+	<p>
 
+		Les modèles 3D sont disponibles dans des centaines de formats, chacun ayant des objectifs
 
+		différents, des fonctionnalités assorties, et une complexité variable. Même si
 
+		<a href="https://github.com/mrdoob/three.js/tree/dev/examples/jsm/loaders" target="_blank" rel="noopener">
 
+		three.js fournit plusieurs loaders</a>, choisir le bon format et
 
+		workflow vous fera gagner du temps et vous épargnera beaucoup de frustration par la suite. Certains formats sont
 
+		difficiles à appréhender, inefficaces pour les exépriences en temps-réel, ou simplement
 
+		pas entièrement supportés pour le moment.
 
+	</p>
 
+
 
+	<p>
 
+		Ce guide vous fournit un workflow recommandé pour la plupart des utilisateurs, et des suggestions
 
+		concernant quoi essayer si les choses ne se déroulent pas comme prévu.
 
+	</p>
 
+
 
+	<h2>Avant de commencer</h2>
 
+
 
+	<p>
 
+		Si vous n'êtes pas familier avec le fait de lancer un serveur local, commencez par
 
+		[link:#manual/introduction/How-to-run-things-locally how to run things locally].
 
+		Plusieurs erreurs communes concernant les modèles 3D peuvent-être évitées en hébergeant les fichiers
 
+		correctement.
 
+	</p>
 
+
 
+	<h2>Workflow recommandé</h2>
 
+
 
+	<p>
 
+		Dans la mesure du possible, nous recommandons l'utilisation de glTF (GL Transmission Format). Les versions
 
+		<small>.GLB</small> et <small>.GLTF</small> du format sont
 
+		bien supportées. Étant-donné que glTF se concentre sur la réduction du temps d'exécution du chargement des modèles, il est
 
+		compact et rapide à transmettre. Les fonctionnalités inclusent sont les meshes, les matériaux,
 
+		les textures, les skins, les squelettes, les morph targets, les animations, les lumières, et les
 
+		caméras.
 
+	</p>
 
+
 
+	<p>
 
+		Les fichiers glTF appartenant au domaine public sont disponibles sur des sites comme
 
+		<a href="https://sketchfab.com/models?features=downloadable&sort_by=-likeCount&type=models" target="_blank" rel="noopener">
 
+		Sketchfab</a>, différents outils incluent l'export de glTF:
 
+	</p>
 
+
 
+	<ul>
 
+		<li><a href="https://www.blender.org/" target="_blank" rel="noopener">Blender</a> par the Blender Foundation</li>
 
+		<li><a href="https://www.allegorithmic.com/products/substance-painter" target="_blank" rel="noopener">Substance Painter</a> par Allegorithmic</li>
 
+		<li><a href="https://www.foundry.com/products/modo" target="_blank" rel="noopener">Modo</a> par Foundry</li>
 
+		<li><a href="https://www.marmoset.co/toolbag/" target="_blank" rel="noopener">Toolbag</a> par Marmoset</li>
 
+		<li><a href="https://www.sidefx.com/products/houdini/" target="_blank" rel="noopener">Houdini</a> par SideFX</li>
 
+		<li><a href="https://labs.maxon.net/?p=3360" target="_blank" rel="noopener">Cinema 4D</a> par MAXON</li>
 
+		<li><a href="https://github.com/KhronosGroup/COLLADA2GLTF" target="_blank" rel="noopener">COLLADA2GLTF</a> par the Khronos Group</li>
 
+		<li><a href="https://github.com/facebookincubator/FBX2glTF" target="_blank" rel="noopener">FBX2GLTF</a> par Facebook</li>
 
+		<li><a href="https://github.com/AnalyticalGraphicsInc/obj2gltf" target="_blank" rel="noopener">OBJ2GLTF</a> par Analytical Graphics Inc</li>
 
+		<li>&hellip;et <a href="http://github.khronos.org/glTF-Project-Explorer/" target="_blank" rel="noopener">beaucoup d'autres</a></li>
 
+	</ul>
 
+
 
+	<p>
 
+		Si votre outil de prédilection n'inclut pas le support des glTF, pensez à demander
 
+		aux auteurs d'inclure l'export des glTF, ou postez sur
 
+		<a href="https://github.com/KhronosGroup/glTF/issues/1051" target="_blank" rel="noopener">the glTF roadmap thread</a>.
 
+	</p>
 
+
 
+	<p>
 
+		Quand glTF n'est pas utilisable, des formats populaires comme FBX, OBJ, ou COLLADA
 
+		sont également disponibles et régulièrement maintenus.
 
+	</p>
 
+
 
+	<h2>Charger les modèles</h2>
 
+
 
+	<p>
 
+		Seulement quelques loaders (e.g. [page:ObjectLoader]) sont inclus par défaut dans
 
+		three.js — les autres doivent être ajoutés individuellement à votre application.
 
+	</p>
 
+
 
+	<code>
 
+		import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
 
+	</code>
 
+
 
+	<p>
 
+		Une fois que vous avez importé un loader, vous pouvez ajouter un modèle à votre scène. La syntaxe varie selon
 
+		les loaders — quand vous utilisez un autre format, jetez un oeil à la documentation de ce
 
+		loader. Pour glTF, l'utilisation avec des scripts globaux doit-être:
 
+	</p>
 
+
 
+	<code>
 
+		const loader = new GLTFLoader();
 
+
 
+		loader.load( 'path/to/model.glb', function ( gltf ) {
 
+
 
+			scene.add( gltf.scene );
 
+
 
+		}, undefined, function ( error ) {
 
+
 
+			console.error( error );
 
+
 
+		} );
 
+	</code>
 
+
 
+	<p>
 
+		Voir [page:GLTFLoader GLTFLoader documentation] pour plus de détails.
 
+	</p>
 
+
 
+	<h2>Dépannage</h2>
 
+
 
+	<p>
 
+		Vous avez passé des heures à modeler votre chef-d'oeuvre artisanal, vous le chargez sur 
+		la page web, et — oh non! 😭 Il est tordu, mal coloré, ou tout simplement porté-disparu.
 
+		Commencez par ces étapes de dépannage:
 
+	</p>
 
+
 
+	<ol>
 
+		<li>
 
+			Vérifiez la console JavaScript à la recherche d'erreurs, et assurez-vous d'utiliser un callback
 
+			`onError` à l'appel de `.load()` pour afficher le résultat.
 
+		</li>
 
+		<li>
 
+			Visualisez le modèle dans une autre application. Pour glTF, des visualiseurs de type cliquez-glissez
 
+			sont disponibles pour
 
+			<a href="https://gltf-viewer.donmccurdy.com/" target="_blank" rel="noopener">three.js</a> et
 
+			<a href="https://sandbox.babylonjs.com/" target="_blank" rel="noopener">babylon.js</a>. Si le modèle
 
+			apparaît correctement dans une ou plusieurs autres applications,
 
+			<a href="https://github.com/mrdoob/three.js/issues/new" target="_blank" rel="noopener">signalez une erreur auprès de three.js</a>.
 
+			Si le modèle ne peut être visualisé dans n'importe quelle application, nous encourageons fortement
 
+			le signalement d'un bug auprès de l'application avec laquelle vous avez réalisé le modèle 3D.
 
+		</li>
 
+		<li>
 
+			Essayez de divisier ou de multiplier la taille du modèle par un facteur de 1000. Plusieurs modèles sont mis à 
+			l'échelles différemment, et les gros modèles peuvent ne pas apparaître si la caméra est 
+			à l'intérieur du modèle.
 
+		</li>
 
+		<li>
 
+			Essayez d'ajouter et de positionner une source de lumière. Le modèle peut-être caché dans le noir.
 
+		</li>
 
+		<li>
 
+			Cherchez des requêtes concernant des textures erronnées dans votre onglet réseau, comme
 
+			`"C:\\Path\To\Model\texture.jpg"`. Utilisez des chemins relatifs menant à votre
 
+			modèle à la place, comme `images/texture.jpg` — cela peut nécessiter 
+			la modification du fichier du modèle dans un éditeur de texte.
 
+		</li>
 
+	</ol>
 
+
 
+	<h2>Demander de l'aide</h2>
 
+
 
+	<p>
 
+		Si vous avez effectué le processus de dépannage ci-dessus et que votre modèle 
+		ne fonctionne toujours pas, utiliser la bonne approche pour demander de l'aide vous mènera 
+		plus rapidement à la solution. Postez une question sur le
 
+		<a href="https://discourse.threejs.org/" target="_blank" rel="noopener">forum three.js</a> et, incluez dès que possible,
 
+		votre modèle (ou un modèle plus simple avec le même problème) dans n'importe quel format 
+		qui vous est disponible. Incluez sufisamment d'informations pour que quelqu'un puisse reproduire 
+		ce problème rapidement — idéalement, une démo live.
 
+	</p>
 
+
 
+</body>
 
+
 
+</html>

+ 67 - 0
docs/manual/fr/introduction/Matrix-transformations.html
Fájl Megtekintése 

@@ -0,0 +1,67 @@
 
+<!DOCTYPE html>
 
+<html lang="fr">
 
+	<head>
 
+		<meta charset="utf-8">
 
+		<base href="../../../" />
 
+		<script src="page.js"></script>
 
+		<link type="text/css" rel="stylesheet" href="page.css" />
 
+	</head>
 
+	<body>
 
+		<h1>Matrices de transformation ([name])</h1>
 
+
 
+		<p>
 
+		Three.js utilise des `matrices` pour encoder des transformations 3D---translations (position), rotations, et mise à l'échelle. Chaque instance d'un [page:Object3D] a une [page:Object3D.matrix matrix] qui stocke la position de l'objet, sa rotation, ainsi que son échelle. Cette page décrit comment mettre à jour les transformations d'un objet.
 
+		</p>
 
+
 
+		<h2>Propriétés de commodité et `matrixAutoUpdate`</h2>
 
+
 
+		<p>
 
+			Il y a deux façons de mettre à jour les transformations d'un objet:
 
+		</p>
 
+		<ol>
 
+			<li>
 
+				Modifier les propriétés `position`, `quaternion`, et `scale` de l'objet, et laissez three.js recalculer
 
+				la matrice de l'objet à l'aide de ces propriétés:
 
+				<code>
 
+object.position.copy( start_position );
 
+object.quaternion.copy( quaternion );
 
+				</code>
 
+				Par défaut, la propriété `matrixAutoUpdate` est à true, et la matrice sera automatiquement recalculée.
 
+				Si l'objet est statique, ou si vous souhaitez contrôler manuellement quand le recalcul de la matrice intervient, de meilleur performances peuvent-être obtenues en définissant la propriété comme false:
 
+				<code>
 
+object.matrixAutoUpdate = false;
 
+				</code>
 
+				Et après avoir changé n'importe quelle propriété, mettez manuellement la matrice à jour:
 
+				<code>
 
+object.updateMatrix();
 
+				</code>
 
+			</li>
 
+			<li>
 
+				Modifier la matrice de l'objet directement. La classe [page:Matrix4] dipose de différentes méthodes pour modifier les matrices:
 
+				<code>
 
+object.matrix.setRotationFromQuaternion( quaternion );
 
+object.matrix.setPosition( start_position );
 
+object.matrixAutoUpdate = false;
 
+				</code>
 
+				Notez que `matrixAutoUpdate` <em>doit</em> être définie comme `false` dans ce cas, et vous devez vérifier que vous n'appelez <em>pas</em> `updateMatrix`. Appeler `updateMatrix` écrasera les modifications manuelles apportées à la matrice, en recalculant la matrice grâce à sa `position`, `scale`, ainsi de suite.
 
+			</li>
 
+		</ol>
 
+
 
+		<h2>Matrices d'objets et du monde</h2>
 
+		<p>
 
+		La [page:Object3D.matrix matrix] d'un objet stocke les transformations <em>relatives</em> au [page:Object3D.parent parent] de l'objet; pour obtenir les transformations de l'objets en coordonnées du <em>monde</em>, vous devez accéder à la [page:Object3D.matrixWorld] de l'objet.
 
+		</p>
 
+		<p>
 
+		Quand les transformations de l'objet parent ou enfant changent, vous pouvez demander que la [page:Object3D.matrixWorld matrixWorld] de l'objet enfant soit mise à jour en appelant [page:Object3D.updateMatrixWorld updateMatrixWorld]().
 
+		</p>
 
+
 
+		<h2>Rotation et Quaternions</h2>
 
+		<p>
 
+		Three.js propose deux manières de représenter les rotations 3D: [page:Euler Euler angles] et [page:Quaternion Quaternions], ainsi que des méthodes pour effectuer des conversions entre les deux. Les angles d'Euler sont sujets à un problème nommé "gimbal lock", où certaines configurations peuvent perdre un certain degré de liberté (empêchant l'objet d'effectuer une rotation sur un axe). Pour cette raison, les rotations d'objets sont <em>toujours</em> stockées dans la propriété [page:Object3D.quaternion quaternion] de l'objet.
 
+		</p>
 
+		<p>
 
+		Des versions précédentes de la librairie incluaient une propriété `useQuaternion` qui, si réglée sur false, faisait que la [page:Object3D.matrix matrix] matrice de l'objet était calculée depuis un angle d'Euler. Cette pratique est dépassée---à la place, vous devez utiliser la méthode [page:Object3D.setRotationFromEuler setRotationFromEuler], qui mettra le quaternion à jour.
 
+		</p>
 
+
 
+	</body>
 
+</html>

+ 177 - 0
docs/manual/fr/introduction/Useful-links.html
Fájl Megtekintése 

@@ -0,0 +1,177 @@
 
+<!DOCTYPE html>
 
+<html lang="fr">
 
+	<head>
 
+		<meta charset="utf-8">
 
+		<base href="../../../" />
 
+		<script src="page.js"></script>
 
+		<link type="text/css" rel="stylesheet" href="page.css" />
 
+	</head>
 
+	<body>
 
+		<h1>Liens Utiles ([name])</h1>
 
+
 
+		<p class="desc">
 
+			Sur cette page vous trouverez un ensemble de liens qui pourraient vous êtres utiles dans votre apprentissage de three.js.<br />
 
+			Si vous souhaitez ajouter quelque chose ici, ou si vous pensez que quelque chose n'est plus 
+			pertinant ou fonctionnel, n'hésitez pas à cliquer sur le bouton 'edit' en bas à droite de la page pour faire quelques modifications!<br /><br />
 
+
 
+			Notez également que three.js connaît un développement rapide, beaucoup de ces liens contiennent des informations qui sont 
+			dépassées - si quelque chose ne fonctionne pas comme vous l'attendiez, ou comme un de ces liens l'annonce,
 
+			jetez un oeil à la console du navigateur à la recherche d'erreurs ou de warnings. Regardez également la documentation appropriée.
 
+		</p>
 
+
 
+		<h2>Forums d'aide</h2>
 
+		<p>
 
+			Three.js utilise officiellement le [link:https://discourse.threejs.org/ forum] et [link:http://stackoverflow.com/tags/three.js/info Stack Overflow] pour les demandes d'aide.
 
+			Si vous avez besoin d'assistance avec quelque chose, c'est là où vous devez vous rendre. N'ouvrez PAS d'issue sur Github pour les demandes d'aide.
 
+		</p>
 
+
 
+		<h2>Cours et tutoriels</h2>
 
+
 
+		<h3>Commencer three.js</h3>
 
+		<ul>
 
+			<li>
 
+				[link:https://threejs.org/manual/#en/fundamentals Three.js Fundamentals starting lesson]
 
+			</li>
 
+			<li>
 
+				[link:https://codepen.io/rachsmith/post/beginning-with-3d-webgl-pt-1-the-scene Beginning with 3D WebGL] par [link:https://codepen.io/rachsmith/ Rachel Smith].
 
+			</li>
 
+			<li>
 
+				[link:https://www.august.com.au/blog/animating-scenes-with-webgl-three-js/ Animating scenes with WebGL and three.js]
 
+			</li>
 
+		</ul>
 
+
 
+		<h3>More extensive / advanced articles and courses</h3>
 
+		<ul>
 
+			<li>
 
+				[link:https://threejs-journey.com/ Three Journey] par [link:https://bruno-simon.com/ Bruno Simon] - Ce cours apprends aux débutants à utiliser Three.js étape par étape
 
+			</li>
 
+			<li>
 
+				[link:https://discoverthreejs.com/ Discover three.js]
 
+			</li>
 
+			<li>
 
+				[link:http://blog.cjgammon.com/ Collection of tutorials] par [link:http://www.cjgammon.com/ CJ Gammon].
 
+			</li>
 
+			<li>
 
+				[link:https://medium.com/soffritti.pierfrancesco/glossy-spheres-in-three-js-bfd2785d4857 Glossy spheres in three.js].
 
+			</li>
 
+		 <li>
 
+			 [link:https://www.udacity.com/course/cs291 Interactive 3D Graphics] - un cours gratuit sur Udacity qui enseigne les fondamentaux de l'infographie 3D,
 
+			 et qui utilise three.js comme outil de code.
 
+		 </li>
 
+		 <li>
 
+			[Link:https://aerotwist.com/tutorials/ Aerotwist] tutoriels par [link:https://github.com/paullewis/ Paul Lewis].
 
+		 </li>
 
+		 <li>
 
+			 [link:https://discourse.threejs.org/t/three-js-bookshelf/2468 Three.js Bookshelf] - Vous cherchez plus de ressources concernant three.js ou sur l'infographie en général?
 
+			 Jetez un oeil à la sélection de littérature recommandée par la communauté.
 
+		 </li>
 
+		</ul>
 
+
 
+		<h2>News et Mises à jour</h2>
 
+		<ul>
 
+			<li>
 
+				[link:https://twitter.com/hashtag/threejs Three.js on Twitter]
 
+			</li>
 
+			<li>
 
+				[link:http://www.reddit.com/r/threejs/ Three.js on reddit]
 
+			</li>
 
+			<li>
 
+				[link:http://www.reddit.com/r/webgl/ WebGL on reddit]
 
+			</li>
 
+		</ul>
 
+
 
+		<h2>Examples</h2>
 
+		<ul>
 
+			<li>
 
+				[link:https://github.com/edwinwebb/three-seed/ three-seed] - un projet prêt à l'emploi three.js avec ES6 et Webpack
 
+			</li>
 
+			<li>
 
+				[link:http://stemkoski.github.io/Three.js/index.html Professor Stemkoskis Examples] - une collection d'exemples adaptés aux débutant
 
+				construits  three.js r60.
 
+			</li>
 
+			<li>
 
+				[link:https://threejs.org/examples/ Official three.js examples] - ces exemples sont
 
+				conservés dans le dossier three.js, et utilisent toujours la dernière version de three.js.
 
+			</li>
 
+			<li>
 
+				[link:https://raw.githack.com/mrdoob/three.js/dev/examples/ Official three.js dev branch examples]  -
 
+				Pareil qu'au dessus, sauf que ceux-ci utilisent la branche dev de three.js,	et sont utilisés pour s'assurer
 
+				que tout fonctionne durant le développement de three.js.
 
+			</li>
 
+		</ul>
 
+
 
+	<h2>Outils</h2>
 
+	<ul>
 
+		<li>
 
+			[link:https://github.com/tbensky/physgl physgl.org] - un front-end JavaScript avec des wrappers pour three.js, pour montrer des graphiques WebGL
 
+			aux étudiants qui apprennent les mathématiques et la physique.
 
+		</li>
 
+		<li>
 
+			[link:https://whsjs.readme.io/ Whitestorm.js] – Framework three.js modulaire avec le plugin de physique AmmoNext.
 
+		</li>
 
+		<li>
 
+			[link:http://zz85.github.io/zz85-bookmarklets/threelabs.html Three.js Inspector]
 
+		</li>
 
+		<li>
 
+			[link:http://idflood.github.io/ThreeNodes.js/ ThreeNodes.js].
 
+		</li>
 
+		<li>
 
+			[link:https://marketplace.visualstudio.com/items?itemName=slevesque.shader vscode shader] - Coloration syntaxique pour le langage des shaders.
 
+			<br />
 
+			[link:https://marketplace.visualstudio.com/items?itemName=bierner.comment-tagged-templates vscode comment-tagged-templates] - Coloration syntaxique pour les littéraux de gabarits, comme: glsl.js.
 
+		</li>
 
+		<li>
 
+			[link:https://github.com/MozillaReality/WebXR-emulator-extension WebXR-emulator-extension]
 
+		</li>
 
+	</ul>
 
+
 
+	<h2>Références WebGL</h2>
 
+		<ul>
 
+			<li>
 
+			[link:https://www.khronos.org/files/webgl/webgl-reference-card-1_0.pdf webgl-reference-card.pdf] - Référentiel de tous les mots-clés de WebGL et GLSL, la terminologie, syntaxe et les définitions.
 
+			</li>
 
+		</ul>
 
+
 
+	<h2>Anciens Liens</h2>
 
+	<p>
 
+		Ces liens sont conservés pour des raisons d'historisation - vous pouvez les trouver encore utile, mais gardez à l'esprit qu'ils 
+		peuvent contenir des informations qui font référence à de très anciennes versions de three.js.
 
+	</p>
 
+
 
+	<ul>
 
+		<li>
 
+			<a href="https://www.youtube.com/watch?v=Dir4KO9RdhM" target="_blank">AlterQualia at WebGL Camp 3</a>
 
+		</li>
 
+		<li>
 
+			[link:http://yomotsu.github.io/threejs-examples/ Yomotsus Examples] - une liste d'exemple utilisant three.js r45.
 
+		</li>
 
+		<li>
 
+			[link:http://fhtr.org/BasicsOfThreeJS/#1 Introduction to Three.js] par [link:http://github.com/kig/ Ilmari Heikkinen] (slideshow).
 
+		</li>
 
+		<li>
 
+			[link:http://www.slideshare.net/yomotsu/webgl-and-threejs WebGL and Three.js] par [link:http://github.com/yomotsu Akihiro Oyamada] (slideshow).
 
+		</li>
 
+		<li>
 
+			<a href="https://www.youtube.com/watch?v=VdQnOaolrPA" target="_blank">Trigger Rally</a>  par [link:https://github.com/jareiko jareiko] (video).
 
+		</li>
 
+		<li>
 
+			[link:http://blackjk3.github.io/threefab/ ThreeFab] - éditeur de scène, maintenu jusqu'à three.js r50 environ.
 
+		</li>
 
+		<li>
 
+			[link:http://bkcore.com/blog/3d/webgl-three-js-workflow-tips.html Max to Three.js workflow tips and tricks] par [link:https://github.com/BKcore BKcore]
 
+		</li>
 
+		<li>
 
+			[link:http://12devsofxmas.co.uk/2012/01/webgl-and-three-js/ A whirlwind look at Three.js]
 
+			par [link:http://github.com/nrocy Paul King]
 
+		</li>
 
+		<li>
 
+			[link:http://bkcore.com/blog/3d/webgl-three-js-animated-selective-glow.html Animated selective glow in Three.js]
 
+			par [link:https://github.com/BKcore BKcore]
 
+		</li>
 
+		<li>
 
+			[link:http://www.natural-science.or.jp/article/20120220155529.php Building A Physics Simulation Environment] - tutoriel three.js en Japonais
 
+		</li>
 
+	 </ul>
 
+
 
+	</body>
 
+</html>

+ 35 - 0
docs/manual/fr/introduction/WebGL-compatibility-check.html
Fájl Megtekintése 

@@ -0,0 +1,35 @@
 
+<!DOCTYPE html>
 
+<html lang="fr">
 
+	<head>
 
+		<meta charset="utf-8">
 
+		<base href="../../../" />
 
+		<script src="page.js"></script>
 
+		<link type="text/css" rel="stylesheet" href="page.css" />
 
+	</head>
 
+	<body>
 
+		<h1>Compatibilité WebGL ([name])</h1>
 
+		<p>
 
+			Même si le problème se présente de moins en moins, certains appareils ou navigateurs peuvent ne toujours pas supporter WebGL.
 
+			La méthode suivante vous permet de vérifier si il est supporté et d'afficher un message à l'utilisateur si il ne l'est pas.
 
+		</p>
 
+
 
+		<p>
 
+			Ajoutez	[link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/capabilities/WebGL.js]
 
+			à votre JavaScript et exécutez ce qui suit avant de tenter d'effectuer un rendu de quoi que ce soit.
 
+		</p>
 
+
 
+		<code>
 
+		if ( WebGL.isWebGLAvailable() ) {
 
+
 
+			// Initiate function or other initializations here
 
+			animate();
 
+
 
+		} else {
 
+
 
+			const warning = WebGL.getWebGLErrorMessage();
 
+			document.getElementById( 'container' ).appendChild( warning );
 
+
 
+		}
 
+		</code>
 
+	</body>
 
+</html>