diff options
| author | julieng <julien.gattelier@gmail.com> | 2021-11-11 07:45:14 +0100 |
|---|---|---|
| committer | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-11-11 09:09:24 +0100 |
| commit | e70d9556485debd0724eeff93d326bf946113c93 (patch) | |
| tree | 0e59caf7dfa1a0921e0e1d1f577ed28f7de14fde /files/fr/games/techniques/3d_on_the_web | |
| parent | 728e7b64e54f3b6e56eaba38b65adbbaa42990ca (diff) | |
| download | translated-content-e70d9556485debd0724eeff93d326bf946113c93.tar.gz translated-content-e70d9556485debd0724eeff93d326bf946113c93.tar.bz2 translated-content-e70d9556485debd0724eeff93d326bf946113c93.zip | |
convert content to md
Diffstat (limited to 'files/fr/games/techniques/3d_on_the_web')
4 files changed, 282 insertions, 291 deletions
diff --git a/files/fr/games/techniques/3d_on_the_web/basic_theory/index.md b/files/fr/games/techniques/3d_on_the_web/basic_theory/index.md index 4243e68e9a..9c1447274b 100644 --- a/files/fr/games/techniques/3d_on_the_web/basic_theory/index.md +++ b/files/fr/games/techniques/3d_on_the_web/basic_theory/index.md @@ -11,116 +11,107 @@ tags: - vertex translation_of: Games/Techniques/3D_on_the_web/Basic_theory --- -<div>{{GamesSidebar}}</div><p> {{IncludeSubnav("/fr/docs/Jeux")}}</p> +{{GamesSidebar}} -<p>Cet article explique l'ensemble des bases théoriques utiles à connaître lorsque vous commencez à travailler avec la 3D.</p> +{{IncludeSubnav("/fr/docs/Jeux")}} -<h2 id="Système_de_coordonnées">Système de coordonnées</h2> +Cet article explique l'ensemble des bases théoriques utiles à connaître lorsque vous commencez à travailler avec la 3D. -<p>La 3D est principalement basée sur la représentation de formes 3D dans l'espace, avec un système de coordonnées utilisé pour calculer leurs positions.</p> +## Système de coordonnées -<p><img src="mdn-games-3d-coordinate-system.png"></p> +La 3D est principalement basée sur la représentation de formes 3D dans l'espace, avec un système de coordonnées utilisé pour calculer leurs positions. -<p>WebGL utilise le système de coordonnées de droite — l'axe x pointe vers la droite, l'axe y vers le haut et l'axe z dans la profondeur, comme shématisé ci-dessus.</p> + -<h2 id="Objets">Objets</h2> +WebGL utilise le système de coordonnées de droite — l'axe x pointe vers la droite, l'axe y vers le haut et l'axe z dans la profondeur, comme shématisé ci-dessus. -<p>Differents types d'objets sont construits en utilisant les sommets. Un Sommet (Vertex) est un point dans l'espace ayant sa propre position 3D dans le système de coordonnées et souvent quelques informations supplémentaires qui le définissent. Chaque sommet est décrit par ces attributs :</p> +## Objets -<ul> - <li><strong>Position </strong>: L'identifie dans un espace 3D (<code>x</code>, <code>y</code>, <code>z</code>).</li> - <li><strong>Color </strong><em>(Couleur)</em><strong> </strong>: Prend une valeur RVBA (R, V et B pour le Rouge, Vert et Bleu, A (alpha) pour l'opacité — toutes les valeurs comprises entre 0.0 et 1.0)</li> - <li><strong>Normal : </strong> Une manière de décrire la direction à laquelle fait face le sommet.</li> - <li><strong>Texture </strong>: Une image 2D que le sommet peut utiliser pour décorer la surface dont il fait partie à la place d'une simple couleur.</li> -</ul> +Differents types d'objets sont construits en utilisant les sommets. Un Sommet (Vertex) est un point dans l'espace ayant sa propre position 3D dans le système de coordonnées et souvent quelques informations supplémentaires qui le définissent. Chaque sommet est décrit par ces attributs : -<p>Vous pouvez faire de la géométrie en utilisant ces informations — voici l'exemple d'un cube :</p> +- **Position** : L'identifie dans un espace 3D (`x`, `y`, `z`). +- **Color** \*(Couleur)**\* **: Prend une valeur RVBA (R, V et B pour le Rouge, Vert et Bleu, A (alpha) pour l'opacité — toutes les valeurs comprises entre 0.0 et 1.0) +- **Normal :** Une manière de décrire la direction à laquelle fait face le sommet. +- **Texture** : Une image 2D que le sommet peut utiliser pour décorer la surface dont il fait partie à la place d'une simple couleur. -<p><img alt="Cube" src="mdn-games-3d-cube.png"></p> +Vous pouvez faire de la géométrie en utilisant ces informations — voici l'exemple d'un cube : -<p>Une face de la forme donnée est un plan entre des sommets. Par exemple, un cube a 8 différents sommets (points dans l'espace) et 6 différentes faces, chacune construite à partir de 4 sommets. Une norme définit de quelle manière la face est orientée. De plus, en connectant les points, on crée les arêtes du cube.La géométrie est basée sur les sommets et les faces, où le matériau est une texture, utilisant une couleur ou une image. Si l'on connecte la géométrie avec le matériau, on obtient une maille (mesh)</p> + -<h2 id="Rendu_des_tuyaux_(pipeline)">Rendu des tuyaux (<em>pipeline</em>)</h2> +Une face de la forme donnée est un plan entre des sommets. Par exemple, un cube a 8 différents sommets (points dans l'espace) et 6 différentes faces, chacune construite à partir de 4 sommets. Une norme définit de quelle manière la face est orientée. De plus, en connectant les points, on crée les arêtes du cube.La géométrie est basée sur les sommets et les faces, où le matériau est une texture, utilisant une couleur ou une image. Si l'on connecte la géométrie avec le matériau, on obtient une maille (mesh) -<p>Le rendu des tuyaux est un procédé avec lequel les images sont préparées et affichées sur l'écran. Les graphismes utilisant les rendus de tuyaux prennent des objets 3D construits à partir de primitives décrites à l'aide de sommets, les transforment, calculent les fragments, et les affichent sur un écran 2D en tant que pixels.</p> +## Rendu des tuyaux (_pipeline_) -<p><img alt="Rendering pipeline" src="mdn-games-3d-rendering-pipeline.png"></p> +Le rendu des tuyaux est un procédé avec lequel les images sont préparées et affichées sur l'écran. Les graphismes utilisant les rendus de tuyaux prennent des objets 3D construits à partir de primitives décrites à l'aide de sommets, les transforment, calculent les fragments, et les affichent sur un écran 2D en tant que pixels. -<p>Terminologie utilisée dans le diagramme ci-dessus :</p> + -<ul> - <li>Une <strong>Primitive </strong>: Une source pour le tuyau — construite à partir de sommets et peut être un triangle, un point ou une ligne.</li> - <li>Un <strong>Fragment </strong>: Une projection 3D d'un pixel, qui a les mêmes attributs qu'un pixel.</li> - <li>Un <strong>Pixel </strong>: Un point sur l'écran arrangé sur une grille 2D, qui prend une couleur RVBA.</li> -</ul> +Terminologie utilisée dans le diagramme ci-dessus : -<p>Le traitement des sommets et des fragments est programmable — vous pouvez <a href="/fr/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders">écrire vos propres shaders</a> qui manipulent le rendu.</p> +- Une **Primitive** : Une source pour le tuyau — construite à partir de sommets et peut être un triangle, un point ou une ligne. +- Un **Fragment** : Une projection 3D d'un pixel, qui a les mêmes attributs qu'un pixel. +- Un **Pixel** : Un point sur l'écran arrangé sur une grille 2D, qui prend une couleur RVBA. -<h2 id="Traitement_de_sommet">Traitement de sommet</h2> +Le traitement des sommets et des fragments est programmable — vous pouvez [écrire vos propres shaders](/fr/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders) qui manipulent le rendu. -<p>Le traitement de sommet consiste à combiner les informations à propos de chaque sommet dans des primitives et de définir leurs coordonnées dans l'espace 3D pour le spectateur. C'est comme prendre une photo de la scène donnée que vous avez préparée — vous devez placer les objets en premier, configurer la caméra, et prendre la photo.</p> +## Traitement de sommet -<p><img src="mdn-games-3d-vertex-processing.png"></p> +Le traitement de sommet consiste à combiner les informations à propos de chaque sommet dans des primitives et de définir leurs coordonnées dans l'espace 3D pour le spectateur. C'est comme prendre une photo de la scène donnée que vous avez préparée — vous devez placer les objets en premier, configurer la caméra, et prendre la photo. -<p>Il y a 4 étapes dans ce traitement : la première implique d'arranger les objets dans le monde, elle est appelée la <strong>transformation du modèle</strong>. Ensuite, il y a la <strong>transformation de la vue</strong>, qui prend soin de positionner et de régler l'orientation de la caméra dans l'espace 3D. La caméra a 3 paramètres — position, direction et orientation — qui doivent être définis pour la scène nouvellement créée.</p> + -<p><img alt="Camera" src="mdn-games-3d-camera.png"></p> +Il y a 4 étapes dans ce traitement : la première implique d'arranger les objets dans le monde, elle est appelée la **transformation du modèle**. Ensuite, il y a la **transformation de la vue**, qui prend soin de positionner et de régler l'orientation de la caméra dans l'espace 3D. La caméra a 3 paramètres — position, direction et orientation — qui doivent être définis pour la scène nouvellement créée. -<p>La <strong>transformation de la projection</strong> (aussi appelée transformation de la perspective) définit ensuite les réglages de la caméra. Elle définit ce qui peut être vu par la caméra — la configuration inclut le champ de vision, le ratio d'aspect, et éventuellement les plans proches et éloignés. Lisez le <a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js#Camera">paragraphe sur la Caméra</a> dans l'article de Three.js pour en savoir plus.</p> + -<p><img src="mdn-games-3d-camera-settings.png"></p> +La **transformation de la projection** (aussi appelée transformation de la perspective) définit ensuite les réglages de la caméra. Elle définit ce qui peut être vu par la caméra — la configuration inclut le champ de vision, le ratio d'aspect, et éventuellement les plans proches et éloignés. Lisez le [paragraphe sur la Caméra](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js#Camera) dans l'article de Three.js pour en savoir plus. -<p>La dernière étape est la transformation de la fenêtre, qui implique la production de tout pour la prochaine étape dans le rendu du tuyau.</p> + -<h2 id="Rastérisation">Rastérisation</h2> +La dernière étape est la transformation de la fenêtre, qui implique la production de tout pour la prochaine étape dans le rendu du tuyau. -<p>La rastérisation convertit les primitives (des sommets reliés) à un ensemble de fragments.</p> +## Rastérisation -<p><img src="mdn-games-3d-rasterization.png"></p> +La rastérisation convertit les primitives (des sommets reliés) à un ensemble de fragments. -<p>Ces fragments — qui sont des projections 3D de pixels 2D — sont alignés sur la grille de pixels, donc éventuellement ils peuvent être affichés comme des pixels sur un écran 2D durant la phase de fusion du résultat.</p> + -<h2 id="Traitement_de_fragment">Traitement de fragment</h2> +Ces fragments — qui sont des projections 3D de pixels 2D — sont alignés sur la grille de pixels, donc éventuellement ils peuvent être affichés comme des pixels sur un écran 2D durant la phase de fusion du résultat. -<p>Le traitement de fragment se concentre sur les textures et les lumières — il calcule les couleurs finales à partir des paramètres donnés.</p> +## Traitement de fragment -<p><img src="mdn-games-3d-fragment-processing.png"></p> +Le traitement de fragment se concentre sur les textures et les lumières — il calcule les couleurs finales à partir des paramètres donnés. -<h3 id="Textures">Textures</h3> + -<p>Les textures sont des images 2D utilisées dans l'espace 3D pour faire que les objets rendent mieux et paraissent plus réalistes. Les textures sont combinées à partir de simples éléments de texture appelés texels, de la même manière que les images sont combinées à partir de pixels. Appliquer des textures sur des objets durant le traitement des fragments, vous permet de l'ajuster en lui donnant une enveloppe ou des filtres si nécessaire.</p> +### Textures -<p>L'habillage de texture permet de répéter l'image 2D autour de l'objet 3D. Le filtrage de texture est appliqué lorsque la résolution d'origine ou l'image de texture est différente du fragment affiché — elle sera réduite ou agrandie en conséquence.</p> +Les textures sont des images 2D utilisées dans l'espace 3D pour faire que les objets rendent mieux et paraissent plus réalistes. Les textures sont combinées à partir de simples éléments de texture appelés texels, de la même manière que les images sont combinées à partir de pixels. Appliquer des textures sur des objets durant le traitement des fragments, vous permet de l'ajuster en lui donnant une enveloppe ou des filtres si nécessaire. -<h3 id="Lumières">Lumières</h3> +L'habillage de texture permet de répéter l'image 2D autour de l'objet 3D. Le filtrage de texture est appliqué lorsque la résolution d'origine ou l'image de texture est différente du fragment affiché — elle sera réduite ou agrandie en conséquence. -<p>Les couleurs que nous voyons sur l'écran sont le résultat d'une source de lumière intéragissant avec la couleur à la surface des matériaux des objets. La lumière peut être absorbée ou réfléchie. Le <strong>modèle de lumière Phong</strong> standard implémenté dans WebGL a 4 types de base de lumière :</p> +### Lumières -<ul> - <li><strong>Diffuse </strong><em>(diffusion) </em>: Une lumière directionnelle distante, comme le Soleil.</li> - <li><strong>Specular </strong><em>(Particulier)</em> : Un point de lumière, comme un bulle de lumière dans une pièce ou un flash.</li> - <li><strong>Ambient </strong><em>(Ambiant)</em><strong> </strong>: Une lumière constante appliquée à tous les objets dans la scène.</li> - <li><strong>Emissive </strong><em>(Émission)</em> : La lumière émise directement par un objet.</li> -</ul> +Les couleurs que nous voyons sur l'écran sont le résultat d'une source de lumière intéragissant avec la couleur à la surface des matériaux des objets. La lumière peut être absorbée ou réfléchie. Le **modèle de lumière Phong** standard implémenté dans WebGL a 4 types de base de lumière : -<h2 id="Fusion_de_sortie">Fusion de sortie</h2> +- **Diffuse** _(diffusion)_ : Une lumière directionnelle distante, comme le Soleil. +- **Specular** _(Particulier)_ : Un point de lumière, comme un bulle de lumière dans une pièce ou un flash. +- **Ambient** \*(Ambiant)**\* **: Une lumière constante appliquée à tous les objets dans la scène. +- **Emissive** _(Émission)_ : La lumière émise directement par un objet. -<p>Durant l'étape de manipulation du résultat, tous les fragments des primitives de l'espace 3D sont transformés sur une grille de pixels 2D qui est ensuite affichée sur l'écran.<img src="mdn-games-3d-output-merging.png"></p> +## Fusion de sortie -<p>Durant la fusion de sortie, quelques traitements sont aussi appliqués pour ignorer de l'information qui n'est pas utile — par exemple, les paramètres des objets qui sont à l'extérieur de l'écran ou derrière d'autres, et par conséquent non visibles, ne sont pas calculés.</p> +Durant l'étape de manipulation du résultat, tous les fragments des primitives de l'espace 3D sont transformés sur une grille de pixels 2D qui est ensuite affichée sur l'écran. -<ul> -</ul> +Durant la fusion de sortie, quelques traitements sont aussi appliqués pour ignorer de l'information qui n'est pas utile — par exemple, les paramètres des objets qui sont à l'extérieur de l'écran ou derrière d'autres, et par conséquent non visibles, ne sont pas calculés. -<h2 id="Conclusion">Conclusion</h2> +## Conclusion -<p>Maintenant vous connaissez les bases de la théorie derrière la manipulation 3D, si vous voulez passer à la pratique et voir quelques démonstrations en action, continuez avec les tutoriels ci-dessous :</p> +Maintenant vous connaissez les bases de la théorie derrière la manipulation 3D, si vous voulez passer à la pratique et voir quelques démonstrations en action, continuez avec les tutoriels ci-dessous : -<ul> - <li><a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js">Construction d'une démo de base avec Three.js</a></li> - <li><a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js">Construction d'une démo de base avec Babylon.js</a></li> - <li><a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas">Construction d'une démo de base avec PlayCanvas</a></li> - <li><a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame">Construction d'une démo de base avec</a><a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame"> A-Frame</a></li> -</ul> +- [Construction d'une démo de base avec Three.js](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js) +- [Construction d'une démo de base avec Babylon.js](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js) +- [Construction d'une démo de base avec PlayCanvas](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas) +- [Construction d'une démo de base avec](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame)[ A-Frame](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame) -<p>Allez-y et faites quelques expémentations 3D sympas par vous-même !</p> +Allez-y et faites quelques expémentations 3D sympas par vous-même ! diff --git a/files/fr/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/index.md b/files/fr/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/index.md index 8a10f15237..588289c009 100644 --- a/files/fr/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/index.md +++ b/files/fr/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/index.md @@ -12,38 +12,36 @@ tags: - camera translation_of: Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas --- -<div>{{GamesSidebar}}</div><p><strong>PlayCanvas</strong> est un populaire moteur 3D WebGL de jeu, originellement concu par Will Eastcott et Dave Evans. Il est disponible en <a href="https://github.com/playcanvas/engine">open-source sur GitHub</a>, avec un <a href="http://developer.playcanvas.com/en/user-manual/designer/">éditeur</a> en ligne et une bonne <a href="http://developer.playcanvas.com/en/">documentation</a>. L'éditeur en ligne est gratuit pour les projets publics avec jusqu'à deux membres d'équipe, mais il y a aussi des <a href="https://playcanvas.com/plans">plans payants</a> si vous vous lancez dans un projet commercial privé avec plus de développeurs.</p> +{{GamesSidebar}} -<p><img alt="Site PlayCanvas" src="playcanvas-cover.png"></p> +**PlayCanvas** est un populaire moteur 3D WebGL de jeu, originellement concu par Will Eastcott et Dave Evans. Il est disponible en [open-source sur GitHub](https://github.com/playcanvas/engine), avec un [éditeur](http://developer.playcanvas.com/en/user-manual/designer/) en ligne et une bonne [documentation](http://developer.playcanvas.com/en/). L'éditeur en ligne est gratuit pour les projets publics avec jusqu'à deux membres d'équipe, mais il y a aussi des [plans payants](https://playcanvas.com/plans) si vous vous lancez dans un projet commercial privé avec plus de développeurs. -<h2 id="Jeux_et_Démos">Jeux et Démos</h2> + -<p>PlayCanvas a publié quelques démos populaires présentant ses fonctionnalités.</p> +## Jeux et Démos -<ul> - <li><a href="http://playcanv.as/p/aP0oxhUr">Tanx</a> est un jeu de char multijoueur dans lequel vous pouvez conduire votre char, en tirant sur d'autres joueurs au fur et à mesure. </li> - <li><a href="http://playcanv.as/p/JtL2iqIH">Swooop</a> est un jeu de vol où vous pilotez votre avion autour d'une île magique tout en collectant des bijoux et du carburant.</li> - <li>Des visualisations comme the <a href="http://playcanv.as/b/FQbBsJTd">Star Lord</a> et <a href="http://playcanv.as/p/RqJJ9oU9">BMW i8</a> mettent également en valeur les possibilités du moteur.</li> -</ul> +PlayCanvas a publié quelques démos populaires présentant ses fonctionnalités. -<p><img src="playcanvas-demos.png"></p> +- [Tanx](http://playcanv.as/p/aP0oxhUr) est un jeu de char multijoueur dans lequel vous pouvez conduire votre char, en tirant sur d'autres joueurs au fur et à mesure. +- [Swooop](http://playcanv.as/p/JtL2iqIH) est un jeu de vol où vous pilotez votre avion autour d'une île magique tout en collectant des bijoux et du carburant. +- Des visualisations comme the [Star Lord](http://playcanv.as/b/FQbBsJTd) et [BMW i8](http://playcanv.as/p/RqJJ9oU9) mettent également en valeur les possibilités du moteur. -<div class="note"> -<p><strong>Note :</strong> Consultez la liste des <a href="https://playcanvas.com/explore">démos</a> pour trouver plus d'exemples.</p> -</div> + -<h2 id="Moteur_vs_Éditeur">Moteur vs Éditeur</h2> +> **Note :** Consultez la liste des [démos](https://playcanvas.com/explore) pour trouver plus d'exemples. -<p>Le moteur peut lui même être utilisé comme une bibliotheque standard en incluant directement ses fichiers JavaScript dans votre code HTML, vous permettant de commencer à coder instantanémment. De plus l'ensemble d'outils de PlayCanvas s'accompagne d'un éditeur en ligne vous permettant d'ajouter des éléments à la scène par glisser déposer — un formidable mode de création de jeux et autres applications nécessitant des scènes si vous êtes meilleur designer que codeur. Ces approches sont différentes mais se valent dans l'atteinte des objectifs.</p> +## Moteur vs Éditeur -<h2 id="Moteur_PlayCanvas">Moteur PlayCanvas</h2> +Le moteur peut lui même être utilisé comme une bibliotheque standard en incluant directement ses fichiers JavaScript dans votre code HTML, vous permettant de commencer à coder instantanémment. De plus l'ensemble d'outils de PlayCanvas s'accompagne d'un éditeur en ligne vous permettant d'ajouter des éléments à la scène par glisser déposer — un formidable mode de création de jeux et autres applications nécessitant des scènes si vous êtes meilleur designer que codeur. Ces approches sont différentes mais se valent dans l'atteinte des objectifs. -<p>Conçu pour les navigateurs modernes, PlayCanvas est un moteur de jeu 3D complet intégrant le chargement de ressources, un système d'entité et de composants, une manipulation avancée des graphismes, un moteur de collision et de physique (conçu avec <a href="https://github.com/kripken/ammo.js/">ammo.js</a>), la gestion du son et des simplifications pour la gestion des entrées de nombreux dispositifs (y compris les manettes de jeu). C'est une liste assez impressionnante de sonctionnalités — observez-en quelques-unes en action en consultant la rubrique <a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/engine">Conception d'une démo de base avec PlayCanvas</a> pour plus de détails.</p> +## Moteur PlayCanvas -<h2 id="Éditeur_PlayCanvas">Éditeur PlayCanvas </h2> +Conçu pour les navigateurs modernes, PlayCanvas est un moteur de jeu 3D complet intégrant le chargement de ressources, un système d'entité et de composants, une manipulation avancée des graphismes, un moteur de collision et de physique (conçu avec [ammo.js](https://github.com/kripken/ammo.js/)), la gestion du son et des simplifications pour la gestion des entrées de nombreux dispositifs (y compris les manettes de jeu). C'est une liste assez impressionnante de sonctionnalités — observez-en quelques-unes en action en consultant la rubrique [Conception d'une démo de base avec PlayCanvas](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/engine) pour plus de détails. -<p>Au lieu de tout coder à parir de zéro, vous pouvez également utiliser l'éditeur en ligne. Cela peut être un environnement de travail plus agréable si vous n'êtes pas très orienté codage. Voici la <a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/editor">construction d'une démo de base avec l'éditeur de PlayCanvas</a> pour plus de détails.</p> +## Éditeur PlayCanvas -<h2 id="Résumé">Résumé</h2> +Au lieu de tout coder à parir de zéro, vous pouvez également utiliser l'éditeur en ligne. Cela peut être un environnement de travail plus agréable si vous n'êtes pas très orienté codage. Voici la [construction d'une démo de base avec l'éditeur de PlayCanvas](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/editor) pour plus de détails. -<p>Votre approche sera déterminante. Les designers préféreront utiliser l'éditeur en ligne alors que les programmeurs voudront avoir le contrôle total de l'environnement de codage et utiliseront probablement les fichiers source du moteur. Ce qui est intéressant est que vous êtes libre dans le choix des outils vous convenant le mieux.</p> +## Résumé + +Votre approche sera déterminante. Les designers préféreront utiliser l'éditeur en ligne alors que les programmeurs voudront avoir le contrôle total de l'environnement de codage et utiliseront probablement les fichiers source du moteur. Ce qui est intéressant est que vous êtes libre dans le choix des outils vous convenant le mieux. diff --git a/files/fr/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.md b/files/fr/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.md index ea4b25a2c8..f94d68c5be 100644 --- a/files/fr/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.md +++ b/files/fr/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.md @@ -3,264 +3,274 @@ title: Building up a basic demo with Three.js slug: Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js translation_of: Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js --- -<div>{{GamesSidebar}}</div> +{{GamesSidebar}} -<p>Une scène 3D dans un jeu - même la plus simple - contient des éléments standard comme des formes situées dans un système de coordonnées, une caméra pour les voir réellement, des lumières et des matériaux pour amelioré son esthétique, des animations pour la rendre vivante, etc. <strong>Three</strong><strong>.js</strong>, comme avec toute autre bibliothèque 3D, fournit des fonctions d'assistance intégrées pour vous aider à implémenter plus rapidement les fonctionnalités 3D courantes. Dans cet article, nous vous expliquerons les bases de l'utilisation de Three, notamment la configuration d'un environnement de développement, la structuration du code HTML nécessaire, les objets fondamentaux de Three et la manière de créer une démonstration de base.</p> +Une scène 3D dans un jeu - même la plus simple - contient des éléments standard comme des formes situées dans un système de coordonnées, une caméra pour les voir réellement, des lumières et des matériaux pour amelioré son esthétique, des animations pour la rendre vivante, etc. **Three\*\***.js\*\*, comme avec toute autre bibliothèque 3D, fournit des fonctions d'assistance intégrées pour vous aider à implémenter plus rapidement les fonctionnalités 3D courantes. Dans cet article, nous vous expliquerons les bases de l'utilisation de Three, notamment la configuration d'un environnement de développement, la structuration du code HTML nécessaire, les objets fondamentaux de Three et la manière de créer une démonstration de base. -<div class="note"> -<p><strong>Note :</strong> Nous avons choisi Three car il s'agit de l'une des bibliothèques WebGL les plus populaires, et il est facile de commencer. Nous n'essayons pas de dire que c'est mieux que toute autre bibliothèque WebGL disponible, et vous devriez vous sentir libre d'essayer une autre bibliothèque, comme CopperLicht, GLGE ou PlayCanvas</p> -</div> +> **Note :** Nous avons choisi Three car il s'agit de l'une des bibliothèques WebGL les plus populaires, et il est facile de commencer. Nous n'essayons pas de dire que c'est mieux que toute autre bibliothèque WebGL disponible, et vous devriez vous sentir libre d'essayer une autre bibliothèque, comme CopperLicht, GLGE ou PlayCanvas -<h2 id="Configuration_de_l_environnement_de_Developpement">Configuration de l environnement de Developpement</h2> +## Configuration de l environnement de Developpement -<p>Pour commencer a developper avec <strong>Three.js :</strong></p> +Pour commencer a developper avec **Three.js :** -<ul> - <li>Assurez-vous d utiliser un navigateur moderne avec une bonne prise en charge de <strong>WebGL, </strong>comme le dernier Firefox ou Chrome.</li> - <li>Creer un repertoire ou stocker vos experience</li> - <li>Enregistrez une copie à jour de la bibliotheque Three.js réduite dans votre repertoire</li> - <li>Ouvrir la documentation de <strong>Three.js </strong>dans un nouvel onglet, il est utile de s'y référer.</li> -</ul> +- Assurez-vous d utiliser un navigateur moderne avec une bonne prise en charge de **WebGL,** comme le dernier Firefox ou Chrome. +- Creer un repertoire ou stocker vos experience +- Enregistrez une copie à jour de la bibliotheque Three.js réduite dans votre repertoire +- Ouvrir la documentation de **Three.js** dans un nouvel onglet, il est utile de s'y référer. -<h2 id="Structure_HTML">Structure HTML</h2> +## Structure HTML -<p>Voici la structure que nous allons utiliser</p> +Voici la structure que nous allons utiliser -<pre class="brush: html"><!DOCTYPE html> -<html> -<head> - <meta charset="utf-8"> - <title>MDN Games: Three.js demo</title> - <style> +```html +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>MDN Games: Three.js demo</title> + <style> body { margin: 0; padding: 0; } canvas { width: 100%; height: 100%; } - </style> -</head> -<body> -<script src="three.min.js"></script> -<script> + </style> +</head> +<body> +<script src="three.min.js"></script> +<script> var WIDTH = window.innerWidth; var HEIGHT = window.innerHeight; /* all our JavaScript code goes here */ -</script> -</body> -</html> -</pre> +</script> +</body> +</html> +``` -<p> Cette structure contient des informations de base , un peu de CSS pour definir la largeur et la hauteur de l élément canvas, ici 100% pour remplir tout l'espace disponnible.</p> +Cette structure contient des informations de base , un peu de CSS pour definir la largeur et la hauteur de l élément canvas, ici 100% pour remplir tout l'espace disponnible. -<p>la premeire balise de script inclut la bibliotheque<strong> Three.js</strong> dans la page. nous ecrirons notre code dans la deuxieme balise script.</p> +la premeire balise de script inclut la bibliotheque **Three.js** dans la page. nous ecrirons notre code dans la deuxieme balise script. -<p>nous avons deja inclut deux variables d assitance pour stocké la alrgeur et la hauteur de la fenetre.</p> +nous avons deja inclut deux variables d assitance pour stocké la alrgeur et la hauteur de la fenetre. -<p>avant de poursuivre copier se code dans un fichier nommé index.html.</p> +avant de poursuivre copier se code dans un fichier nommé index.html. -<h2 id="Renderer_ou_Moteur_de_rendue">Renderer ou Moteur de rendue</h2> +## Renderer ou Moteur de rendue -<p>un Moteur de rendue est un outil qui affiche les scénes directement dans votre navigateur.Il existe plusieur moteur different :WebGL est la valeur par défaut, vous pouvez utilisercanvas,SVG,CSS et DOM . ils différent dans la façons dont il gere le rendu. Malgres leurs differences , l experience utilisateur sera la meme.</p> +un Moteur de rendue est un outil qui affiche les scénes directement dans votre navigateur.Il existe plusieur moteur different :WebGL est la valeur par défaut, vous pouvez utilisercanvas,SVG,CSS et DOM . ils différent dans la façons dont il gere le rendu. Malgres leurs differences , l experience utilisateur sera la meme. -<p>Grace à cette approche, une solution de secour peut etre utilisée , si une technologie n'est pas prise en charge par le navigatueur.</p> +Grace à cette approche, une solution de secour peut etre utilisée , si une technologie n'est pas prise en charge par le navigatueur. -<pre class="brush: js">var renderer = new THREE.WebGLRenderer({antialias:true}); +```js +var renderer = new THREE.WebGLRenderer({antialias:true}); renderer.setSize(WIDTH, HEIGHT); renderer.setClearColor(0xDDDDDD, 1); document.body.appendChild(renderer.domElement); -</pre> +``` -<p>Nous créons un nouveau rendu WebGL, définissons sa taille pour qu'elle corresponde à tout l'espace disponible à l'écran et ajoutons la structure DOM à la page. Vous avez peut-être remarqué le paramètre d'antialias dans la première ligne - cela rend les bords des formes plus fluides. La méthode setClearColor () définit notre arrière-plan sur une couleur gris clair, au lieu de la couleur noire par défaut.<br> - <br> - Ajoutez ce code dans notre deuxième balise script du fichier index.html, juste en dessous du commentaire JavaScript.</p> +Nous créons un nouveau rendu WebGL, définissons sa taille pour qu'elle corresponde à tout l'espace disponible à l'écran et ajoutons la structure DOM à la page. Vous avez peut-être remarqué le paramètre d'antialias dans la première ligne - cela rend les bords des formes plus fluides. La méthode setClearColor () définit notre arrière-plan sur une couleur gris clair, au lieu de la couleur noire par défaut. -<h2 id="Scene">Scene</h2> +Ajoutez ce code dans notre deuxième balise script du fichier index.html, juste en dessous du commentaire JavaScript. -<p>Une scène est l'endroit où tout se passe. Lors de la création de nouveaux objets dans la démo, nous les ajoutons tous à l'intérieur de la scène pour devenir visibles à l'écran. Dans <strong>three.js</strong>, la scène est représentée par un objet Scene. Créons-le, en ajoutant la ligne suivante sous nos lignes précédentes:</p> +## Scene -<pre class="brush: js">var scene = new THREE.Scene(); -</pre> +Une scène est l'endroit où tout se passe. Lors de la création de nouveaux objets dans la démo, nous les ajoutons tous à l'intérieur de la scène pour devenir visibles à l'écran. Dans **three.js**, la scène est représentée par un objet Scene. Créons-le, en ajoutant la ligne suivante sous nos lignes précédentes: -<p>plutard nous utiliserons la methode add() , pour ajouter des objets a cette scene.</p> +```js +var scene = new THREE.Scene(); +``` -<h2 id="Camera">Camera</h2> +plutard nous utiliserons la methode add() , pour ajouter des objets a cette scene. -<p>Nous avons la scène , mais nous devons encore ajouter une caméra pour voir notre travail - imaginez un film sans caméra. Les lignes suivantes mettent la caméra en place dans le système de coordonnées 3D et la pointent dans la direction de notre scène, afin que nous puissions enfin voir quelque chose:</p> +## Camera -<pre class="brush: js">var camera = new THREE.PerspectiveCamera(70, WIDTH/HEIGHT); +Nous avons la scène , mais nous devons encore ajouter une caméra pour voir notre travail - imaginez un film sans caméra. Les lignes suivantes mettent la caméra en place dans le système de coordonnées 3D et la pointent dans la direction de notre scène, afin que nous puissions enfin voir quelque chose: + +```js +var camera = new THREE.PerspectiveCamera(70, WIDTH/HEIGHT); camera.position.z = 50; scene.add(camera); -</pre> +``` + +Ajoutez les lignes ci-dessus à votre code, en dessous de celles précédemment ajoutées. -<p>Ajoutez les lignes ci-dessus à votre code, en dessous de celles précédemment ajoutées.<br> - <br> - Il existe d'autres types de camera (Cube, Orthographique), mais la plus simple est Perspective. Pour l'initialiser, nous devons définir son champ de vision et son rapport d'aspect: le premier est utilisé pour définir la quantité de vue, et le second est important pour que les objets à l'écran aient les bonnes proportions lors du rendu, et ne semblent pas étirés . Expliquons les valeurs que nous définissons pour le code ci-dessus:></p> +Il existe d'autres types de camera (Cube, Orthographique), mais la plus simple est Perspective. Pour l'initialiser, nous devons définir son champ de vision et son rapport d'aspect: le premier est utilisé pour définir la quantité de vue, et le second est important pour que les objets à l'écran aient les bonnes proportions lors du rendu, et ne semblent pas étirés . Expliquons les valeurs que nous définissons pour le code ci-dessus:> -<ul> - <li>La valeur que nous fixons pour le champ de vision, 70, est quelque chose que nous pouvons expérimenter: plus la valeur est élevée, plus la quantité de scène que la caméra affichera sera grande. Imaginez une vue de caméra normale, par opposition à un effet fish-eye, qui permet de voir beaucoup plus. La valeur par défaut est 50.</li> - <li>Le rapport hauteur / largeur est défini sur la largeur et la hauteur actuelles de la fenêtre afin qu'il soit ajusté dynamiquement. Nous pourrions définir un rapport fixe - par exemple 16 ⁄ 9, qui est le rapport d'aspect d'un téléviseur à écran large. La valeur par défaut est 1.</li> - <li>La position z, avec une valeur de 50 unités, est la distance entre la caméra et le centre de la scène sur l'axe z. Ici, nous reculons la caméra, afin que les objets de la scène puissent être visualisés. 50 se sent bien. Ce n'est ni trop près, ni trop loin, et la taille des objets leur permet de rester sur la scène, dans le champ de vision donné. Les valeurs x et y, si elles ne sont pas spécifiées, seront définies par défaut sur 0.</li> -</ul> +- La valeur que nous fixons pour le champ de vision, 70, est quelque chose que nous pouvons expérimenter: plus la valeur est élevée, plus la quantité de scène que la caméra affichera sera grande. Imaginez une vue de caméra normale, par opposition à un effet fish-eye, qui permet de voir beaucoup plus. La valeur par défaut est 50. +- Le rapport hauteur / largeur est défini sur la largeur et la hauteur actuelles de la fenêtre afin qu'il soit ajusté dynamiquement. Nous pourrions définir un rapport fixe - par exemple 16 ⁄ 9, qui est le rapport d'aspect d'un téléviseur à écran large. La valeur par défaut est 1. +- La position z, avec une valeur de 50 unités, est la distance entre la caméra et le centre de la scène sur l'axe z. Ici, nous reculons la caméra, afin que les objets de la scène puissent être visualisés. 50 se sent bien. Ce n'est ni trop près, ni trop loin, et la taille des objets leur permet de rester sur la scène, dans le champ de vision donné. Les valeurs x et y, si elles ne sont pas spécifiées, seront définies par défaut sur 0. -<p>Vous devez expérimenter ces valeurs et voir comment elles changent ce que vous voyez dans la scène. .</p> +Vous devez expérimenter ces valeurs et voir comment elles changent ce que vous voyez dans la scène. . -<div class="note"> -<p><strong>Note :</strong> Les valeurs de distance (par exemple pour la position z de la caméra) sont sans unité et peuvent être tout ce que vous jugez approprié pour votre scène: millimètres, mètres, pieds ou miles. </p> -</div> +> **Note :** Les valeurs de distance (par exemple pour la position z de la caméra) sont sans unité et peuvent être tout ce que vous jugez approprié pour votre scène: millimètres, mètres, pieds ou miles. -<h2 id="Rendu_de_la_scene">Rendu de la scene</h2> +## Rendu de la scene -<p>Tout est prêt, mais on ne voit toujours rien. Bien que nous ayons configuré le moteur de rendu, nous devons toujours effetué le rendu. Notre fonction render () fera ce travail, avec un peu d'aide de requestAnimationFrame (), ce qui fait que la scène sera restituée sur chaque image:</p> +Tout est prêt, mais on ne voit toujours rien. Bien que nous ayons configuré le moteur de rendu, nous devons toujours effetué le rendu. Notre fonction render () fera ce travail, avec un peu d'aide de requestAnimationFrame (), ce qui fait que la scène sera restituée sur chaque image: -<pre class="brush: js">function render() { +```js +function render() { requestAnimationFrame(render); renderer.render(scene, camera); } render(); -</pre> +``` -<p>On every new frame the <code>render</code> function is invoked, and the <code>renderer</code> renders the <code>scene</code> and the <code>camera</code>. Right after the function declaration, we're invoking it for the first time to start the loop, after which it will be used indefinitely.</p> +On every new frame the `render` function is invoked, and the `renderer` renders the `scene` and the `camera`. Right after the function declaration, we're invoking it for the first time to start the loop, after which it will be used indefinitely. -<p>Again, add this new code below your previous additions. Try saving the file and opening it in your browser. You should now see a gray window. Congratulations!</p> +Again, add this new code below your previous additions. Try saving the file and opening it in your browser. You should now see a gray window. Congratulations! -<h2 id="Geometry">Geometry</h2> +## Geometry -<p>Now our scene is properly rendering, we can start adding 3D shapes. To speed up development, Three.js provides a bunch of predefined primitives, which you can use to create shapes instantly in a single line of code. There's cubes, spheres, cylinders, and more complicated shapes available. Detail like drawing required vertices and faces, for a given shape, is handled by the Three framework, so we can focus on higher level coding. Let's start, by defining the geometry for a cube shape, adding the following just above the <code>render()</code> function:</p> +Now our scene is properly rendering, we can start adding 3D shapes. To speed up development, Three.js provides a bunch of predefined primitives, which you can use to create shapes instantly in a single line of code. There's cubes, spheres, cylinders, and more complicated shapes available. Detail like drawing required vertices and faces, for a given shape, is handled by the Three framework, so we can focus on higher level coding. Let's start, by defining the geometry for a cube shape, adding the following just above the `render()` function: -<pre class="brush: js">var boxGeometry = new THREE.BoxGeometry(10, 10, 10); -</pre> +```js +var boxGeometry = new THREE.BoxGeometry(10, 10, 10); +``` -<p>In this case, we define a simple cube that is 10 x 10 x 10 units. The geometry itself is not enough though, we also need a material that will be used for our shape.</p> +In this case, we define a simple cube that is 10 x 10 x 10 units. The geometry itself is not enough though, we also need a material that will be used for our shape. -<h2 id="Material">Material</h2> +## Material -<p>A material is what covers an object, the colors, or textures on its surface. In our case, we will choose a simple blue color to paint our box. There are a number of predefined materials which can be used: Basic, Phong, Lambert. Let's play with the last two later, but for now, the Basic one should be enough:</p> +A material is what covers an object, the colors, or textures on its surface. In our case, we will choose a simple blue color to paint our box. There are a number of predefined materials which can be used: Basic, Phong, Lambert. Let's play with the last two later, but for now, the Basic one should be enough: -<pre class="brush: js">var basicMaterial = new THREE.MeshBasicMaterial({color: 0x0095DD}); -</pre> +```js +var basicMaterial = new THREE.MeshBasicMaterial({color: 0x0095DD}); +``` -<p>Add this line below the previously added.</p> +Add this line below the previously added. -<p>Our material is now ready, what next?</p> +Our material is now ready, what next? -<h2 id="Mesh">Mesh</h2> +## Mesh -<p>To apply the material to a geometry, a mesh is used. This takes on a shape, and adds the specified material to every face:</p> +To apply the material to a geometry, a mesh is used. This takes on a shape, and adds the specified material to every face: -<pre class="brush: js">var cube = new THREE.Mesh(boxGeometry, basicMaterial); -</pre> +```js +var cube = new THREE.Mesh(boxGeometry, basicMaterial); +``` -<p>Again, add this line below the one you previously added.</p> +Again, add this line below the one you previously added. -<h2 id="Adding_the_cube_to_the_scene">Adding the cube to the scene</h2> +## Adding the cube to the scene -<p>We've now created a cube, using the geometry and material defined earlier. The last thing to do is to place the cube to our scene. Add this line below the previous one:</p> +We've now created a cube, using the geometry and material defined earlier. The last thing to do is to place the cube to our scene. Add this line below the previous one: -<pre class="brush: js">scene.add(cube); -</pre> +```js +scene.add(cube); +``` -<p>If you save, and refresh your Web browser, our object will now look like a square, because it's facing the camera. The good thing about objects, is that we can move them on the scene, however we want. For example, rotating and scaling as we like. Let's apply a little rotation to the cube, so we can see more than one face. Again, adding our code below the previous:</p> +If you save, and refresh your Web browser, our object will now look like a square, because it's facing the camera. The good thing about objects, is that we can move them on the scene, however we want. For example, rotating and scaling as we like. Let's apply a little rotation to the cube, so we can see more than one face. Again, adding our code below the previous: -<pre class="brush: js">cube.rotation.set(0.4, 0.2, 0); -</pre> +```js +cube.rotation.set(0.4, 0.2, 0); +``` -<p>Congratulations, you've created an object in a 3D environment! This might have proven easier than you first thought? Here's how it should look:</p> +Congratulations, you've created an object in a 3D environment! This might have proven easier than you first thought? Here's how it should look: -<p><img src="cube.png"></p> + -<p>And here's the code we have created so far:</p> +And here's the code we have created so far: -<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/bwup75fa/","","350")}}</p> +{{JSFiddleEmbed("https://jsfiddle.net/end3r/bwup75fa/","","350")}} -<p>You can also <a href="https://github.com/end3r/MDN-Games-3D/blob/gh-pages/Three.js/cube.html">check it out on GitHub</a>.</p> +You can also [check it out on GitHub](https://github.com/end3r/MDN-Games-3D/blob/gh-pages/Three.js/cube.html). -<h2 id="More_shapes_and_materials">More shapes and materials</h2> +## More shapes and materials -<p>Now we will add more shapes to the scene, and explore other shapes, materials, lighting, and more. Let's move the cube to the left, to make space for some friends. Adding the following line just below the previous one:</p> +Now we will add more shapes to the scene, and explore other shapes, materials, lighting, and more. Let's move the cube to the left, to make space for some friends. Adding the following line just below the previous one: -<pre class="brush: js">cube.position.x = -25; -</pre> +```js +cube.position.x = -25; +``` -<p>Now onto more shapes and materials. What might happen when you add a torus, wrapped in the Phong material? Try adding the following lines, just below the lines defining the cube.</p> +Now onto more shapes and materials. What might happen when you add a torus, wrapped in the Phong material? Try adding the following lines, just below the lines defining the cube. -<pre class="brush: js">var torusGeometry = new THREE.TorusGeometry(7, 1, 6, 12); +```js +var torusGeometry = new THREE.TorusGeometry(7, 1, 6, 12); var phongMaterial = new THREE.MeshPhongMaterial({color: 0xFF9500}); var torus = new THREE.Mesh(torusGeometry, phongMaterial); scene.add(torus); -</pre> +``` -<p>These lines will add a torus geometry; the <code>TorusGeometry()</code> method's parameters define, and the parameters are <code>radius</code>, <code>tube diameter</code>, <code>radial segment count</code>, and <code>tubular segment count</code>. The Phong material should look more glossy than the box's simple Basic material, though right now our torus will just look black.</p> +These lines will add a torus geometry; the `TorusGeometry()` method's parameters define, and the parameters are `radius`, `tube diameter`, `radial segment count`, and `tubular segment count`. The Phong material should look more glossy than the box's simple Basic material, though right now our torus will just look black. -<p>We can choose more fun predefined shapes. Let's play some more. Add the following lines, below those defining the torus:</p> +We can choose more fun predefined shapes. Let's play some more. Add the following lines, below those defining the torus: -<pre class="brush: js">var dodecahedronGeometry = new THREE.DodecahedronGeometry(7); +```js +var dodecahedronGeometry = new THREE.DodecahedronGeometry(7); var lambertMaterial = new THREE.MeshLambertMaterial({color: 0xEAEFF2}); var dodecahedron = new THREE.Mesh(dodecahedronGeometry, lambertMaterial); dodecahedron.position.x = 25; scene.add(dodecahedron); -</pre> +``` -<p>This time, we are creating a dodecahedron, a shape containing twelve flat faces. The parameter, <code>DodecahedronGeometry(),</code> defines the size of the object. We're using a Lambert material, similar to Phong, but should be less glossy. Again it's black, for now. We're moving the object to the right, so it's not in the same position as the box, or torus.</p> +This time, we are creating a dodecahedron, a shape containing twelve flat faces. The parameter, `DodecahedronGeometry(),` defines the size of the object. We're using a Lambert material, similar to Phong, but should be less glossy. Again it's black, for now. We're moving the object to the right, so it's not in the same position as the box, or torus. -<p>As mentioned above, the new objects currently just look black. To have both, the Phong and Lambert materials properly visible, we need to introduce a source of light.</p> +As mentioned above, the new objects currently just look black. To have both, the Phong and Lambert materials properly visible, we need to introduce a source of light. -<h2 id="Lights">Lights</h2> +## Lights -<p>There are various types of light sources available in Three.js. The most basic is <code>PointLight</code>, which works like a flashlight, shining a spotlight in a defined direction. Add the following lines, below your shape definitions:</p> +There are various types of light sources available in Three.js. The most basic is `PointLight`, which works like a flashlight, shining a spotlight in a defined direction. Add the following lines, below your shape definitions: -<pre class="brush: js">var light = new THREE.PointLight(0xFFFFFF); +```js +var light = new THREE.PointLight(0xFFFFFF); light.position.set(-10, 15, 50); scene.add(light); -</pre> +``` -<p>We define a white point of light, set its position a little away from the center of the scene, so it can light up some parts of the shapes, finally adding it to the scene. Now everything works as it should, all three shapes are visible. You should check the documentation for other types of lights, like Ambient, Directional, Hemisphere, or Spot. Experiment placing them on our scene, to see how they affect it.</p> +We define a white point of light, set its position a little away from the center of the scene, so it can light up some parts of the shapes, finally adding it to the scene. Now everything works as it should, all three shapes are visible. You should check the documentation for other types of lights, like Ambient, Directional, Hemisphere, or Spot. Experiment placing them on our scene, to see how they affect it. -<p><img src="shapes.png"></p> + -<p>This looks a little boring though. In a game, something is usually happening. We might see animations and such. So let's try breathing a little life into these shapes, by animating them!</p> +This looks a little boring though. In a game, something is usually happening. We might see animations and such. So let's try breathing a little life into these shapes, by animating them! -<h2 id="Animation">Animation</h2> +## Animation -<p>We already used rotation, to adjust the position of the cube. We can also scale the shapes, or change their positions. To show animation, we need to make changes to these values inside the render loop, so they update on each frame.</p> +We already used rotation, to adjust the position of the cube. We can also scale the shapes, or change their positions. To show animation, we need to make changes to these values inside the render loop, so they update on each frame. -<h3 id="Rotation">Rotation</h3> +### Rotation -<p>Rotating is straighforward. You add a value to a given direction of rotation on each frame. Add this line of code, right after the <code>requestAnimationFrame()</code> invocation inside the <code>render</code> function:</p> +Rotating is straighforward. You add a value to a given direction of rotation on each frame. Add this line of code, right after the `requestAnimationFrame()` invocation inside the `render` function: -<pre class="brush: js">cube.rotation.y += 0.01; -</pre> +```js +cube.rotation.y += 0.01; +``` -<p>This rotates the cube on every frame, by a tiny bit, so the animation looks smooth.</p> +This rotates the cube on every frame, by a tiny bit, so the animation looks smooth. -<h3 id="Scaling">Scaling</h3> +### Scaling -<p>We can also scale an object. Applying a constant value, we would make it grow, or shrink just once. Let's make things more interesting. First, we implement a helper variable, called <code>t,</code> for counting elapsed time. Add it right before the <code>render()</code> function:</p> +We can also scale an object. Applying a constant value, we would make it grow, or shrink just once. Let's make things more interesting. First, we implement a helper variable, called `t,` for counting elapsed time. Add it right before the `render()` function: -<pre class="brush: js">var t = 0; -</pre> +```js +var t = 0; +``` -<p>Now let's increase the value by a given constant value, on each frame of the animation. Add the following lines, just below the <code>requestAnimationFrame()</code> invocation:</p> +Now let's increase the value by a given constant value, on each frame of the animation. Add the following lines, just below the `requestAnimationFrame()` invocation: -<pre class="brush: js">t += 0.01; +```js +t += 0.01; torus.scale.y = Math.abs(Math.sin(t)); -</pre> +``` -<p>We use <code>Math.sin</code>, ending up with quite an interesting result. This scales the torus, repeating the process, as <code>sin</code> is a periodic function. We're wrapping the scale value in <code>Math.abs</code>, to pass the absolute values, greater or equal to 0. As sin is between -1 and 1, negative values might render out torus in unexpected way. In this case it looks black half the time.</p> +We use `Math.sin`, ending up with quite an interesting result. This scales the torus, repeating the process, as `sin` is a periodic function. We're wrapping the scale value in `Math.abs`, to pass the absolute values, greater or equal to 0. As sin is between -1 and 1, negative values might render out torus in unexpected way. In this case it looks black half the time. -<p>Now, onto movement.</p> +Now, onto movement. -<h3 id="Moving">Moving</h3> +### Moving -<p>Aside from rotation, and scaling, we can additionally move objects around the scene. Add the following, again just below our <code>requestAnimationFrame()</code> invocation:</p> +Aside from rotation, and scaling, we can additionally move objects around the scene. Add the following, again just below our `requestAnimationFrame()` invocation: -<pre class="brush: js">dodecahedron.position.y = -7*Math.sin(t*2); -</pre> +```js +dodecahedron.position.y = -7*Math.sin(t*2); +``` -<p>This will move the dodecahedron up and down, by applying the <code>sin()</code> value to the y axis on each frame, and a little adjustment to make it look cooler. Try changing these values, to see how it affects the animations.</p> +This will move the dodecahedron up and down, by applying the `sin()` value to the y axis on each frame, and a little adjustment to make it look cooler. Try changing these values, to see how it affects the animations. -<h2 id="Conclusion">Conclusion</h2> +## Conclusion -<p>Here's the final code:</p> +Here's the final code: -<p>{{JSFiddleEmbed("https://jsfiddle.net/rybr720u/","","350")}}</p> +{{JSFiddleEmbed("https://jsfiddle.net/rybr720u/","","350")}} -<p>You can also <a href="https://github.com/end3r/MDN-Games-3D/blob/gh-pages/Three.js/shapes.html">see it on GitHub</a> and <a href="https://github.com/end3r/MDN-Games-3D/">fork the repository</a>, if you want to play with it locally. Now you understand the basics of Three.js, you can jump back to the parent page, <a href="/fr/docs/Games/Techniques/3D_on_the_web">3D on the Web</a>.</p> +You can also [see it on GitHub](https://github.com/end3r/MDN-Games-3D/blob/gh-pages/Three.js/shapes.html) and [fork the repository](https://github.com/end3r/MDN-Games-3D/), if you want to play with it locally. Now you understand the basics of Three.js, you can jump back to the parent page, [3D on the Web](/fr/docs/Games/Techniques/3D_on_the_web). -<p>You could also try learning raw WebGL, to gain a better understanding of what's going on underneath. See our <a href="/fr/docs/Web/API/WebGL_API">WebGL documentation</a>.</p> +You could also try learning raw WebGL, to gain a better understanding of what's going on underneath. See our [WebGL documentation](/fr/docs/Web/API/WebGL_API). diff --git a/files/fr/games/techniques/3d_on_the_web/index.md b/files/fr/games/techniques/3d_on_the_web/index.md index 47d25bbffd..e921ad5af4 100644 --- a/files/fr/games/techniques/3d_on_the_web/index.md +++ b/files/fr/games/techniques/3d_on_the_web/index.md @@ -10,104 +10,96 @@ tags: - three.js translation_of: Games/Techniques/3D_on_the_web --- -<div>{{GamesSidebar}}</div> +{{GamesSidebar}} -<p> {{IncludeSubnav("/fr/docs/Jeux")}}</p> +{{IncludeSubnav("/fr/docs/Jeux")}} -<p>Pour des expériences de jeu riches sur le Web, l'arme de choix est WebGL, qui est fourni sur HTML {{htmlelement ("canvas")}}. WebGL est essentiellement un OpenGL ES 2.0 pour le Web - c'est une API JavaScript fournissant des outils pour créer des animations interactives riches et bien sûr aussi des jeux. Vous pouvez générer et rendre des graphiques 3D dynamiques avec du JavaScript accéléré.</p> +Pour des expériences de jeu riches sur le Web, l'arme de choix est WebGL, qui est fourni sur HTML {{htmlelement ("canvas")}}. WebGL est essentiellement un OpenGL ES 2.0 pour le Web - c'est une API JavaScript fournissant des outils pour créer des animations interactives riches et bien sûr aussi des jeux. Vous pouvez générer et rendre des graphiques 3D dynamiques avec du JavaScript accéléré. -<h2 id="Documentation_et_support_du_navigateur">Documentation et support du navigateur</h2> +## Documentation et support du navigateur -<p>La documentation et les spécifications du projet <a href="/fr/docs/Web/API/WebGL_API">WebGL</a> sont gérées par le <a href="https://www.khronos.org/">Groupe Khronos</a>, pas le W3C comme pour la plupart des API Web. Le support sur les navigateurs modernes est très bon, même sur mobile, donc vous n'avez pas trop à vous en soucier. Les principaux navigateurs prennent en charge WebGL et tout ce dont vous avez besoin est de vous concentrer sur l'optimisation des performances sur les appareils que vous utilisez.</p> +La documentation et les spécifications du projet [WebGL](/fr/docs/Web/API/WebGL_API) sont gérées par le [Groupe Khronos](https://www.khronos.org/), pas le W3C comme pour la plupart des API Web. Le support sur les navigateurs modernes est très bon, même sur mobile, donc vous n'avez pas trop à vous en soucier. Les principaux navigateurs prennent en charge WebGL et tout ce dont vous avez besoin est de vous concentrer sur l'optimisation des performances sur les appareils que vous utilisez. -<p>Il y a un effort continu pour rendre libre WebGL 2.0 (basé sur OpenGL ES 3.0) dans un proche avenir, ce qui apporterait de nombreuses améliorations et aiderait les développeurs à construire des jeux pour le Web moderne en utilisant le matériel puissant actuel.</p> +Il y a un effort continu pour rendre libre WebGL 2.0 (basé sur OpenGL ES 3.0) dans un proche avenir, ce qui apporterait de nombreuses améliorations et aiderait les développeurs à construire des jeux pour le Web moderne en utilisant le matériel puissant actuel. -<h2 id="Explication_des_bases_de_la_théorie_3D">Explication des bases de la théorie 3D</h2> +## Explication des bases de la théorie 3D -<p>Les bases de la théorie 3D s'articulent autour des formes représentées dans un espace 3D, avec un système de coordonnées utilisé pour calculer leurs positions. Consultez <a href="/fr/docs/Games/Techniques/3D_on_the_web/Basic_theory">notre article de base sur la théorie 3D</a> pour toutes les informations dont vous avez besoin.</p> +Les bases de la théorie 3D s'articulent autour des formes représentées dans un espace 3D, avec un système de coordonnées utilisé pour calculer leurs positions. Consultez [notre article de base sur la théorie 3D](/fr/docs/Games/Techniques/3D_on_the_web/Basic_theory) pour toutes les informations dont vous avez besoin. -<h2 id="Concepts_avancés">Concepts avancés</h2> +## Concepts avancés -<p>Vous pouvez faire beaucoup plus avec WebGL. Il y a des concepts avancés dans lesquels vous devriez plonger et en apprendre davantage — les "shaders", la détection de collision ou le dernier sujet brûlant — la réalité virtuelle sur le Web.</p> +Vous pouvez faire beaucoup plus avec WebGL. Il y a des concepts avancés dans lesquels vous devriez plonger et en apprendre davantage — les "shaders", la détection de collision ou le dernier sujet brûlant — la réalité virtuelle sur le Web. -<h3 id="Shaders">Shaders</h3> +### Shaders -<p>Il convient de distinguer les shaders, qui sont un cas particulier. Les Shaders utilisent GLSL, un langage d'ombrage OpenGL spécial avec une syntaxe similaire à C, qui est exécuté directement par le pipeline graphique. Ils peuvent être divisés en "Vertex Shaders" et "Fragment Shaders" (ou "Pixel Shaders") — le premier transforme les positions des formes en véritables coordonnées de dessin 3D, tandis que le second calcule les couleurs de rendu et d'autres attributs. Vous devriez absolument lire l'article <a href="/fr/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders">GLSL Shaders</a> pour en apprendre plus à leur sujet.</p> +Il convient de distinguer les shaders, qui sont un cas particulier. Les Shaders utilisent GLSL, un langage d'ombrage OpenGL spécial avec une syntaxe similaire à C, qui est exécuté directement par le pipeline graphique. Ils peuvent être divisés en "Vertex Shaders" et "Fragment Shaders" (ou "Pixel Shaders") — le premier transforme les positions des formes en véritables coordonnées de dessin 3D, tandis que le second calcule les couleurs de rendu et d'autres attributs. Vous devriez absolument lire l'article [GLSL Shaders](/fr/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders) pour en apprendre plus à leur sujet. -<h3 id="Détection_de_collision">Détection de collision</h3> +### Détection de collision -<p>Il est difficile d'imaginer un jeu sans la détection de collision — nous devons toujours mettre au point quand quelque chose frappe quelque chose d'autre. Nous avons des informations disponibles pour votre apprentissage de :</p> +Il est difficile d'imaginer un jeu sans la détection de collision — nous devons toujours mettre au point quand quelque chose frappe quelque chose d'autre. Nous avons des informations disponibles pour votre apprentissage de : -<ul> - <li><a href="/fr/docs/Games/Techniques/2D_collision_detection">détection de collision 2D</a></li> - <li><a href="/fr/docs/Games/Techniques/3D_collision_detection">détection de collision 3D</a></li> -</ul> +- [détection de collision 2D](/fr/docs/Games/Techniques/2D_collision_detection) +- [détection de collision 3D](/fr/docs/Games/Techniques/3D_collision_detection) -<h3 id="Réalité_virtuelle_sur_le_web">Réalité virtuelle sur le web</h3> +### Réalité virtuelle sur le web -<p>Le concept de réalité virtuelle n'est pas nouveau, mais il est en train de conquérir le web grâce à des avancées matérielles telles que l' <a href="https://www.oculus.com/en-us/rift/">Oculus Rift</a> et l'<a href="/fr/docs/Web/API/WebVR_API">API WebVR</a> (actuellement expérimental) pour capturer les informations du matériel de réalité virtuelle et les rendre disponibles pour les applications JavaScript. Pour en savoir plus, lisez <a href="/fr/docs/Games/Techniques/3D_on_the_web/WebVR">WebVR - Réalité virtuelle pour le Web</a>.</p> +Le concept de réalité virtuelle n'est pas nouveau, mais il est en train de conquérir le web grâce à des avancées matérielles telles que l' [Oculus Rift](https://www.oculus.com/en-us/rift/) et l'[API WebVR](/fr/docs/Web/API/WebVR_API) (actuellement expérimental) pour capturer les informations du matériel de réalité virtuelle et les rendre disponibles pour les applications JavaScript. Pour en savoir plus, lisez [WebVR - Réalité virtuelle pour le Web](/fr/docs/Games/Techniques/3D_on_the_web/WebVR). -<p>Il y a aussi la <a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame">construction d'une démo de base avec l'article A-Frame</a> qui montre comment il est facile de construire des environnements 3D pour la réalité virtuelle en utilisant le framework <a href="http://aframe.io/">A-Frame</a> .</p> +Il y a aussi la [construction d'une démo de base avec l'article A-Frame](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame) qui montre comment il est facile de construire des environnements 3D pour la réalité virtuelle en utilisant le framework [A-Frame](http://aframe.io/) . -<h2 id="Lessor_des_bibliothèques_et_des_cadres">L'essor des bibliothèques et des cadres</h2> +## L'essor des bibliothèques et des cadres -<p>Le codage de WebGL brut est assez complexe, mais vous aurez envie de le maîtriser à long terme, car vos projets seront plus avancés (consultez notre <a href="/fr/docs/Web/API/WebGL_API">documentation WebGL</a> pour commencer). Pour les projets de monde réel, vous utiliserez probablement aussi un "framework" pour accélérer le développement et vous aider à gérer le projet. L'utilisation d'un "framework" pour les jeux 3D permet également d'optimiser les performances, car les outils que vous utilisez vous permettent de vous concentrer sur la construction du jeu.</p> +Le codage de WebGL brut est assez complexe, mais vous aurez envie de le maîtriser à long terme, car vos projets seront plus avancés (consultez notre [documentation WebGL](/fr/docs/Web/API/WebGL_API) pour commencer). Pour les projets de monde réel, vous utiliserez probablement aussi un "framework" pour accélérer le développement et vous aider à gérer le projet. L'utilisation d'un "framework" pour les jeux 3D permet également d'optimiser les performances, car les outils que vous utilisez vous permettent de vous concentrer sur la construction du jeu. -<p>La bibliothèque 3D JavaScript la plus populaire est <a href="http://threejs.org/">Three.js</a>, un outil polyvalent qui rend les techniques 3D plus simples à implémenter. Il existe d'autres bibliothèques et cadres de développement de jeux populaires qui valent la peine d'être regardés ; <a href="https://aframe.io">A-Frame</a>, <a href="https://playcanvas.com/">PlayCanvas</a> et <a href="http://www.babylonjs.com/">Babylon.js</a> sont parmi les plus reconnaissables avec une documentation riche, des éditeurs en ligne et des communautés actives.</p> +La bibliothèque 3D JavaScript la plus populaire est [Three.js](http://threejs.org/), un outil polyvalent qui rend les techniques 3D plus simples à implémenter. Il existe d'autres bibliothèques et cadres de développement de jeux populaires qui valent la peine d'être regardés ; [A-Frame](https://aframe.io), [PlayCanvas](https://playcanvas.com/) et [Babylon.js](http://www.babylonjs.com/) sont parmi les plus reconnaissables avec une documentation riche, des éditeurs en ligne et des communautés actives. -<h3 id="Construction_dune_démo_de_base_avec_A-Frame">Construction d'une démo de base avec A-Frame</h3> +### Construction d'une démo de base avec A-Frame -<p>A-Frame est un "framework" web pour construire des expériences 3D et de la réalité virtuelle. Sous le capot, il s'agit d'un "framework" three.js avec un modèle déclaratif entité-composant, ce qui signifie que nous pouvons construire des scènes avec seulement du HTML. Voir la page <a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame">Construction d'une démo de base avec</a><a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame"> A-Frame</a> pour le processus étape par étape de création de la démo .</p> +A-Frame est un "framework" web pour construire des expériences 3D et de la réalité virtuelle. Sous le capot, il s'agit d'un "framework" three.js avec un modèle déclaratif entité-composant, ce qui signifie que nous pouvons construire des scènes avec seulement du HTML. Voir la page [Construction d'une démo de base avec](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame)[ A-Frame](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame) pour le processus étape par étape de création de la démo . -<h3 id="Construction_dune_démo_de_base_avec_Babylon.js">Construction d'une démo de base avec Babylon.js</h3> +### Construction d'une démo de base avec Babylon.js -<p>Babylon.js est l'un des moteurs de jeux 3D les plus populaires utilisés par les développeurs. Comme avec n'importe quelle autre bibliothèque 3D, il fournit des fonctions intégrées pour vous aider à implémenter les fonctionnalités 3D courantes plus rapidement. Voir la page <a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js">Construction d'une démo de base avec Babylon.js</a> sur les bases et l'utilisation de Babylon.js, y compris la mise en place d'un environnement de développement, la structuration du code HTML nécessaire et l'écriture du code JavaScript.</p> +Babylon.js est l'un des moteurs de jeux 3D les plus populaires utilisés par les développeurs. Comme avec n'importe quelle autre bibliothèque 3D, il fournit des fonctions intégrées pour vous aider à implémenter les fonctionnalités 3D courantes plus rapidement. Voir la page [Construction d'une démo de base avec Babylon.js](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js) sur les bases et l'utilisation de Babylon.js, y compris la mise en place d'un environnement de développement, la structuration du code HTML nécessaire et l'écriture du code JavaScript. -<h3 id="Construction_dune_démo_de_base_avec_PlayCanvas">Construction d'une démo de base avec PlayCanvas</h3> +### Construction d'une démo de base avec PlayCanvas -<p>PlayCanvas est un moteur de jeu 3D WebGL populaire ouvert sur GitHub, avec un éditeur disponible en ligne et une bonne documentation. Voir la page <a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas">Construction d'une démo de base avec PlayCanvas</a> pour des détails de haut niveau, et d'autres articles montrant comment créer des démos à l'aide de la bibliothèque PlayCanvas et de l'éditeur en ligne.</p> +PlayCanvas est un moteur de jeu 3D WebGL populaire ouvert sur GitHub, avec un éditeur disponible en ligne et une bonne documentation. Voir la page [Construction d'une démo de base avec PlayCanvas](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas) pour des détails de haut niveau, et d'autres articles montrant comment créer des démos à l'aide de la bibliothèque PlayCanvas et de l'éditeur en ligne. -<h3 id="Construction_dune_démo_de_base_avec_Three.js">Construction d'une démo de base avec Three.js</h3> +### Construction d'une démo de base avec Three.js -<p>Three.js, comme toute autre bibliothèque, vous donne un énorme avantage : au lieu d'écrire des centaines de lignes de code WebGL pour construire quelque chose d'intéressant, vous pouvez utiliser des fonctions intégrées pour le faire beaucoup plus facilement et plus rapidement. Voir la page <a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js">Construction d'une démo de base avec Three.js</a> pour le processus étape par étape de création de la démo .</p> +Three.js, comme toute autre bibliothèque, vous donne un énorme avantage : au lieu d'écrire des centaines de lignes de code WebGL pour construire quelque chose d'intéressant, vous pouvez utiliser des fonctions intégrées pour le faire beaucoup plus facilement et plus rapidement. Voir la page [Construction d'une démo de base avec Three.js](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js) pour le processus étape par étape de création de la démo . -<h3 id="Autres_outils">Autres outils</h3> +### Autres outils -<p>Les deux <a href="http://unity3d.com/">Unity</a> et <a href="https://www.unrealengine.com/">Unreal</a> peuvent exporter votre jeu vers <a href="/fr/docs/Web/API/WebGL_API">WebGL</a> avec <a href="/fr/docs/Games/Tools/asm.js">asm.js</a> , de sorte que vous êtes libre d'utiliser leurs outils et techniques pour construire des jeux qui seront exportés vers le web.</p> +Les deux [Unity](http://unity3d.com/) et [Unreal](https://www.unrealengine.com/) peuvent exporter votre jeu vers [WebGL](/fr/docs/Web/API/WebGL_API) avec [asm.js](/fr/docs/Games/Tools/asm.js) , de sorte que vous êtes libre d'utiliser leurs outils et techniques pour construire des jeux qui seront exportés vers le web. -<p><img alt="" src="shapes.png"></p> + -<h2 id="Où_aller_ensuite">Où aller ensuite</h2> +## Où aller ensuite -<p>Avec cet article, nous avons juste effleuré la surface de ce qu'il est possible de faire avec les technologies actuellement disponibles. Vous pouvez créer des jeux 3D immersifs, beaux et rapides à l'aide de WebGL, les bibliothèques et les frameworks s'appuient dessus.</p> +Avec cet article, nous avons juste effleuré la surface de ce qu'il est possible de faire avec les technologies actuellement disponibles. Vous pouvez créer des jeux 3D immersifs, beaux et rapides à l'aide de WebGL, les bibliothèques et les frameworks s'appuient dessus. -<h3 id="Code_source">Code source</h3> +### Code source -<p>Vous pouvez trouver tous les codes source de cette série de <a href="http://end3r.github.io/MDN-Games-3D/">démos sur GitHub</a>.</p> +Vous pouvez trouver tous les codes source de cette série de [démos sur GitHub](http://end3r.github.io/MDN-Games-3D/). -<h3 id="API">API</h3> +### API -<ul> - <li><a href="/fr/docs/Web/HTML/Canvas">Canvas API</a></li> - <li><a href="/fr/docs/Web/API/WebGL_API">WebGL API</a></li> - <li><a href="/fr/docs/Web/API/WebVR_API">WebVR API</a></li> -</ul> +- [Canvas API](/fr/docs/Web/HTML/Canvas) +- [WebGL API](/fr/docs/Web/API/WebGL_API) +- [WebVR API](/fr/docs/Web/API/WebVR_API) -<h3 id="Frameworks">Frameworks</h3> +### Frameworks -<ul> - <li><a href="http://threejs.org/">Three.js</a></li> - <li><a href="http://whitestormjs.xyz/">Whitestorm.js</a> (basé sur Three.js)</li> - <li><a href="https://playcanvas.com/">PlayCanvas</a></li> - <li><a href="http://www.babylonjs.com/">Babylon.js</a></li> - <li><a href="http://aframe.io/">A-Frame</a></li> -</ul> +- [Three.js](http://threejs.org/) +- [Whitestorm.js](http://whitestormjs.xyz/) (basé sur Three.js) +- [PlayCanvas](https://playcanvas.com/) +- [Babylon.js](http://www.babylonjs.com/) +- [A-Frame](http://aframe.io/) -<h3 id="Tutorials">Tutorials</h3> +### Tutorials -<ul> - <li><a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js">Construction d'une démo de base avec Three.js</a></li> - <li><a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas">Construction d'une démo de base avec PlayCanvas</a></li> - <li><a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js">Construction d'une démo de base avec Babylon.js</a></li> - <li><a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame">Construction d'une démo de base avec</a><a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame"> A-Frame</a></li> -</ul> +- [Construction d'une démo de base avec Three.js](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js) +- [Construction d'une démo de base avec PlayCanvas](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas) +- [Construction d'une démo de base avec Babylon.js](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js) +- [Construction d'une démo de base avec](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame)[ A-Frame](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame) |