setup.html 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. <!DOCTYPE html><html lang="fr"><head>
  2. <meta charset="utf-8">
  3. <title>Configuration</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">
  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</h1>
  25. </div>
  26. <div class="lesson">
  27. <div class="lesson-main">
  28. <p>Cet article fait partie d'une série d'articles sur three.js.
  29. Le premier article portait sur <a href="fundamentals.html">les fondamentaux de three.js</a>.
  30. Si vous ne l'avez pas encore lu, vous pourriez vouloir commencer par là.</p>
  31. <p>Avant d'aller plus loin, nous devons parler de la configuration de votre
  32. ordinateur en tant qu'environnement de développement. En particulier, pour des raisons de sécurité,
  33. WebGL ne peut pas utiliser directement les images de votre disque dur. Cela signifie
  34. que pour développer, vous devez utiliser un serveur web. Heureusement,
  35. les serveurs web de développement sont très faciles à configurer et à utiliser.</p>
  36. <p>Tout d'abord, si vous le souhaitez, vous pouvez télécharger l'intégralité de ce site à partir de <a href="https://github.com/gfxfundamentals/threejsfundamentals/archive/gh-pages.zip">ce lien</a>.
  37. Une fois téléchargé, double-cliquez sur le fichier zip pour décompresser les fichiers.</p>
  38. <p>Ensuite, téléchargez l'un de ces serveurs web simples.</p>
  39. <p>Si vous préférez un serveur web avec une interface utilisateur, il existe
  40. <a href="https://greggman.github.io/servez">Servez</a></p>
  41. <p></p><div class="threejs_image border">
  42. <img class="" src="../resources/servez.gif">
  43. </div>
  44. <p></p>
  45. <p>Il suffit de le pointer vers le dossier où vous avez décompressé les fichiers, cliquez sur "Démarrer", puis rendez-vous
  46. dans votre navigateur à l'adresse <a href="http://localhost:8080/"><code class="notranslate" translate="no">http://localhost:8080/</code></a> ou si vous souhaitez
  47. parcourir les exemples, allez à l'adresse <a href="http://localhost:8080/threejs"><code class="notranslate" translate="no">http://localhost:8080/threejs</code></a>.</p>
  48. <p>Pour arrêter le service, cliquez sur stop ou quittez Servez.</p>
  49. <p>Si vous préférez la ligne de commande (c'est mon cas), une autre solution est d'utiliser <a href="https://nodejs.org">node.js</a>.
  50. Téléchargez-le, installez-le, puis ouvrez une fenêtre d'invite de commandes / console / terminal. Si vous êtes sous Windows, le programme d'installation ajoutera une "Invite de commandes Node" spéciale, utilisez donc celle-ci.</p>
  51. <p>Ensuite, installez <a href="https://github.com/greggman/servez-cli"><code class="notranslate" translate="no">servez</code></a> en tapant</p>
  52. <pre class="prettyprint showlinemods notranslate notranslate" translate="no">npm -g install servez
  53. </pre><p>Si vous êtes sur OSX, utilisez</p>
  54. <pre class="prettyprint showlinemods notranslate notranslate" translate="no">sudo npm -g install servez
  55. </pre><p>Une fois que vous avez fait cela, tapez</p>
  56. <pre class="prettyprint showlinemods notranslate notranslate" translate="no">servez path/to/folder/where/you/unzipped/files
  57. </pre><p>Ou si vous êtes comme moi</p>
  58. <pre class="prettyprint showlinemods notranslate notranslate" translate="no">cd path/to/folder/where/you/unzipped/files
  59. servez
  60. </pre><p>Il devrait afficher quelque chose comme</p>
  61. <p></p><div class="threejs_image ">
  62. <img class="" src="../resources/servez-response.png">
  63. </div>
  64. <p></p>
  65. <p>Puis, dans votre navigateur, allez à l'adresse <a href="http://localhost:8080/"><code class="notranslate" translate="no">http://localhost:8080/</code></a>.</p>
  66. <p>Si vous ne spécifiez pas de chemin, servez servira le dossier actuel.</p>
  67. <p>Si aucune de ces options ne vous convient,
  68. <a href="https://stackoverflow.com/questions/12905426/what-is-a-faster-alternative-to-pythons-servez-or-simplehttpserver">il existe de nombreux autres serveurs simples parmi lesquels choisir</a>.</p>
  69. <p>Maintenant que vous avez configuré un serveur, nous pouvons passer aux <a href="textures.html">textures</a>.</p>
  70. </div>
  71. </div>
  72. </div>
  73. <script src="../resources/prettify.js"></script>
  74. <script src="../resources/lesson.js"></script>
  75. </body></html>
粤ICP备19079148号