samien
/
three.js
espejo de https://github.com/mrdoob/three.js.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314
							<!DOCTYPE html><html lang="fr"><head>
    <meta charset="utf-8">
    <title>Matériaux</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 – Matériaux">
    <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="../resources/lesson.css">
    <link rel="stylesheet" href="../resources/lang.css">
<script type="importmap">
{
  "imports": {
    "three": "../../build/three.module.js"
  }
}
</script>
  </head>
  <body>
    <div class="container">
      <div class="lesson-title">
        <h1>Matériaux</h1>
      </div>
      <div class="lesson">
        <div class="lesson-main">
          <p>Cet article fait partie d'une série d'articles sur three.js. Le
premier article est <a href="fundamentals.html">les bases de three.js</a>. Si
vous ne l'avez pas encore lu et que vous débutez avec three.js, vous pourriez
vouloir commencer par là.</p>
<p>Three.js propose plusieurs types de matériaux.
Ils définissent comment les objets apparaîtront dans la scène.
Les matériaux que vous utilisez dépendent vraiment de ce que vous essayez
d'accomplir.</p>
<p>Il existe 2 manières de définir la plupart des propriétés des matériaux. L'une
au moment de la création, ce que nous avons déjà vu.</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const material = new THREE.MeshPhongMaterial({
  color: 0xFF0000,    // rouge (peut aussi utiliser une chaîne de couleur CSS ici)
  flatShading: true,
});
</pre>
<p>L'autre est après la création</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const material = new THREE.MeshPhongMaterial();
material.color.setHSL(0, 1, .5);  // rouge
material.flatShading = true;
</pre>
<p>notez que les propriétés de type <a href="/docs/#api/en/math/Color"><code class="notranslate" translate="no">THREE.Color</code></a> peuvent être définies de plusieurs manières.</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">material.color.set(0x00FFFF);    // comme le style #RRGGBB de CSS
material.color.set(cssString);   // n'importe quelle couleur CSS, par exemple 'purple', '#F32',
                                 // 'rgb(255, 127, 64)',
                                 // 'hsl(180, 50%, 25%)'
material.color.set(someColor)    // une autre THREE.Color
material.color.setHSL(h, s, l)   // où h, s et l sont de 0 à 1
material.color.setRGB(r, g, b)   // où r, g et b sont de 0 à 1
</pre>
<p>Et au moment de la création, vous pouvez passer soit un nombre hexadécimal, soit une chaîne CSS</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const m1 = new THREE.MeshBasicMaterial({color: 0xFF0000});         // rouge
const m2 = new THREE.MeshBasicMaterial({color: 'red'});            // rouge
const m3 = new THREE.MeshBasicMaterial({color: '#F00'});           // rouge
const m4 = new THREE.MeshBasicMaterial({color: 'rgb(255,0,0)'});   // rouge
const m5 = new THREE.MeshBasicMaterial({color: 'hsl(0,100%,50%)'}); // rouge
</pre>
<p>Passons donc en revue l'ensemble des matériaux de three.js.</p>
<p>Le <a href="/docs/#api/en/materials/MeshBasicMaterial"><code class="notranslate" translate="no">MeshBasicMaterial</code></a> n'est pas affecté par les lumières.</p>
<p>Le <a href="/docs/#api/en/materials/MeshLambertMaterial"><code class="notranslate" translate="no">MeshLambertMaterial</code></a> calcule l'éclairage uniquement aux sommets, contrairement au <a href="/docs/#api/en/materials/MeshPhongMaterial"><code class="notranslate" translate="no">MeshPhongMaterial</code></a> qui calcule l'éclairage à chaque pixel. Le <a href="/docs/#api/en/materials/MeshPhongMaterial"><code class="notranslate" translate="no">MeshPhongMaterial</code></a>
prend également en charge les reflets spéculaires.</p>
<div class="spread">
  <div>
    <div data-diagram="MeshBasicMaterial"></div>
    <div class="code">Basique</div>
  </div>
  <div>
    <div data-diagram="MeshLambertMaterial"></div>
    <div class="code">Lambert</div>
  </div>
  <div>
    <div data-diagram="MeshPhongMaterial"></div>
    <div class="code">Phong</div>
  </div>
</div>
<div class="spread">
  <div>
    <div data-diagram="MeshBasicMaterialLowPoly"></div>
  </div>
  <div>
    <div data-diagram="MeshLambertMaterialLowPoly"></div>
  </div>
  <div>
    <div data-diagram="MeshPhongMaterialLowPoly"></div>
  </div>
</div>
<div class="threejs_center code">modèles low-poly avec les mêmes matériaux</div>

<p>Le paramètre <code class="notranslate" translate="no">shininess</code> du <a href="/docs/#api/en/materials/MeshPhongMaterial"><code class="notranslate" translate="no">MeshPhongMaterial</code></a> détermine la <em>brillance</em> du reflet spéculaire. Par défaut, il est de 30.</p>
<div class="spread">
  <div>
    <div data-diagram="MeshPhongMaterialShininess0"></div>
    <div class="code">shininess: 0</div>
  </div>
  <div>
    <div data-diagram="MeshPhongMaterialShininess30"></div>
    <div class="code">shininess: 30</div>
  </div>
  <div>
    <div data-diagram="MeshPhongMaterialShininess150"></div>
    <div class="code">shininess: 150</div>
  </div>
</div>

<p>Notez que définir la propriété <code class="notranslate" translate="no">emissive</code> sur une couleur pour un
<a href="/docs/#api/en/materials/MeshLambertMaterial"><code class="notranslate" translate="no">MeshLambertMaterial</code></a> ou un <a href="/docs/#api/en/materials/MeshPhongMaterial"><code class="notranslate" translate="no">MeshPhongMaterial</code></a> et définir la <code class="notranslate" translate="no">color</code> en noir
(et <code class="notranslate" translate="no">shininess</code> à 0 pour phong) finit par ressembler exactement au <a href="/docs/#api/en/materials/MeshBasicMaterial"><code class="notranslate" translate="no">MeshBasicMaterial</code></a>.</p>
<div class="spread">
  <div>
    <div data-diagram="MeshBasicMaterialCompare"></div>
    <div class="code">
      <div>Basique</div>
      <div>color: 'purple'</div>
    </div>
  </div>
  <div>
    <div data-diagram="MeshLambertMaterialCompare"></div>
    <div class="code">
      <div>Lambert</div>
      <div>color: 'black'</div>
      <div>emissive: 'purple'</div>
    </div>
  </div>
  <div>
    <div data-diagram="MeshPhongMaterialCompare"></div>
    <div class="code">
      <div>Phong</div>
      <div>color: 'black'</div>
      <div>emissive: 'purple'</div>
      <div>shininess: 0</div>
    </div>
  </div>
</div>

<p>Pourquoi avoir les 3 alors que <a href="/docs/#api/en/materials/MeshPhongMaterial"><code class="notranslate" translate="no">MeshPhongMaterial</code></a> peut faire les mêmes choses que <a href="/docs/#api/en/materials/MeshBasicMaterial"><code class="notranslate" translate="no">MeshBasicMaterial</code></a>
et <a href="/docs/#api/en/materials/MeshLambertMaterial"><code class="notranslate" translate="no">MeshLambertMaterial</code></a> ? La raison est que le matériau le plus sophistiqué
nécessite plus de puissance GPU pour être dessiné. Sur un GPU plus lent,
comme celui d'un téléphone portable, vous pourriez vouloir réduire la
puissance GPU nécessaire pour dessiner votre scène en utilisant l'un des
matériaux moins complexes. Il s'ensuit également que si vous n'avez pas
besoin des fonctionnalités supplémentaires, utilisez le matériau le plus simple.
Si vous n'avez pas besoin de l'éclairage et des reflets spéculaires,
utilisez le <a href="/docs/#api/en/materials/MeshBasicMaterial"><code class="notranslate" translate="no">MeshBasicMaterial</code></a>.</p>
<p>Le <a href="/docs/#api/en/materials/MeshToonMaterial"><code class="notranslate" translate="no">MeshToonMaterial</code></a> est similaire au <a href="/docs/#api/en/materials/MeshPhongMaterial"><code class="notranslate" translate="no">MeshPhongMaterial</code></a>
avec une grande différence. Au lieu d'ombrer en douceur, il utilise une
carte de dégradé (une texture de taille X sur 1) pour décider comment ombrer.
Par défaut, il utilise une carte de dégradé dont la luminosité est de 70%
pour les premiers 70% et de 100% ensuite, mais vous pouvez fournir votre
propre carte de dégradé. Cela donne finalement un aspect bicolore qui
ressemble à un dessin animé.</p>
<div class="spread">
  <div data-diagram="MeshToonMaterial"></div>
</div>

<p>Ensuite, il y a 2 matériaux basés sur le <em>rendu physique</em>. Le Rendu Basé sur
le Physique est souvent abrégé PBR.</p>
<p>Les matériaux ci-dessus utilisent des calculs simples pour créer des matériaux
qui semblent en 3D, mais ils ne correspondent pas à ce qui se passe réellement
dans le monde réel. Les 2 matériaux PBR utilisent des calculs beaucoup plus
complexes pour se rapprocher de ce qui se passe réellement dans le monde réel.</p>
<p>Le premier est <a href="/docs/#api/en/materials/MeshStandardMaterial"><code class="notranslate" translate="no">MeshStandardMaterial</code></a>. La plus grande différence entre
<a href="/docs/#api/en/materials/MeshPhongMaterial"><code class="notranslate" translate="no">MeshPhongMaterial</code></a> et <a href="/docs/#api/en/materials/MeshStandardMaterial"><code class="notranslate" translate="no">MeshStandardMaterial</code></a> est qu'il utilise différents paramètres.
<a href="/docs/#api/en/materials/MeshPhongMaterial"><code class="notranslate" translate="no">MeshPhongMaterial</code></a> avait un paramètre <code class="notranslate" translate="no">shininess</code>. <a href="/docs/#api/en/materials/MeshStandardMaterial"><code class="notranslate" translate="no">MeshStandardMaterial</code></a> a 2
paramètres : <code class="notranslate" translate="no">roughness</code> et <code class="notranslate" translate="no">metalness</code>.</p>
<p>À un niveau basique, <a href="/docs/#api/en/materials/MeshStandardMaterial#roughness"><code class="notranslate" translate="no">roughness</code></a> est l'opposé
de <code class="notranslate" translate="no">shininess</code>. Quelque chose qui a une rugosité élevée, comme une balle de baseball, n'a pas
de reflets durs, tandis que quelque chose qui n'est pas rugueux, comme une boule de billard,
est très brillant. La rugosité va de 0 à 1.</p>
<p>L'autre paramètre, <a href="/docs/#api/en/materials/MeshStandardMaterial#metalness"><code class="notranslate" translate="no">metalness</code></a>, indique
à quel point le matériau est métallique. Les métaux se comportent différemment des non-métaux. 0
pour non-métal et 1 pour métal.</p>
<p>Voici un échantillon rapide de <a href="/docs/#api/en/materials/MeshStandardMaterial"><code class="notranslate" translate="no">MeshStandardMaterial</code></a> avec une <code class="notranslate" translate="no">roughness</code> de 0 à 1
horizontalement et une <code class="notranslate" translate="no">metalness</code> de 0 à 1 verticalement.</p>
<div data-diagram="MeshStandardMaterial" style="min-height: 400px"></div>

<p>Le <a href="/docs/#api/en/materials/MeshPhysicalMaterial"><code class="notranslate" translate="no">MeshPhysicalMaterial</code></a> est le même que le <a href="/docs/#api/en/materials/MeshStandardMaterial"><code class="notranslate" translate="no">MeshStandardMaterial</code></a> mais il
ajoute un paramètre <code class="notranslate" translate="no">clearcoat</code> qui va de 0 à 1 pour déterminer la
quantité de couche de vernis brillant à appliquer, et un paramètre
<code class="notranslate" translate="no">clearCoatRoughness</code> qui spécifie la rugosité de la couche brillante.</p>
<p>Voici la même grille de <code class="notranslate" translate="no">roughness</code> par <code class="notranslate" translate="no">metalness</code> que ci-dessus, mais avec
les paramètres <code class="notranslate" translate="no">clearcoat</code> et <code class="notranslate" translate="no">clearCoatRoughness</code>.</p>
<div data-diagram="MeshPhysicalMaterial" style="min-height: 400px"></div>

<p>Les différents matériaux standard progressent du plus rapide au plus lent :
<a href="/docs/#api/en/materials/MeshBasicMaterial"><code class="notranslate" translate="no">MeshBasicMaterial</code></a> ➡ <a href="/docs/#api/en/materials/MeshLambertMaterial"><code class="notranslate" translate="no">MeshLambertMaterial</code></a> ➡ <a href="/docs/#api/en/materials/MeshPhongMaterial"><code class="notranslate" translate="no">MeshPhongMaterial</code></a> ➡
<a href="/docs/#api/en/materials/MeshStandardMaterial"><code class="notranslate" translate="no">MeshStandardMaterial</code></a> ➡ <a href="/docs/#api/en/materials/MeshPhysicalMaterial"><code class="notranslate" translate="no">MeshPhysicalMaterial</code></a>. Les matériaux plus lents
peuvent créer des scènes plus réalistes, mais vous pourriez avoir besoin de
concevoir votre code pour utiliser les matériaux plus rapides sur les machines
à faible puissance ou les appareils mobiles.</p>
<p>Il existe 3 matériaux qui ont des utilisations spéciales. <a href="/docs/#api/en/materials/ShadowMaterial"><code class="notranslate" translate="no">ShadowMaterial</code></a>
est utilisé pour obtenir les données créées par les ombres. Nous n'avons pas
encore abordé les ombres. Lorsque ce sera le cas, nous utiliserons ce matériau
pour jeter un coup d'œil à ce qui se passe en coulisse.</p>
<p>Le <a href="/docs/#api/en/materials/MeshDepthMaterial"><code class="notranslate" translate="no">MeshDepthMaterial</code></a> affiche la profondeur de chaque pixel où
les pixels au <a href="/docs/#api/en/cameras/PerspectiveCamera#near"><code class="notranslate" translate="no">near</code></a> négatif de la caméra sont 0 et au <a href="/docs/#api/en/cameras/PerspectiveCamera#far"><code class="notranslate" translate="no">far</code></a> négatif sont 1.
Certains effets spéciaux peuvent utiliser ces données, que nous aborderons
ultérieurement.</p>
<div class="spread">
  <div>
    <div data-diagram="MeshDepthMaterial"></div>
  </div>
</div>

<p>Le <a href="/docs/#api/en/materials/MeshNormalMaterial"><code class="notranslate" translate="no">MeshNormalMaterial</code></a> vous montrera les <em>normales</em> de la géométrie.
Les <em>normales</em> sont la direction vers laquelle pointe un triangle ou un pixel particulier.
<a href="/docs/#api/en/materials/MeshNormalMaterial"><code class="notranslate" translate="no">MeshNormalMaterial</code></a> dessine les normales de l'espace de vue (les normales relatives à la caméra).
<span style="background: red;" class="color">x est rouge</span>,
<span style="background: green;" class="dark-color">y est vert</span>, et
<span style="background: blue;" class="dark-color">z est bleu</span> donc les choses orientées
vers la droite seront <span style="background: #FF7F7F;" class="color">roses</span>,
vers la gauche seront <span style="background: #007F7F;" class="dark-color">aqua</span>,
vers le haut seront <span style="background: #7FFF7F;" class="color">vert clair</span>,
vers le bas seront <span style="background: #7F007F;" class="dark-color">violettes</span>,
et vers l'écran seront <span style="background: #7F7FFF;" class="color">lavande</span>.</p>
<div class="spread">
  <div>
    <div data-diagram="MeshNormalMaterial"></div>
  </div>
</div>

<p><a href="/docs/#api/en/materials/ShaderMaterial"><code class="notranslate" translate="no">ShaderMaterial</code></a> sert à créer des matériaux personnalisés à l'aide du système de shaders de three.js.
<a href="/docs/#api/en/materials/RawShaderMaterial"><code class="notranslate" translate="no">RawShaderMaterial</code></a> sert à créer des shaders entièrement personnalisés sans aide de three.js.
Ces deux sujets sont vastes et seront abordés plus tard.</p>
<p>La plupart des matériaux partagent un ensemble de paramètres tous définis par <a href="/docs/#api/en/materials/Material"><code class="notranslate" translate="no">Material</code></a>.
<a href="/docs/#api/en/materials/Material">Consultez la documentation</a>
pour les voir tous, mais passons en revue deux des propriétés les plus couramment utilisées.</p>
<p><a href="/docs/#api/en/materials/Material#flatShading"><code class="notranslate" translate="no">flatShading</code></a> :
si l'objet semble facetté ou lisse. défaut = <code class="notranslate" translate="no">false</code>.</p>
<div class="spread">
  <div>
    <div data-diagram="smoothShading"></div>
    <div class="code">flatShading: false</div>
  </div>
  <div>
    <div data-diagram="flatShading"></div>
    <div class="code">flatShading: true</div>
  </div>
</div>

<p><a href="/docs/#api/en/materials/Material#side"><code class="notranslate" translate="no">side</code></a> : quels côtés des triangles afficher. La valeur par défaut est <code class="notranslate" translate="no">THREE.FrontSide</code>.
Les autres options sont <code class="notranslate" translate="no">THREE.BackSide</code> et <code class="notranslate" translate="no">THREE.DoubleSide</code> (les deux côtés).
La plupart des objets 3D dessinés dans three.js sont probablement des solides opaques, donc les faces arrière
(les faces tournées vers l'intérieur du solide) n'ont pas besoin d'être dessinées. La raison la plus courante
de définir <code class="notranslate" translate="no">side</code> est pour les plans ou d'autres objets non solides où il est
courant de voir les faces arrière des triangles.</p>
<p>Voici 6 plans dessinés avec <code class="notranslate" translate="no">THREE.FrontSide</code> et <code class="notranslate" translate="no">THREE.DoubleSide</code>.</p>
<div class="spread">
  <div>
    <div data-diagram="sideDefault" style="height: 250px;"></div>
    <div class="code">side: THREE.FrontSide</div>
  </div>
  <div>
    <div data-diagram="sideDouble" style="height: 250px;"></div>
    <div class="code">side: THREE.DoubleSide</div>
  </div>
</div>

<p>Il y a vraiment beaucoup de choses à considérer avec les matériaux et nous en avons encore beaucoup
à voir. En particulier, nous avons largement ignoré les textures qui ouvrent tout un éventail
d'options. Cependant, avant d'aborder les textures, nous devons faire une pause et
<a href="setup.html">configurer votre environnement de développement</a>.</p>
<div class="threejs_bottombar">
<h3>material.needsUpdate</h3>
<p>
Ce sujet affecte rarement la plupart des applications three.js, mais juste pour information...
Three.js applique les paramètres des matériaux lorsqu'un matériau est utilisé, où "utilisé"
signifie "quelque chose qui est rendu utilise le matériau". Certains paramètres de matériau ne sont
appliqués qu'une seule fois, car leur modification nécessite beaucoup de travail de la part de three.js.
Dans ces cas, vous devez définir <code class="notranslate" translate="no">material.needsUpdate = true</code> pour indiquer à
three.js d'appliquer vos modifications de matériau. Les paramètres les plus courants
qui nécessitent de définir <code class="notranslate" translate="no">needsUpdate</code> si vous modifiez les paramètres après avoir
utilisé le matériau sont :
</p>
<ul>
  <li><code class="notranslate" translate="no">flatShading</code></li>
  <li>ajout ou suppression d'une texture
    <p>
    Changer une texture est acceptable, mais si vous souhaitez passer de l'absence de texture
    à l'utilisation d'une texture, ou de l'utilisation d'une texture à l'absence de texture,
    alors vous devez définir <code class="notranslate" translate="no">needsUpdate = true</code>.
    </p>
    <p>Dans le cas où l'on passe d'une texture à l'absence de texture, il est souvent
    simplement préférable d'utiliser une texture blanche de 1x1 pixel.</p>
  </li>
</ul>
<p>Comme mentionné ci-dessus, la plupart des applications ne rencontrent jamais ces problèmes. La plupart des applications
ne basculent pas entre un ombrage plat et non plat. La plupart des applications
utilisent également des textures ou une couleur unie pour un matériau donné ; elles basculent rarement
de l'utilisation de l'un à l'utilisation de l'autre.
</p>
</div>

<p><canvas id="c"></canvas></p>
<script type="module" src="../resources/threejs-materials.js"></script>


        </div>
      </div>
    </div>

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


</body></html>