MeshPhysicalMaterial.html 9.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311
  1. <!DOCTYPE html>
  2. <html lang="en">
  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; [page:MeshStandardMaterial] &rarr;
  11. <h1>[name]</h1>
  12. <p class="desc">
  13. An extension of the [page:MeshStandardMaterial], providing more advanced
  14. physically-based rendering properties:
  15. </p>
  16. <ul>
  17. <li>
  18. <b>Clearcoat:</b> Some materials — like car paints, carbon fiber, and
  19. wet surfaces — require a clear, reflective layer on top of another layer
  20. that may be irregular or rough. Clearcoat approximates this effect,
  21. without the need for a separate transparent surface.
  22. </li>
  23. <li>
  24. <b>Physically-based transparency:</b> One limitation of
  25. [page:Material.opacity .opacity] is that highly transparent materials
  26. are less reflective. Physically-based [page:.transmission] provides a
  27. more realistic option for thin, transparent surfaces like glass.
  28. </li>
  29. <li>
  30. <b>Advanced reflectivity:</b> More flexible reflectivity for
  31. non-metallic materials.
  32. </li>
  33. <li>
  34. <b>Sheen:</b> Can be used for representing cloth and fabric materials.
  35. </li>
  36. </ul>
  37. <p>
  38. As a result of these complex shading features, MeshPhysicalMaterial has a
  39. higher performance cost, per pixel, than other three.js materials. Most
  40. effects are disabled by default, and add cost as they are enabled. For
  41. best results, always specify an [page:.envMap environment map] when using
  42. this material.
  43. </p>
  44. <iframe
  45. id="scene"
  46. src="scenes/material-browser.html#MeshPhysicalMaterial"
  47. ></iframe>
  48. <script>
  49. // iOS iframe auto-resize workaround
  50. if ( /(iPad|iPhone|iPod)/g.test( navigator.userAgent ) ) {
  51. const scene = document.getElementById( 'scene' );
  52. scene.style.width = getComputedStyle( scene ).width;
  53. scene.style.height = getComputedStyle( scene ).height;
  54. scene.setAttribute( 'scrolling', 'no' );
  55. }
  56. </script>
  57. <h2>Examples</h2>
  58. <p>
  59. [example:webgl_materials_physical_clearcoat materials / physical / clearcoat]<br />
  60. [example:webgl_loader_gltf_sheen loader / gltf / sheen]<br />
  61. [example:webgl_materials_physical_transmission materials / physical / transmission]
  62. </p>
  63. <h2>Constructor</h2>
  64. <h3>[name]( [param:Object parameters] )</h3>
  65. <p>
  66. [page:Object parameters] - (optional) an object with one or more
  67. properties defining the material's appearance. Any property of the
  68. material (including any property inherited from [page:Material] and
  69. [page:MeshStandardMaterial]) can be passed in here.<br /><br />
  70. The exception is the property [page:Hexadecimal color], which can be
  71. passed in as a hexadecimal string and is `0xffffff` (white) by default.
  72. [page:Color.set]( color ) is called internally.
  73. </p>
  74. <h2>Properties</h2>
  75. <p>
  76. See the base [page:Material] and [page:MeshStandardMaterial] classes for
  77. common properties.
  78. </p>
  79. <h3>[property:Color attenuationColor]</h3>
  80. <p>
  81. The color that white light turns into due to absorption when reaching the
  82. attenuation distance. Default is `white` (0xffffff).
  83. </p>
  84. <h3>[property:Float attenuationDistance]</h3>
  85. <p>
  86. Density of the medium given as the average distance that light travels in
  87. the medium before interacting with a particle. The value is given in world
  88. space units, and must be greater than zero. Default is `Infinity`.
  89. </p>
  90. <h3>[property:Float clearcoat]</h3>
  91. <p>
  92. Represents the intensity of the clear coat layer, from `0.0` to `1.0`. Use
  93. clear coat related properties to enable multilayer materials that have a
  94. thin translucent layer over the base layer. Default is `0.0`.
  95. </p>
  96. <h3>[property:Texture clearcoatMap]</h3>
  97. <p>
  98. The red channel of this texture is multiplied against [page:.clearcoat],
  99. for per-pixel control over a coating's intensity. Default is `null`.
  100. </p>
  101. <h3>[property:Texture clearcoatNormalMap]</h3>
  102. <p>
  103. Can be used to enable independent normals for the clear coat layer.
  104. Default is `null`.
  105. </p>
  106. <h3>[property:Vector2 clearcoatNormalScale]</h3>
  107. <p>
  108. How much [page:.clearcoatNormalMap] affects the clear coat layer, from
  109. `(0,0)` to `(1,1)`. Default is `(1,1)`.
  110. </p>
  111. <h3>[property:Float clearcoatRoughness]</h3>
  112. <p>
  113. Roughness of the clear coat layer, from `0.0` to `1.0`. Default is `0.0`.
  114. </p>
  115. <h3>[property:Texture clearcoatRoughnessMap]</h3>
  116. <p>
  117. The green channel of this texture is multiplied against
  118. [page:.clearcoatRoughness], for per-pixel control over a coating's
  119. roughness. Default is `null`.
  120. </p>
  121. <h3>[property:Object defines]</h3>
  122. <p>
  123. An object of the form:
  124. <code>
  125. {
  126. 'STANDARD': '',
  127. 'PHYSICAL': '',
  128. };
  129. </code>
  130. This is used by the [page:WebGLRenderer] for selecting shaders.
  131. </p>
  132. <h3>[property:Float ior]</h3>
  133. <p>
  134. Index-of-refraction for non-metallic materials, from `1.0` to `2.333`.
  135. Default is `1.5`.
  136. </p>
  137. <h3>[property:Float reflectivity]</h3>
  138. <p>
  139. Degree of reflectivity, from `0.0` to `1.0`. Default is `0.5`, which
  140. corresponds to an index-of-refraction of 1.5.<br />
  141. This models the reflectivity of non-metallic materials. It has no effect
  142. when [page:MeshStandardMaterial.metalness metalness] is `1.0`
  143. </p>
  144. <h3>[property:Float iridescence]</h3>
  145. <p>
  146. The intensity of the [link:https://en.wikipedia.org/wiki/Iridescence iridescence] layer, simulating RGB color shift based on the angle between the surface and the viewer, from `0.0` to `1.0`. Default is `0.0`.
  147. </p>
  148. <h3>[property:Texture iridescenceMap]</h3>
  149. <p>
  150. The red channel of this texture is multiplied against
  151. [page:.iridescence], for per-pixel control over iridescence.
  152. Default is `null`.
  153. </p>
  154. <h3>[property:Float iridescenceIOR]</h3>
  155. <p>
  156. Strength of the iridescence RGB color shift effect, represented by an index-of-refraction. Between `1.0` to `2.333`.
  157. Default is `1.3`.
  158. </p>
  159. <h3>[property:Array iridescenceThicknessRange]</h3>
  160. <p>
  161. Array of exactly 2 elements, specifying minimum and maximum thickness of the iridescence layer.
  162. Thickness of iridescence layer has an equivalent effect of the one [page:.thickness] has on [page:.ior].
  163. Default is `[100, 400]`.<br />
  164. If [page:.iridescenceThicknessMap] is not defined, iridescence thickness will use only the second element of the given array.
  165. </p>
  166. <h3>[property:Texture iridescenceThicknessMap]</h3>
  167. <p>
  168. A texture that defines the thickness of the iridescence layer, stored in the green channel.
  169. Minimum and maximum values of thickness are defined by [page:.iridescenceThicknessRange] array:<br/>
  170. <ul>
  171. <li>`0.0` in the green channel will result in thickness equal to first element of the array.</li>
  172. <li>`1.0` in the green channel will result in thickness equal to second element of the array.</li>
  173. <li>Values in-between will linearly interpolate between the elements of the array.</li>
  174. </ul>
  175. Default is `null`.
  176. </p>
  177. <h3>[property:Float sheen]</h3>
  178. <p>
  179. The intensity of the sheen layer, from `0.0` to `1.0`. Default is `0.0`.
  180. </p>
  181. <h3>[property:Float sheenRoughness]</h3>
  182. <p>Roughness of the sheen layer, from `0.0` to `1.0`. Default is `1.0`.</p>
  183. <h3>[property:Texture sheenRoughnessMap]</h3>
  184. <p>
  185. The alpha channel of this texture is multiplied against
  186. [page:.sheenRoughness], for per-pixel control over sheen roughness.
  187. Default is `null`.
  188. </p>
  189. <h3>[property:Color sheenColor]</h3>
  190. <p>The sheen tint. Default is `0x000000`, black.</p>
  191. <h3>[property:Texture sheenColorMap]</h3>
  192. <p>
  193. The RGB channels of this texture are multiplied against
  194. [page:.sheenColor], for per-pixel control over sheen tint. Default is
  195. `null`.
  196. </p>
  197. <h3>[property:Float specularIntensity]</h3>
  198. <p>
  199. A float that scales the amount of specular reflection for non-metals only.
  200. When set to zero, the model is effectively Lambertian. From `0.0` to
  201. `1.0`. Default is `1.0`.
  202. </p>
  203. <h3>[property:Texture specularIntensityMap]</h3>
  204. <p>
  205. The alpha channel of this texture is multiplied against
  206. [page:.specularIntensity], for per-pixel control over specular intensity.
  207. Default is `null`.
  208. </p>
  209. <h3>[property:Color specularColor]</h3>
  210. <p>
  211. A [page:Color] that tints the specular reflection at normal incidence for
  212. non-metals only. Default is `0xffffff`, white.
  213. </p>
  214. <h3>[property:Texture specularColorMap]</h3>
  215. <p>
  216. The RGB channels of this texture are multiplied against
  217. [page:.specularColor], for per-pixel control over specular color. Default
  218. is `null`.
  219. </p>
  220. <h3>[property:Float thickness]</h3>
  221. <p>
  222. The thickness of the volume beneath the surface. The value is given in the
  223. coordinate space of the mesh. If the value is `0` the material is
  224. thin-walled. Otherwise the material is a volume boundary. Default is `0`.
  225. </p>
  226. <h3>[property:Texture thicknessMap]</h3>
  227. <p>
  228. A texture that defines the thickness, stored in the green channel. This will
  229. be multiplied by [page:.thickness]. Default is `null`.
  230. </p>
  231. <h3>[property:Float transmission]</h3>
  232. <p>
  233. Degree of transmission (or optical transparency), from `0.0` to `1.0`.
  234. Default is `0.0`.<br />
  235. Thin, transparent or semitransparent, plastic or glass materials remain
  236. largely reflective even if they are fully transmissive. The transmission
  237. property can be used to model these materials.<br />
  238. When transmission is non-zero, [page:Material.opacity opacity] should be
  239. set to `1`.
  240. </p>
  241. <h3>[property:Texture transmissionMap]</h3>
  242. <p>
  243. The red channel of this texture is multiplied against
  244. [page:.transmission], for per-pixel control over optical transparency.
  245. Default is `null`.
  246. </p>
  247. <h2>Methods</h2>
  248. <p>
  249. See the base [page:Material] and [page:MeshStandardMaterial] classes for
  250. common methods.
  251. </p>
  252. <h2>Source</h2>
  253. <p>
  254. [link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
  255. </p>
  256. </body>
  257. </html>