javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278
							<!DOCTYPE html><html lang="fr"><head>
    <meta charset="utf-8">
    <title>Design réactif et </title>
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@threejs">
    <meta name="twitter:title" content="Three.js – Design réactif et ">
    <meta property="og:image" content="https://threejs.org/files/share.png">
    <link rel="shortcut icon" href="/files/favicon_white.ico" media="(prefers-color-scheme: dark)">
    <link rel="shortcut icon" href="/files/favicon.ico" media="(prefers-color-scheme: light)">

    <link rel="stylesheet" href="/manual/resources/lesson.css">
    <link rel="stylesheet" href="/manual/resources/lang.css">
  </head>
  <body>
    <div class="container">
      <div class="lesson-title">
        <h1>Design réactif et </h1>
      </div>
      <div class="lesson">
        <div class="lesson-main">
          <p>Ceci est le second article dans une série traitant de Three.js.
Le premier traitait <a href="fundamentals.html">des principes de base</a>.
Si vous ne l'avez pas encore lu, vous deviriez peut-être commencer par là.</p>
<p>Cet article explique comment rendre votre application Three.js adaptable
à n'importe quelle situation. Rendre une page web adaptable (<em>responsive</em>)
se réfère généralement à faire en sorte que la page s'affiche de manière
appropriée sur des écrans de taille différente, des ordinateurs de bureau
aux <em>smart-phones</em>, en passant par les tablettes.</p>
<p>Concernant Three.js, il y a d'ailleurs davantage de situations à traiter.
Par exemple, un éditeur 3D avec des contrôles à gauche, droite, en haut ou
en bas est quelque chose que nous voudrions gérer. Un schéma interactif
au milieu d'un document en est un autre exemple.</p>
<p>Le dernier exemple que nous avions utilisé est un canvas sans CSS et
sans taille :</p>
<pre class="prettyprint showlinemods notranslate lang-html" translate="no">&lt;canvas id="c"&gt;&lt;/canvas&gt;
</pre>
<p>Ce canvas a, par défaut, une taille de 300x150 pixels.
Dans le navigateur, la manière recommandée de fixer la taille
de quelque chose est d'utiliser CSS.</p>
<p>Paramétrons le canvas pour occuper complètement la page en ajoutant
du CSS :</p>
<pre class="prettyprint showlinemods notranslate lang-html" translate="no">&lt;style&gt;
html, body {
   margin: 0;
   height: 100%;
}
#c {
   width: 100%;
   height: 100%;
   display: block;
}
&lt;/style&gt;
</pre>
<p>En HTML, la balise <em>body</em> a une marge fixée à 5 pixels par défaut donc
la changer à 0 la retire. Modifier la hauteur de <em>html</em> et <em>body</em> à 100%
leur fait occuper toute la fenêtre. Sinon, ils ne sont seulement aussi large
que leur contenu.</p>
<p>Ensuite, nous faisons en sorte que l'élément <code class="notranslate" translate="no">id=c</code> fasse
100% de la taille de son conteneur qui est, dans ce cas, la balise body.</p>
<p>Finalement, nous passons le mode <code class="notranslate" translate="no">display</code> à <code class="notranslate" translate="no">block</code>.
Le mode d'affichage par défaut d'un canvas est <code class="notranslate" translate="no">inline</code>, ce qui implique
que des espaces peuvent être ajoutés à l'affichage.
En passant le canvas à <code class="notranslate" translate="no">block</code>, ce problème est supprimé.</p>
<p>Voici le résultat :</p>
<p></p><div translate="no" class="threejs_example_container notranslate">
  <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/responsive-no-resize.html"></iframe></div>
  <a class="threejs_center" href="/manual/examples/responsive-no-resize.html" target="_blank">Cliquer ici pour ouvrir dans une fenêtre séparée</a>
</div>

<p></p>
<p>Le canvas, comme nous le voyons, remplit maintenant la page mais il y a deux
problèmes. Tout d'abord, nos cubes sont étirés et ressemblent à des boîtes trop
hautes et trop larges. Ouvrez l'exemple dans sa propre fenêtre et
redimensionnez la, vous verrez comment les cubes s'en trouvent déformés
en hauteur et en largeur.</p>
<p><img src="../resources/images/resize-incorrect-aspect.png" width="407" class="threejs_center nobg"></p>
<p>Le second problème est qu'ils semblent affichés en basse résolution ou
à la fois flous et pixellisés. Si vous étirez beaucoup la fenêtre, vous verrez
pleinement le problème.</p>
<p><img src="../resources/images/resize-low-res.png" class="threejs_center nobg"></p>
<p>Tout d'abord, nous allons résoudre le problème d'étirement.
Pour cela, nous devons calquer l'aspect de la caméra sur celui
de la taille d'affichage du canvas. Nous pouvons le faire
en utilisant les propriétés <code class="notranslate" translate="no">clientWidth</code> et <code class="notranslate" translate="no">clientHeight</code> du canvas.</p>
<p>Nous mettons alors notre boucle de rendu comme cela :</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">function render(time) {
  time *= 0.001;

+  const canvas = renderer.domElement;
+  camera.aspect = canvas.clientWidth / canvas.clientHeight;
+  camera.updateProjectionMatrix();

  ...
</pre>
<p>A présent les cubes ne devraient plus être déformés.</p>
<p></p><div translate="no" class="threejs_example_container notranslate">
  <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/responsive-update-camera.html"></iframe></div>
  <a class="threejs_center" href="/manual/examples/responsive-update-camera.html" target="_blank">Cliquer ici pour ouvrir dans une fenêtre séparée</a>
</div>

<p></p>
<p>Ouvrez l'exemple dans une fenêtre séparée et redimensionnez la.
Vous devriez voir que les cubes ne sont plus étirés, que ce soit
en hauteur ou en largeur.
Ils restent corrects quelque soit l'aspect de la taille de la fenêtre.</p>
<p><img src="../resources/images/resize-correct-aspect.png" width="407" class="threejs_center nobg"></p>
<p>Maintenant résolvons le problème de la pixellisation.</p>
<p>Les éléments de type <em>canvas</em> ont deux tailles. La première
est celle du canvas affiché dans la page. C'est ce que nous paramétrons avec le CSS.
L'autre taille est le nombre de pixels dont est constitué le canvas lui-même.
Ceci n'est pas différent d'une image.
Par exemple, nous pouvons avoir une image de taille 128x64 et, en utilisant le CSS,
nous pouvons l'afficher avec une taille de 400x200.</p>
<pre class="prettyprint showlinemods notranslate lang-html" translate="no">&lt;img src="some128x64image.jpg" style="width:400px; height:200px"&gt;
</pre>
<p>La taille interne d'un canvas, sa résolution, est souvent appelée sa taille de tampon
de dessin (<em>drawingbuffer</em>). Dans Three.js, nous pouvons ajuster la taille
du canvas en appelant <code class="notranslate" translate="no">renderer.setSize</code>.
Quelle taille devons nous choisir ? La réponse la plus évidente est "la même taille que
celle du canvas". A nouveau, pour le faire, nous pouvons recourir
aux propriétés <code class="notranslate" translate="no">clientWidth</code> et <code class="notranslate" translate="no">clientHeight</code>.</p>
<p>Ecrivons une fonction qui vérifie si le rendu du canvas a la bonne taille et l'ajuste en conséquence.</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">function resizeRendererToDisplaySize(renderer) {
  const canvas = renderer.domElement;
  const width = canvas.clientWidth;
  const height = canvas.clientHeight;
  const needResize = canvas.width !== width || canvas.height !== height;
  if (needResize) {
    renderer.setSize(width, height, false);
  }
  return needResize;
}
</pre>
<p>Remarquez que nous vérifions si le canvas a réellement besoin d'être redimensionné.
Le redimensionnement est une partie intéressante de la spécification du canvas
et il est mieux de ne pas lui donner à nouveau la même taille s'il est déjà
à la dimension que nous voulons.</p>
<p>Une fois que nous savons si le redimensionnement est nécessaire ou non, nous
appelons <code class="notranslate" translate="no">renderer.setSize</code> et lui passons les nouvelles largeur et hauteur.
Il est important de passer <code class="notranslate" translate="no">false</code> en troisième.
<code class="notranslate" translate="no">render.setSize</code> modifie par défaut la taille du canvas dans le CSS, mais ce n'est
pas ce que nous voulons. Nous souhaitons que le navigateur continue à fonctionner
comme pour les autres éléments, en utilisant le CSS pour déterminer la
taille d'affichage d'un élément. Nous ne voulons pas que les canvas utilisés
par Three.js aient un comportement différent des autres éléments.</p>
<p>Remarquez que notre fonction renvoie <em>true</em> si le canvas a été redimensionné.
Nous pouvons l'utiliser pour vérifier si d'autre choses doivent être mises à jour.
Modifions à présent notre boucle de rendu pour utiliser la nouvelle fonction :</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">function render(time) {
  time *= 0.001;

+  if (resizeRendererToDisplaySize(renderer)) {
+    const canvas = renderer.domElement;
+    camera.aspect = canvas.clientWidth / canvas.clientHeight;
+    camera.updateProjectionMatrix();
+  }

  ...
</pre>
<p>Puisque l'aspect ne change que si la taille d'affichage du canvas change,
nous ne modifions l'aspect de la caméra que si <code class="notranslate" translate="no">resizeRendererToDisplaySize</code>
retourne <code class="notranslate" translate="no">true</code>.</p>
<p></p><div translate="no" class="threejs_example_container notranslate">
  <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/responsive.html"></iframe></div>
  <a class="threejs_center" href="/manual/examples/responsive.html" target="_blank">Cliquer ici pour ouvrir dans une fenêtre séparée</a>
</div>

<p></p>
<p>Le rendu devrait à présent avoir une résolution correspondant à
la taille d'affichage du canvas.</p>
<p>Afin de comprendre pourquoi il faut laisser le CSS gérer le redimensionnement,
prenons notre code et mettons le dans un <a href="../examples/threejs-responsive.js">fichier <code class="notranslate" translate="no">.js</code> séparé</a>. Voici donc quelques autres exemples où nous avons laissé le CSS choisir la taille et remarquez que nous n'avons
eu aucun code à modifier pour qu'ils fonctionnent.</p>
<p>Mettons nos cubes au milieu d'un paragraphe de texte.</p>
<p></p><div translate="no" class="threejs_example_container notranslate">
  <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/responsive-paragraph.html&amp;startPane=html"></iframe></div>
  <a class="threejs_center" href="/manual/examples/responsive-paragraph.html" target="_blank">Cliquer ici pour ouvrir dans une fenêtre séparée</a>
</div>

<p></p>
<p>et voici notre même code utilisé dans un éditeur où la zone de contrôle à droite peut être redimensionnée.</p>
<p></p><div translate="no" class="threejs_example_container notranslate">
  <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/responsive-editor.html&amp;startPane=html"></iframe></div>
  <a class="threejs_center" href="/manual/examples/responsive-editor.html" target="_blank">Cliquer ici pour ouvrir dans une fenêtre séparée</a>
</div>

<p></p>
<p>Le point important à remarquer est que le code n'est pas modifié, seulement
le HTML et le CSS.</p>
<h2 id="g-rer-les-affichages-hd-dpi">Gérer les affichages HD-DPI</h2>
<p>HD-DPI est l'acronyme pour <em>high-density dot per inch</em>,
autrement dit, les écrans à haute densité d'affichage.
C'est le cas de la plupart des Macs, des machines sous Windows
ainsi que des smartphones.</p>
<p>La façon dont cela fonctionne dans le navigateur est
qu'il utilise les pixels CSS pour mettre à jour la taille
qui est supposée être la même quelque soit la résolution de
l'affichage. Le navigateur effectue le rendu du texte avec davantage
de détails mais la même taille physique.</p>
<p>Il y a plusieurs façons de gérer les HD-DPI avec Three.js.</p>
<p>La première façon est de ne rien faire de spécial. Cela
est, de manière discutable, le plus commun. Effectuer le
rendu de graphismes 3D réclame beaucoup de puissance de calcul au GPU
(<em>Graphics Processing Units</em>, les processeurs dédiés de carte graphique).
Les GPUs des smartphones ont moins de puissance que ceux des ordinateurs de bureau,
du moins en 2018, et pourtant les téléphones mobiles ont des affichages
haute résolution. Le haut de gamme actuel pour les smartphones a un ratio
HD-DPI de 3x, ce qui signifie que pour chaque pixel d'un affichage non HD-DPI,
ces téléphones ont 9 pixels. Il y a donc 9 fois plus de travail
pour le rendu.</p>
<p>Calculer pour 9 pixels nécessite des ressources. Donc, si
nous laissons le code comme cela, nous calculerons pour 1 pixel
et le navigateur le dessinera avec 3 fois sa taille (3 x 3 = 9 pixels).</p>
<p>Pour toute application Three.js lourde, c'est probablement ce que vous
voulez sinon vous risquez d'avoir un taux de rafraîchissement faible (<em>framerate</em>).</p>
<p>Ceci étant dit, si vous préférez effectuer le rendu à la résolution de l'appareil,
voici quelques façons de le faire en Three.js.</p>
<p>La première est d'indiquer à Three.js le facteur de multiplication de la résolution
en utilisant <code class="notranslate" translate="no">renderer.setPixelRatio</code>. Nous pouvons demander au navigateur ce
facteur entre les pixels CSS et les pixels du périphérique et les passer à Three.js</p>
<pre class="prettyprint showlinemods notranslate notranslate" translate="no"> renderer.setPixelRatio(window.devicePixelRatio);
</pre><p>Après cela, tout appel à <code class="notranslate" translate="no">renderer.setSize</code> va automatiquement
utiliser la taille que vous avez demandé, multiplié par le
ratio que vous avez demandé.
<strong>Ceci est fortement DÉCONSEILLÉ</strong>. Voir ci-dessous.</p>
<p>L'autre façon est de le faire par soi-même quand on redimensionne le canvas.</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">    function resizeRendererToDisplaySize(renderer) {
      const canvas = renderer.domElement;
      const pixelRatio = window.devicePixelRatio;
      const width  = canvas.clientWidth  * pixelRatio | 0;
      const height = canvas.clientHeight * pixelRatio | 0;
      const needResize = canvas.width !== width || canvas.height !== height;
      if (needResize) {
        renderer.setSize(width, height, false);
      }
      return needResize;
    }
</pre>
<p>Cette seconde façon est objectivement meilleure. Pourquoi ? Parce que cela signifie
que nous avons ce que nous avons demandé. Il y a plusieurs cas où,
quand on utilise Three.js, nous avons besoin de connaître la taille effective
du tampon d'affichage du canvas. Par exemple, quand on réalise un filtre de
post-processing, ou si nous faisons un <em>shader</em> qui accède à <code class="notranslate" translate="no">gl_FragCoord</code>,
si nous sommes en train de faire une capture d'écran, ou en train de lire les pixels
pour une sélection par GPU, pour dessiner dans un canvas 2D, etc...
Il y a plusieurs cas où, si nous utilisons <code class="notranslate" translate="no">setPixelRatio</code> alors notre
taille effective est différente de la taille que nous avons demandé et nous
aurons alors à deviner quand utiliser la taille demandée ou la taille utilisée
par Three.js.
En le faisant par soi-même, nous savons toujours que la taille utilisée
est celle que nous avons demandé. Il n'y a aucun cas où cela se fait tout
seul autrement.</p>
<p>Voici un exemple utilisant le code vu plus haut.</p>
<p></p><div translate="no" class="threejs_example_container notranslate">
  <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/responsive-hd-dpi.html"></iframe></div>
  <a class="threejs_center" href="/manual/examples/responsive-hd-dpi.html" target="_blank">Cliquer ici pour ouvrir dans une fenêtre séparée</a>
</div>

<p></p>
<p>Il vous est peut-être difficile de voir la différence, mais si vous avez
un affichage HD-DPI et que vous comparez cet exemple aux autres plus
haut, vous devriez remarquer que les arêtes sont plus vives.</p>
<p>Cet article a couvert un sujet très basique mais fondamental.
Dans l'article suivant, nous allons rapidement
<a href="primitives.html">passer en revue les primitives de base proposées par Three.js</a>.</p>

        </div>
      </div>
    </div>
  
  <script src="/manual/resources/prettify.js"></script>
  <script src="/manual/resources/lesson.js"></script>


</body></html>