MeshPhongMaterial.html 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247
  1. <!DOCTYPE html>
  2. <html lang="fr">
  3. <head>
  4. <meta charset="utf-8" />
  5. <base href="../../../" />
  6. <script src="page.js"></script>
  7. <link type="text/css" rel="stylesheet" href="page.css" />
  8. </head>
  9. <body>
  10. [page:Material] &rarr;
  11. <h1>[name]</h1>
  12. <p class="desc">
  13. Un matériau pour les surfaces brillantes avec des reflets spéculaires.<br /><br />
  14. Le matériau utilise un modèle de [link:https://en.wikipedia.org/wiki/Blinn-Phong_shading_model Blinn-Phong] non basé sur la physique
  15. pour calculer la réflectance. Contrairement au modèle lambertien utilisé dans la [page:MeshLambertMaterial]
  16. cela peut simuler des surfaces brillantes avec des reflets spéculaires (comme le bois verni). [name] utilise un ombrage par fragment.<br /><br />
  17. Les performances seront généralement meilleurs qu'avec un [page:MeshStandardMaterial]
  18. ou un [page:MeshPhysicalMaterial], au prix d'une perte de précision graphique.
  19. </p>
  20. <iframe id="scene" src="scenes/material-browser.html#MeshPhongMaterial"></iframe>
  21. <script>
  22. // iOS iframe auto-resize workaround
  23. if ( /(iPad|iPhone|iPod)/g.test( navigator.userAgent ) ) {
  24. const scene = document.getElementById( 'scene' );
  25. scene.style.width = getComputedStyle( scene ).width;
  26. scene.style.height = getComputedStyle( scene ).height;
  27. scene.setAttribute( 'scrolling', 'no' );
  28. }
  29. </script>
  30. <h2>Constructeur</h2>
  31. <h3>[name]( [param:Object parameters] )</h3>
  32. <p>
  33. [page:Object parameters] - (optionnel) un objet avec une ou plusieurs propriétés définissant l'apparence du matériau.
  34. Toute propriété du matériau (y compris toute proprioété héritée de [page:Material]) peut être passée dans l'objet.<br /><br />
  35. L'exception est la propriété [page:Hexadecimal color], qui peut être passée comme une chaine de caractères hexadécimale,
  36. ayant la valeur `0xffffff` (blanc) par défaut. [page:Color.set]( color ) est appelée en interne.
  37. </p>
  38. <h2>Propriétés</h2>
  39. <p>Voir la classe [page:Material] pour les propriétés communes.</p>
  40. <h3>[property:Texture alphaMap]</h3>
  41. <p>La carte alpha est une texture en niveaux de gris qui contrôle l'opacité sur la surface
  42. (noir : entièrement transparent ; blanc : entièrement opaque). La valeur par défaut est nulle.<br /><br />
  43. Seule la couleur de la texture est utilisée, en ignorant le canal alpha s'il en existe un.
  44. Pour les textures RGB et RGBA, le moteur de rendu [page:WebGLRenderer WebGL] utilisera le
  45. canal vert lors de l'échantillonnage de cette texture en raison du peu de précision supplémentaire fourni
  46. pour le vert dans les formats RVB 565 compressés DXT et non compressés.
  47. Les textures avec uniquement de la luminance ou les textures luminance/alpha fonctionneront également comme prévu.
  48. </p>
  49. <h3>[property:Texture aoMap]</h3>
  50. <p>Le canal rouge de cette texture est utilisé comme carte d'occlusion ambiante. La valeur par défaut est nulle.
  51. L'aoMap nécessite un deuxième ensemble d'UV.</p>
  52. <h3>[property:Float aoMapIntensity]</h3>
  53. <p>Intensité de l'effet d'occlusion ambiante. La valeur par défaut est 1. Zéro signifie qu'il n'y a pas d'effet d'occlusion.</p>
  54. <h3>[property:Texture bumpMap]</h3>
  55. <p>
  56. La texture pour créer une carte en relief. Les valeurs de noir et blanc correspondent à la profondeur perçue par rapport aux lumières.
  57. Bump n'affecte pas réellement la géométrie de l'objet, seulement l'éclairage. Si une carte normale est définie, cela sera ignoré.
  58. </p>
  59. <h3>[property:Float bumpScale]</h3>
  60. <p>A quel point la texture en relief affecte le matériau. Les plages typiques sont 0-1. La valeur par défaut est 1.</p>
  61. <h3>[property:Color color]</h3>
  62. <p>[page:Color], couleur du matériau, par défaut en blanc (0xffffff).</p>
  63. <h3>[property:Integer combine]</h3>
  64. <p>
  65. Comment combiner le résultat de la couleur de la surface avec la carte d'environnement, le cas échéant.<br /><br />
  66. Les options sont [page:Materials THREE.MultiplyOperation] (par défaut), [page:Materials THREE.MixOperation],
  67. [page :Matériaux TROIS.AddOperation]. Si mix est choisi, la [page:.reflectivity] est utilisée pour
  68. mélanger les deux couleurs.
  69. </p>
  70. <h3>[property:Texture displacementMap]</h3>
  71. <p>
  72. La carte de déplacement affecte la position des sommets du maillage. Contrairement aux autres cartes
  73. qui n'affectent que la lumière et l'ombre du matériau, les sommets déplacés peuvent projeter des ombres,
  74. bloquer d'autres objets et agir autrement comme une géométrie réelle. La texture de déplacement est
  75. une image sur laquelle la valeur de chaque pixel (le blanc étant le plus élevé) est mappée,
  76. et repositionne, les sommets du maillage.
  77. </p>
  78. <h3>[property:Float displacementScale]</h3>
  79. <p>
  80. Dans quelle mesure la carte de déplacement affecte le maillage (où le noir n'est pas un déplacement,
  81. et le blanc est le déplacement maximal). Sans ensemble de cartes de déplacement, cette valeur n'est pas appliquée.
  82. La valeur par défaut est 1.
  83. </p>
  84. <h3>[property:Float displacementBias]</h3>
  85. <p>
  86. Le décalage des valeurs de la carte de déplacement sur les sommets du maillage.
  87. Sans ensemble de cartes de déplacement, cette valeur n'est pas appliquée. La valeur par défaut est 0.
  88. </p>
  89. <h3>[property:Color emissive]</h3>
  90. <p>
  91. Couleur émissive (claire) du matériau, essentiellement une couleur unie non affectée par un autre éclairage.
  92. La valeur par défaut est noire.
  93. </p>
  94. <h3>[property:Texture emissiveMap]</h3>
  95. <p>
  96. Définit la carte émissive (lueur). La valeur par défaut est nulle. La couleur de la carte émissive est modulée par
  97. la couleur émissive et l'intensité émissive. Si vous avez une carte émissive, assurez-vous de
  98. régler la couleur émissive sur autre chose que le noir.
  99. </p>
  100. <h3>[property:Float emissiveIntensity]</h3>
  101. <p>Intensité de la lumière émissive. Module la couleur émissive. La valeur par défaut est 1.</p>
  102. <h3>[property:Texture envMap]</h3>
  103. <p>La carte de l'environnement. La valeur par défaut est nulle.</p>
  104. <h3>[property:Boolean flatShading]</h3>
  105. <p>
  106. Définit si le matériau est rendu avec un ombrage plat. La valeur par défaut est false.
  107. </p>
  108. <h3>[property:Boolean fog]</h3>
  109. <p>Si le matériau est affecté par le brouillard (fog) La valeur par défaut est `true`.</p>
  110. <h3>[property:Texture lightMap]</h3>
  111. <p>La carte des lumières (light map). La valeur par défaut est null. La lightMap nécessite un deuxième ensemble d'UVs.</p>
  112. <h3>[property:Float lightMapIntensity]</h3>
  113. <p>Intensité de la lumière préparée. La valeur par défaut est 1.</p>
  114. <h3>[property:Texture map]</h3>
  115. <p>
  116. La carte des couleurs. Peut éventuellement inclure un canal alpha, généralement combiné avec
  117. [page:Material.transparent .transparent] ou [page:Material.alphaTest .alphaTest]. La valeur par défaut est null.
  118. La couleur de la carte de texture est modulée par la couleur ([page:.color]) diffuse..
  119. </p>
  120. <h3>[property:Texture normalMap]</h3>
  121. <p>
  122. La texture pour créer une carte normale. Les valeurs RVB affectent la surface normale pour chaque fragment de pixel et changent
  123. la façon dont la couleur est illuminée. Les cartes normales ne changent pas la forme réelle de la surface, seulement l'éclairage.
  124. Dans le cas où le matériau a une carte normale créée en utilisant la convention "left handed", le composant y de normalScale
  125. devrait être négatif pour compenser les différences de latéralité.
  126. </p>
  127. <h3>[property:Integer normalMapType]</h3>
  128. <p>
  129. Le type de carte d'ombrage.<br /><br />
  130. Les options sont [page:constant THREE.TangentSpaceNormalMap] (par défaut), et [page:constant THREE.ObjectSpaceNormalMap].
  131. </p>
  132. <h3>[property:Vector2 normalScale]</h3>
  133. <p>
  134. A quel point la carte normale affecte le matériau. Les plages typiques sont 0-1.
  135. La valeur par défaut est un [page:Vector2] défini sur (1,1).
  136. </p>
  137. <h3>[property:Float reflectivity]</h3>
  138. <p>
  139. Dans quelle mesure la carte d'environnement affecte la surface ; voir aussi [page:.combine].
  140. La valeur par défaut est 1 et la plage valide est comprise entre 0 (aucune réflexion) et 1 (réflexions complètes).
  141. </p>
  142. <h3>[property:Float refractionRatio]</h3>
  143. <p>
  144. L'indice de réfraction (IOR) de l'air (environ 1) divisé par l'indice de réfraction du matériau.
  145. Il est utilisé avec les modes de mapping d'environnement [page:Textures THREE.CubeRefractionMapping] et [page:Textures THREE.EquirectangularRefractionMapping].
  146. Le rapport de réfraction ne doit pas dépasser 1. La valeur par défaut est `0.98`.
  147. </p>
  148. <h3>[property:Float shininess]</h3>
  149. <p>À quel point la surbrillance [page:.specular] est-elle brillante ? une valeur plus élevée donne une surbrillance plus nette. La valeur par défaut est `30`.</p>
  150. <h3>[property:Color specular]</h3>
  151. <p>
  152. Couleur spéculaire du matériau. La valeur par défaut est une [page:Color] de `0x111111` (gris très foncé).<br /><br />
  153. Cela définit à quel point le matériau brille et la couleur de brillance.
  154. </p>
  155. <h3>[property:Texture specularMap]</h3>
  156. <p>
  157. La valeur de carte spéculaire affecte à la fois l'importance de la surbrillance de la surface spéculaire
  158. et à quel point la carte d'environnement affecte la surface. La valeur par défaut est null.
  159. </p>
  160. <h3>[property:Boolean wireframe]</h3>
  161. <p>Rendre la géométrie en fil de fer. La valeur par défaut est "false" (c'est-à-dire rendre sous forme de polygones plats).</p>
  162. <h3>[property:String wireframeLinecap]</h3>
  163. <p>
  164. Définit l'apparence de la fin de la ligne. les valeurs possibles sont 'butt', 'round' et 'square'.
  165. La valeur par défaut est 'round'.<br /><br />
  166. Cela correspond à la propriété [link:https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/lineCap 2D Canvas lineCap]
  167. et est ignorée par le moteur de rendu [page:WebGLRenderer WebGL].
  168. </p>
  169. <h3>[property:String wireframeLinejoin]</h3>
  170. <p>
  171. Définit l'apparence des jointures de lignes. Les valeurs possibles sont 'round', 'bevel' et 'miter'. La valeur par défaut est 'round'. <br /><br />
  172. Cela correspond à la propriété [link:https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/lineJoin 2D Canvas lineJoin]
  173. et est ignorée par le moteur de rendu [page:WebGLRenderer WebGL].
  174. </p>
  175. <h3>[property:Float wireframeLinewidth]</h3>
  176. <p>Contrôle l'épaisseur du filaire. La valeur par défaut est 1.<br /><br />
  177. A cause des limitations de [link:https://www.khronos.org/registry/OpenGL/specs/gl/glspec46.core.pdf OpenGL Core Profile]
  178. avec le moteur de rendu [page:WebGLRenderer WebGL] sur la plupârt des plateformes, l'épaisseur de ligne (linewidth) sera toujours
  179. à 1, indépendamment de la valeur définie.
  180. </p>
  181. <h2>Méthodes</h2>
  182. <p>Voir la classe [page:Material] pour les méthodes communes.</p>
  183. <h2>Source</h2>
  184. <p>
  185. [link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
  186. </p>
  187. </body>
  188. </html>