setup.html 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. <!DOCTYPE html><html lang="fr"><head>
  2. <meta charset="utf-8">
  3. <title>Configuration de </title>
  4. <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  5. <meta name="twitter:card" content="summary_large_image">
  6. <meta name="twitter:site" content="@threejs">
  7. <meta name="twitter:title" content="Three.js – Configuration de ">
  8. <meta property="og:image" content="https://threejs.org/files/share.png">
  9. <link rel="shortcut icon" href="../../files/favicon_white.ico" media="(prefers-color-scheme: dark)">
  10. <link rel="shortcut icon" href="../../files/favicon.ico" media="(prefers-color-scheme: light)">
  11. <link rel="stylesheet" href="../resources/lesson.css">
  12. <link rel="stylesheet" href="../resources/lang.css">
  13. <script type="importmap">
  14. {
  15. "imports": {
  16. "three": "../../build/three.module.js"
  17. }
  18. }
  19. </script>
  20. </head>
  21. <body>
  22. <div class="container">
  23. <div class="lesson-title">
  24. <h1>Configuration de </h1>
  25. </div>
  26. <div class="lesson">
  27. <div class="lesson-main">
  28. <p>Cette article fait parti d'une série consacrée à Three.js. Le premier article traité des <a href="fundamentals.html">fondements de Three.js</a>.
  29. Si vous ne l'avez pas encore lu, vous devriez peut-être commencer par là.</p>
  30. <p>Avant d'aller plus loin, parlons du paramètrage de votre environnement de travail. Pour des raisons de sécurité
  31. WebGL ne peut pas utiliser des images provenant de votre disque dur. Cela signifie qu'il faille utiliser
  32. un serveur web. Heureusement, ils sont très facile à utiliser.</p>
  33. <p>Tout d'abord, si vous le souhaitez, vous pouvez télécharger l'intégralité de ce site depuis <a href="https://github.com/gfxfundamentals/threejsfundamentals/archive/gh-pages.zip">ce lien</a>.
  34. Une fois téléchargé, dézippez le dossier. </p>
  35. <p>Ensuite, téléchargez l'un des web serveurs suivants.</p>
  36. <p>Si vous en préférez un avec une interface graphique, voici <a href="https://greggman.github.io/servez">Servez</a></p>
  37. <p></p><div class="threejs_image border">
  38. <img class="" src="../resources/servez.gif">
  39. </div>
  40. <p></p>
  41. <p>Pointez-le simplement sur le dossier où vous avez décompressé les fichiers, cliquez sur "Démarrer", puis accédez-y dans votre navigateur à l'adresse suivante <a href="http://localhost:8080/"><code class="notranslate" translate="no">http://localhost:8080/</code></a> ou si vous voulez souhaitez parcourir les exemples, accédez à <a href="http://localhost:8080/threejs"><code class="notranslate" translate="no">http://localhost:8080/threejs</code></a>.</p>
  42. <p>Pour arrêter le serveur, cliquez sur stop ou quittez Servez.</p>
  43. <p>Si vous préférez la ligne de commande, une autre façon consiste à utiliser <a href="https://nodejs.org">node.js</a>.
  44. Téléchargez-le, installez-le, puis ouvrez une fenêtre d'invite de commande / console / terminal. Si vous êtes sous Windows, le programme d'installation ajoutera une "Invite de commande de nœud" spéciale, alors utilisez-la.</p>
  45. <p>Ensuite installez <a href="https://github.com/greggman/servez-cli"><code class="notranslate" translate="no">servez</code></a> avec ces commandes</p>
  46. <pre class="prettyprint showlinemods notranslate notranslate" translate="no">npm -g install servez
  47. </pre><p>Ou si vous êtes sous OSX</p>
  48. <pre class="prettyprint showlinemods notranslate notranslate" translate="no">sudo npm -g install servez
  49. </pre><p>Une fois que c'est fait, tapez cette commande</p>
  50. <pre class="prettyprint showlinemods notranslate notranslate" translate="no">servez path/to/folder/where/you/unzipped/files
  51. </pre><p>Ou si vous êtes comme moi</p>
  52. <pre class="prettyprint showlinemods notranslate notranslate" translate="no">cd path/to/folder/where/you/unzipped/files
  53. servez
  54. </pre><p>Il devrait imprimer quelque chose comme</p>
  55. <p></p><div class="threejs_image ">
  56. <img class="" src="../resources/servez-response.png">
  57. </div>
  58. <p></p>
  59. <p>Ensuite, ouvrez <a href="http://localhost:8080/"><code class="notranslate" translate="no">http://localhost:8080/</code></a> dans votre navigateur.</p>
  60. <p>Si vous ne spécifiez pas de chemin, Servez choisira le dossier courant.</p>
  61. <p>Si ces options ne vous conviennent pas, vous pouvez choisir
  62. <a href="https://stackoverflow.com/questions/12905426/what-is-a-faster-alternative-to-pythons-servez-or-simplehttpserver">d'autres alternatives</a>.</p>
  63. <p>Maintenant que vous avez un serveur configuré, nous pouvons passer aux <a href="textures.html">textures</a>.</p>
  64. </div>
  65. </div>
  66. </div>
  67. <script src="../resources/prettify.js"></script>
  68. <script src="../resources/lesson.js"></script>
  69. </body></html>