+ + 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]. +
+ +
+ Si vous êtes à l'aise avec node et npm,
+
+ $ npm install three --save-dev
+
+ et ajoutez
+
+ const THREE = require('three');
+
+ à votre test.
+
+ 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). +
+ +
+$ 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/
+
+
+ $ mkdir test-example; cd test-example
+
+
+ $ npm init
+
+ et acceptez tous les paramètres par défaut en appuyant sur Entrée à chaque prompt.
+ Cela créera package.json.
+
+$ npm test
+
+ Cela va échouer, comme prévu.
+ Si vous jetez un coup d'oeil à votre package.json, la définition du test de script sera
+
+ "test": "echo \"Error: no test specified\" && exit 1"
+
+
+$ npm install mocha --save-dev
+
+ 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.
+
+ "test": "mocha --reporter list"
+
+
+ $ npm test
+
+
+ Cela doit maintenant réussir, signalant 0 passages (1ms)
+ ou similaire.
+
+$ npm install three --save-dev
+
+
+ $ npm show three versions
+
+ pour voir
+ ce qui est disponible. Pour indiquer à npm la bonne, utilisez
+
+ $ npm install three@0.84.0 --save
+
+ (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.
+
+ $ mkdir test
+
+
+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);
+ })
+})
+
+
+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)
+
+ + 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: +
+
+//=============================================================================
+// make available in nodejs
+//=============================================================================
+if (typeof exports !== 'undefined')
+{
+ module.exports = Physics;
+}
+
+ + Si vous utlisez déjà quelque chose d'astucieux comme require.js ou browserify, sautez cette partie. +
++ 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. +
++ Si vous exportez un module qui dépend d'autres fichiers, vous devrez dire à node de les charger. + Voici une approche: +
+
+//=============================================================================
+// setup for server-side testing
+//=============================================================================
+if (typeof require === 'function') // test for nodejs environment
+{
+ const THREE = require('three');
+ const MY3 = require('./MY3.js');
+}
+
+
+ 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.
+
+ 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.
+
+
+
+ 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).
+
+ 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.
+
+
+
+ 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.
+
+ 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.
+
+
+ + 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. + +
+ ++ + 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. + +
+ ++ + Si vous voulez qu'un groupe d'objets reçoive un statut d'animation partagé, vous pouvez utiliser un + [page:AnimationObjectGroup]. + +
+ ++ 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 supportent + ce type d'animations: +
+ ++ 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. +
+ +
+ 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();
+ } );
+
+
+
+
diff --git a/docs/manual/fr/introduction/Color-management.html b/docs/manual/fr/introduction/Color-management.html
new file mode 100644
index 00000000000000..3b74a2cea8ba99
--- /dev/null
+++ b/docs/manual/fr/introduction/Color-management.html
@@ -0,0 +1,336 @@
+
+
+
+
+
+ + 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. +
+ +
+ + 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. +
+ ++ 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. +
+ +++ ++ ℹ️ NOTE: 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. +
+
+ 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. +
+ ++ 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 texture.encoding. + 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: +
+ +
+THREE.ColorManagement.legacyMode = false;
+
+
+ ++ ++ ⚠️ ATTENTION: [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 sortie du moteur de rendu. +
+
++ ++ ⚠️ ATTENTION: 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. +
+
+ 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. +
+ ++ 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. +
+ +
+renderer.outputEncoding = THREE.sRGBEncoding; // optional with post-processing
+
+
+ ++ ++ ⚠️ ATTENTION: 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. +
+
+ 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 .convertLinearToSRGB() + ou .convertSRGBToLinear(). +
+ +
+ // 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
+
+
+ + Avec ColorManagement.legacyMode = false 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. +
+ +
+ // 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
+
+
+ + 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. +
+ ++ Un problème plus subtil peut se produire quand à la fois 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"). +
+ +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.
+ +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.
+ +
+ <!DOCTYPE html>
+ <html>
+ <head>
+ <meta charset="utf-8">
+ <title>My first three.js app</title>
+ <style>
+ body { margin: 0; }
+ </style>
+ </head>
+ <body>
+ <script src="js/three.js"></script>
+ <script>
+ // Our Javascript will go here.
+ </script>
+ </body>
+ </html>
+
+
+ C'est tout. Tout le code qui va suivre doit aller dans la balise <script>.
+ +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.
+ +
+ 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 );
+
+
+ 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.
+ +Il existe différentes caméras dans three.js. Pour l'instant, utilisons une `PerspectiveCamera`.
+ +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.
+ +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.
+ +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.
+ +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.
+ +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.
+ +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 <canvas> a 100% de largeur et de hauteur.
+ +Pour finir, nous ajoutons l'élement `renderer` à notre document HTML. C'est un élément <canvas> que le moteur de rendu utilise pour nous affficher la scène.
+ +"C'est sympa tout ça, mais où sont les cubes que tu nous avais promis?" Ajoutons-les maintenant.
+ +
+ 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;
+
+
+ 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.
+ +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`).
+ +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.
+ +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.
+ +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`.
+ +
+ function animate() {
+ requestAnimationFrame( animate );
+ renderer.render( scene, camera );
+ }
+ animate();
+
+
+ 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 "Pourquoi nous ne créons pas de setInterval ?" 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.
+ +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.
+ +Ajoutez le code suivant juste au dessus de l'appel `renderer.render` dans votre fonction `animate`:
+ +
+ cube.rotation.x += 0.01;
+ cube.rotation.y += 0.01;
+
+
+ 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.
+ +Félicitations! Vous avez maintenant terminé votre première application three.js. C'est trivial, mais il faut bien commencer quelque part.
+ +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.
+ +
+ <!DOCTYPE html>
+ <html>
+ <head>
+ <meta charset="utf-8">
+ <title>My first three.js app</title>
+ <style>
+ body { margin: 0; }
+ </style>
+ </head>
+ <body>
+ <script src="js/three.js"></script>
+ <script>
+ 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();
+ </script>
+ </body>
+ </html>
+
+
+
diff --git a/docs/manual/fr/introduction/Creating-text.html b/docs/manual/fr/introduction/Creating-text.html
new file mode 100644
index 00000000000000..65967cb8f4811f
--- /dev/null
+++ b/docs/manual/fr/introduction/Creating-text.html
@@ -0,0 +1,142 @@
+
+
+
+
+ + Parfois vous aurez besoin d'utiliser du texte dans votre application three.js - ici + sont présentées quelques façons de le faire. +
++ 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. +
+Vous pouvez ajouter du contenu à une
+<div id="info">Description</div>
+
+ + 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. +
+ +
+#info {
+ position: absolute;
+ top: 10px;
+ width: 100%;
+ text-align: center;
+ z-index: 100;
+ display:block;
+}
+
+
+ + 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. +
+Utilisez cette méthode si vous souhaitez dessiner du texte facilement sur un plane dans votre scène three.js.
+Utilisez cette méthode si vous préférez travailler avec vos applications 3D puis importer vos modèles dans three.js.
++ 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: +
+
+ new THREE.TextGeometry( text, parameters );
+
+ 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. +
+ +
+ [example:webgl_geometry_text WebGL / geometry / text]
+ [example:webgl_shadowmap WebGL / shadowmap]
+
+ 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] +
+ ++ 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]. +
++ 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. +
++ Quelques outils utiles: +
++ 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: +
++ 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). +
+ +Voici le code que nous allons utiliser:
+
+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();
+
+ 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].
+
+//create a blue LineBasicMaterial
+const material = new THREE.LineBasicMaterial( { color: 0x0000ff } );
+
+
+ + Après le matériau, nous devons utiliser une forme (geometry) avec quelques sommets: +
+ +
+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 );
+
+
+ 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).
+ +Maintenant que nous avons les points pour deux lignes et un matériau, nous pouvons les assembler pour former une ligne.
+
+const line = new THREE.Line( geometry, material );
+
+ Il ne manque qu'à l'ajouter à la scène et appeler [page:WebGLRenderer.render render].
+ +
+scene.add( line );
+renderer.render( scene, camera );
+
+
+ Vous devez maintenant voir une flèche pointant vers le haut, faite de deux lignes bleues.
++ 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. +
++ 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]. +
+<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+
+ 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).
+ +[link:https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html Safari: Using the Viewport]
+ +[link:https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag MDN: Using the viewport meta tag]
+
+ 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:
+
+
+visible_height = 2 * Math.tan( ( Math.PI / 180 ) * camera.fov / 2 ) * distance_from_camera;
+
+ 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].
+
+ 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.
+ material.side = THREE.DoubleSide
+
+ 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. +
+ + diff --git a/docs/manual/fr/introduction/How-to-create-VR-content.html b/docs/manual/fr/introduction/How-to-create-VR-content.html new file mode 100644 index 00000000000000..baa85958316306 --- /dev/null +++ b/docs/manual/fr/introduction/How-to-create-VR-content.html @@ -0,0 +1,81 @@ + + + + + ++ Ce guide fournit une brève vue d'ensemble des composants basiques d'une application VR web + faite avec three.js. +
+ ++ Premièrement, vous devez inclure [link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/webxr/VRButton.js VRButton.js] + dans votre projet. +
+ +
+import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';
+
+
+ + *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. +
+ +
+document.body.appendChild( VRButton.createButton( renderer ) );
+
+
+ + Ensuite, vous devez dire à votre instance de `WebGLRenderer` d'activer le rendu XR. +
+ +
+renderer.xr.enabled = true;
+
+
+ + 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: +
+ +
+renderer.setAnimationLoop( function () {
+
+ renderer.render( scene, camera );
+
+} );
+
+
+
+ Jetez un coup d'oeil à un des exemples officiels WebVR pour voir le workflow en action.
+
+ [example:webxr_vr_ballshooter WebXR / VR / ballshooter]
+ [example:webxr_vr_cubes WebXR / VR / cubes]
+ [example:webxr_vr_dragging WebXR / VR / dragging]
+ [example:webxr_vr_paint WebXR / VR / paint]
+ [example:webxr_vr_panorama_depth WebXR / VR / panorama_depth]
+ [example:webxr_vr_panorama WebXR / VR / panorama]
+ [example:webxr_vr_rollercoaster WebXR / VR / rollercoaster]
+ [example:webxr_vr_sandbox WebXR / VR / sandbox]
+ [example:webxr_vr_sculpt WebXR / VR / sculpt]
+ [example:webxr_vr_video WebXR / VR / video]
+
+ 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. +
+ ++ 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. +
+ ++ 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](). +
+ ++ 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](). +
+ ++ 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. +
+ ++ 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](). +
+ ++ 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. +
+ ++ 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()`. +
+ ++ 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. +
+ ++ 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. +
+ ++ 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. +
+ ++ 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é. +
+ ++ 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. +
+ +
+ [example:webgl_test_memory WebGL / test / memory]
+ [example:webgl_test_memory2 WebGL / test / memory2]
+
+ 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 file:///yourFile.html dans votre barre d'URL). +
+ ++ 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. +
+ ++ Pour résoudre ce problème, exécutez vos fichiers depuis un serveur web local. Cela vous permettra d'accéder à votre page ainsi: +
+ +
+ http://localhost/yourFile.html
+
+ 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. +
++ 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. +
+ +Certains éditeurs de code ont des plugins qui créent un simple serveur à la demande.
++ [link:https://greggman.github.io/servez Servez] est un serveur simple avec une interface graphique. +
+Serveur de développement avec capacité de redémarrage en direct. Pour l'installer:
+
+# 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
+
+
+ Pour le lancer (depuis votre dossier local):
+five-server . -p 8000
+ Node.js a un simple serveur de package HTTP. Pour l'installer:
+npm install http-server -g
+
+ Pour le lancer (depuis votre dossier local):
+http-server . -p 8000
+ + 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): +
+
+//Python 2.x
+python -m SimpleHTTPServer
+
+//Python 3.x
+python -m http.server
+
+
+ Cela remontera les fichiers du dossier courant au localhost sur le port 8000, par exemple écrivez dans la barre d'URL:
+ +http://localhost:8000/
+ Si vous avez Ruby d'installé, vous pouvez obtenir le même résultat en exécutant ceci à la place:
+
+ruby -r webrick -e "s = WEBrick::HTTPServer.new(:Port => 8000, :DocumentRoot => Dir.pwd); trap('INT') { s.shutdown }; s.start"
+
+ PHP a également un serveur web intégré, depuis la 5.4.0:
+php -S localhost:8000
+ + 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. +
+ +brew install lighttpd
+ lighttpd -f lighttpd.conf
+ Si vous utilisez Microsoft IIS comme serveur web. Veuillez ajouter un type de paramètres MIME concernant l'extension .fbx avant de charger.
+File name extension: fbx MIME Type: text/plain
+ 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.
++ D'autres alternatives simples sont [link:http://stackoverflow.com/q/12905426/24874 présentées ici] + sur Stack Overflow. +
+Tous les objets mettent par défaut automatiquement leur matrice à jour si ils ont été ajoutés dans la scène avec
+
+const object = new THREE.Object3D();
+scene.add( object );
+
+ ou si ils sont l'enfant d'un autre objet qui a été ajouté à la scène:
+
+const object1 = new THREE.Object3D();
+const object2 = new THREE.Object3D();
+
+object1.add( object2 );
+scene.add( object1 ); //object1 and object2 will automatically update their matrices
+
+ 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.
+ +
+object.matrixAutoUpdate = false;
+object.updateMatrix();
+
+
+ + 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. +
++ 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. +
++ 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. +
++ 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]. +
+
+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 );
+
+ + Ensuite nous ajouterons aléatoirement des points à l'aide d'un pattern comme: +
+
+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;
+
+}
+
+ + If you want to change the number of points rendered after the first render, do this: +
+
+line.geometry.setDrawRange( 0, newValue );
+
+ + If you want to change the position data values after the first render, you need to + set the needsUpdate flag like so: +
+
+line.geometry.attributes.position.needsUpdate = true; // required after the first render
+
+
+ + 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. +
+
+line.geometry.computeBoundingBox();
+line.geometry.computeBoundingSphere();
+
+
+ + [link:https://jsfiddle.net/t4m85pLr/1/ Here is a fiddle] showing an animated line which you can adapt to your use case. +
+ +
+ [example:webgl_custom_attributes WebGL / custom / attributes]
+ [example:webgl_buffergeometry_custom_attributes_particles WebGL / buffergeometry / custom / attributes / particles]
+
Toutes les valeurs uniformes peuvent être changées librement(e.g. couleurs, textures, opacité, etc), les valeurs sont envoyées aux shaders à chaque frame.
+ +De plus, les paramètresen relation avec GLstate peuvent changer à tout moment (depthTest, blending, polygonOffset, etc).
+ +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):
+Des changements dans ces propriétés exigent la création d'un nouveau programme de shader. Vous devrez définir
+material.needsUpdate = true
+
+ 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).
+ +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.
+ +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).
+ +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.).
+ +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.
+ +
+ [example:webgl_materials_car WebGL / materials / car]
+ [example:webgl_postprocessing_dof WebGL / webgl_postprocessing / dof]
+
Les images, canvas, vidéos et les données des textures doivent avoir le flag suivant si elles sont changées:
+
+ texture.needsUpdate = true;
+
+ La cible du rendu se met automatiquement à jour.
+ +
+ [example:webgl_materials_video WebGL / materials / video]
+ [example:webgl_rtt WebGL / rtt]
+
La position de la caméra et sa cible sont automatiquement mises à jour. Si vous devez changer
++ alors vous aurez besoin de recalculer la matrice de projection: +
+
+camera.aspect = window.innerWidth / window.innerHeight;
+camera.updateProjectionMatrix();
+
+ + 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. +
++ three.js fournit une solution complète de post-processing via [page:EffectComposer] pour implémenter un tel workflow. +
+ ++ 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. +
+ +
+ 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';
+
+
+ + Après avoir importé tous les fichiers correctement, nous pouvons créer notre composer en lui passant une instance de [page:WebGLRenderer]. +
+ +
+ const composer = new EffectComposer( renderer );
+
+
+ + 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]. +
+ +
+ function animate() {
+
+ requestAnimationFrame( animate );
+
+ composer.render();
+
+ }
+
+
+ + 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: +
+ +
+ const renderPass = new RenderPass( scene, camera );
+ composer.addPass( renderPass );
+
+ const glitchPass = new GlitchPass();
+ composer.addPass( glitchPass );
+
+
+ + `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. +
+ ++ 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]. +
+ ++ 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). +
+ +
+ 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 );
+
+
+ + 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. +
+ + + diff --git a/docs/manual/fr/introduction/Installation.html b/docs/manual/fr/introduction/Installation.html new file mode 100644 index 00000000000000..ac10a06a5becff --- /dev/null +++ b/docs/manual/fr/introduction/Installation.html @@ -0,0 +1,148 @@ + + + + ++ 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. +
+ ++ 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. +
+ ++ 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. +
+ ++ 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: +
+ +
+ npm install three
+
+
+ + Le package sera téléchargé et installé. Puis vous pouvez l'importer dans votre projet: +
+ +
+ // 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();
+
+
+ + 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]. +
+ ++ Toutes les fonctionnalités ne sont pas directement accédées depuis le module three (é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 Examples ci-dessous. +
+ ++ Apprenez-en plus à propos des modules npm depuis [link:https://eloquentjavascript.net/20_node.html#h_J6hW/SmL/a Eloquent JavaScript: Installation avec npm]. +
+ ++ 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 type="module" comme montré ci-dessous. + Il est également requis de définir une Import Map qui effectue la résolution du bare module specifier `three`. +
+ +
+ <script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
+
+ <script type="importmap">
+ {
+ "imports": {
+ "three": "https://unpkg.com/three@<version>/build/three.module.js"
+ }
+ }
+ </script>
+
+ <script type="module">
+
+ import * as THREE from 'three';
+
+ const scene = new THREE.Scene();
+
+ </script>
+
+
+ + É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*. +
+ ++ 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. +
+ ++ Les examples n'ont pas besoin d'être installés séparément, mais doivent être importés séparément. Si three.js a été installé avec npm, vous pouvez charger le composant [page:OrbitControls] avec: +
+ + +
+ import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
+
+ const controls = new OrbitControls( camera, renderer.domElement );
+
+
+ + Si three.js a été installé depuis un CDN, utilisez le même CDN pour installer d'autres composants: +
+ +
+ <script type="module">
+
+ import { OrbitControls } from 'https://unpkg.com/three@<version>/examples/jsm/controls/OrbitControls.js';
+
+ const controls = new OrbitControls( camera, renderer.domElement );
+
+ </script>
+
+
+ + 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. +
+ ++ 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. +
+ ++ 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. +
+ ++ Faites attention à bien ajouter `{ "type": "module" }` à votre `package.json` pour autoriser les modules ES6 dans votre projet Node. +
+ + + diff --git a/docs/manual/fr/introduction/Libraries-and-Plugins.html b/docs/manual/fr/introduction/Libraries-and-Plugins.html new file mode 100644 index 00000000000000..f7f38b48e3d33e --- /dev/null +++ b/docs/manual/fr/introduction/Libraries-and-Plugins.html @@ -0,0 +1,107 @@ + + + + ++ 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! +
+ ++ 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. +
+ ++ 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. +
+ ++ 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 + + three.js fournit plusieurs loaders, 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. +
+ ++ 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. +
+ ++ 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. +
+ ++ Dans la mesure du possible, nous recommandons l'utilisation de glTF (GL Transmission Format). Les versions + .GLB et .GLTF 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. +
+ ++ Les fichiers glTF appartenant au domaine public sont disponibles sur des sites comme + + Sketchfab, différents outils incluent l'export de glTF: +
+ ++ 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 + the glTF roadmap thread. +
+ ++ Quand glTF n'est pas utilisable, des formats populaires comme FBX, OBJ, ou COLLADA + sont également disponibles et régulièrement maintenus. +
+ ++ Seulement quelques loaders (e.g. [page:ObjectLoader]) sont inclus par défaut dans + three.js — les autres doivent être ajoutés individuellement à votre application. +
+ +
+ import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
+
+
+ + 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: +
+ +
+ const loader = new GLTFLoader();
+
+ loader.load( 'path/to/model.glb', function ( gltf ) {
+
+ scene.add( gltf.scene );
+
+ }, undefined, function ( error ) {
+
+ console.error( error );
+
+ } );
+
+
+ + Voir [page:GLTFLoader GLTFLoader documentation] pour plus de détails. +
+ ++ 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: +
+ ++ 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 + forum three.js 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. +
+ + + + diff --git a/docs/manual/fr/introduction/Matrix-transformations.html b/docs/manual/fr/introduction/Matrix-transformations.html new file mode 100644 index 00000000000000..547d02adb86c77 --- /dev/null +++ b/docs/manual/fr/introduction/Matrix-transformations.html @@ -0,0 +1,67 @@ + + + + ++ 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. +
+ ++ Il y a deux façons de mettre à jour les transformations d'un objet: +
+
+object.position.copy( start_position );
+object.quaternion.copy( quaternion );
+
+ 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:
+
+object.matrixAutoUpdate = false;
+
+ Et après avoir changé n'importe quelle propriété, mettez manuellement la matrice à jour:
+
+object.updateMatrix();
+
+
+object.matrix.setRotationFromQuaternion( quaternion );
+object.matrix.setPosition( start_position );
+object.matrixAutoUpdate = false;
+
+ Notez que `matrixAutoUpdate` doit être définie comme `false` dans ce cas, et vous devez vérifier que vous n'appelez pas `updateMatrix`. Appeler `updateMatrix` écrasera les modifications manuelles apportées à la matrice, en recalculant la matrice grâce à sa `position`, `scale`, ainsi de suite.
+ + La [page:Object3D.matrix matrix] d'un objet stocke les transformations relatives au [page:Object3D.parent parent] de l'objet; pour obtenir les transformations de l'objets en coordonnées du monde, vous devez accéder à la [page:Object3D.matrixWorld] de l'objet. +
++ 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](). +
+ ++ 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 toujours stockées dans la propriété [page:Object3D.quaternion quaternion] de l'objet. +
++ 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. +
+ + + diff --git a/docs/manual/fr/introduction/Useful-links.html b/docs/manual/fr/introduction/Useful-links.html new file mode 100644 index 00000000000000..5bc471813442ce --- /dev/null +++ b/docs/manual/fr/introduction/Useful-links.html @@ -0,0 +1,177 @@ + + + + +
+ Sur cette page vous trouverez un ensemble de liens qui pourraient vous êtres utiles dans votre apprentissage de three.js.
+ 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!
+
+ 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.
+
+ 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. +
+ ++ 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. +
+ ++ 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. +
+ ++ 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. +
+ +
+ if ( WebGL.isWebGLAvailable() ) {
+
+ // Initiate function or other initializations here
+ animate();
+
+ } else {
+
+ const warning = WebGL.getWebGLErrorMessage();
+ document.getElementById( 'container' ).appendChild( warning );
+
+ }
+
+
+