You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
289 lines
17 KiB
289 lines
17 KiB
<!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">
|
|
<!-- Import maps polyfill -->
|
|
<!-- Remove this when import maps will be widely supported -->
|
|
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
|
|
|
|
<script type="importmap">
|
|
{
|
|
"imports": {
|
|
"three": "../../build/three.module.js"
|
|
}
|
|
}
|
|
</script>
|
|
</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"><canvas id="c"></canvas>
|
|
</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"><style>
|
|
html, body {
|
|
margin: 0;
|
|
height: 100%;
|
|
}
|
|
#c {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
}
|
|
</style>
|
|
</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"><img src="some128x64image.jpg" style="width:400px; height:200px">
|
|
</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&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&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>
|