MeshPhysicalMaterial.html 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234
  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 physically-based rendering properties:
  14. </p>
  15. <ul>
  16. <li>
  17. <b>Clearcoat:</b> Some materials — like car paints, carbon fiber, and wet surfaces — require a
  18. clear, reflective layer on top of another layer that may be irregular or rough. Clearcoat
  19. approximates this effect, without the need for a separate transparent surface.
  20. </li>
  21. <li>
  22. <b>Physically-based transparency:</b> One limitation of [page:Material.opacity .opacity] is
  23. that highly transparent materials are less reflective. Physically-based [page:.transmission]
  24. provides a more realistic option for thin, transparent surfaces like glass.
  25. </li>
  26. <li>
  27. <b>Advanced reflectivity:</b> More flexible reflectivity for non-metallic materials.
  28. </li>
  29. <li>
  30. <b>Sheen:</b> Can be used for representing cloth and fabric materials.
  31. </li>
  32. </ul>
  33. <p>
  34. As a result of these complex shading features, MeshPhysicalMaterial has a higher performance
  35. cost, per pixel, than other three.js materials. Most effects are disabled by default, and add
  36. cost as they are enabled. For best results, always specify an [page:.envMap environment map]
  37. when using this material.
  38. </p>
  39. <iframe id="scene" src="scenes/material-browser.html#MeshPhysicalMaterial"></iframe>
  40. <script>
  41. // iOS iframe auto-resize workaround
  42. if ( /(iPad|iPhone|iPod)/g.test( navigator.userAgent ) ) {
  43. const scene = document.getElementById( 'scene' );
  44. scene.style.width = getComputedStyle( scene ).width;
  45. scene.style.height = getComputedStyle( scene ).height;
  46. scene.setAttribute( 'scrolling', 'no' );
  47. }
  48. </script>
  49. <h2>Examples</h2>
  50. <p>
  51. [example:webgl_materials_variations_physical materials / variations / physical]<br />
  52. [example:webgl_materials_physical_clearcoat materials / physical / clearcoat]<br />
  53. [example:webgl_materials_physical_reflectivity materials / physical / reflectivity]<br />
  54. [example:webgl_loader_gltf_sheen loader / gltf / sheen]<br />
  55. [example:webgl_materials_physical_transmission materials / physical / transmission]
  56. </p>
  57. <h2>Constructor</h2>
  58. <h3>[name]( [param:Object parameters] )</h3>
  59. <p>
  60. [page:Object parameters] - (optional) an object with one or more properties defining the material's appearance.
  61. Any property of the material (including any property inherited from [page:Material] and [page:MeshStandardMaterial]) can be passed in here.<br /><br />
  62. The exception is the property [page:Hexadecimal color], which can be passed in as a hexadecimal
  63. string and is `0xffffff` (white) by default. [page:Color.set]( color ) is called internally.
  64. </p>
  65. <h2>Properties</h2>
  66. <p>See the base [page:Material] and [page:MeshStandardMaterial] classes for common properties.</p>
  67. <h3>[property:Color attenuationColor]</h3>
  68. <p>
  69. The color that white light turns into due to absorption when reaching the attenuation distance. Default is `white` (0xffffff).
  70. </p>
  71. <h3>[property:Float attenuationDistance]</h3>
  72. <p>
  73. Density of the medium given as the average distance that light travels in the medium before interacting with a particle. The value is given in world space units, and must be greater than zero. Default is `Infinity`.
  74. </p>
  75. <h3>[property:Float clearcoat]</h3>
  76. <p>
  77. Represents the intensity of the clear coat layer, from `0.0` to `1.0`. Use clear coat related properties to enable multilayer
  78. materials that have a thin translucent layer over the base layer. Default is `0.0`.
  79. </p>
  80. <h3>[property:Texture clearcoatMap]</h3>
  81. <p>
  82. The red channel of this texture is multiplied against [page:.clearcoat], for per-pixel control
  83. over a coating's intensity. Default is `null`.
  84. </p>
  85. <h3>[property:Texture clearcoatNormalMap]</h3>
  86. <p>Can be used to enable independent normals for the clear coat layer. Default is `null`.</p>
  87. <h3>[property:Vector2 clearcoatNormalScale]</h3>
  88. <p>How much [page:.clearcoatNormalMap] affects the clear coat layer, from `(0,0)` to `(1,1)`. Default is `(1,1)`.</p>
  89. <h3>[property:Float clearcoatRoughness]</h3>
  90. <p>Roughness of the clear coat layer, from `0.0` to `1.0`. Default is `0.0`.</p>
  91. <h3>[property:Texture clearcoatRoughnessMap]</h3>
  92. <p>
  93. The green channel of this texture is multiplied against [page:.clearcoatRoughness], for per-pixel control
  94. over a coating's roughness. Default is `null`.
  95. </p>
  96. <h3>[property:Object defines]</h3>
  97. <p>An object of the form:
  98. <code>
  99. {
  100. 'STANDARD': ''
  101. 'PHYSICAL': '',
  102. };
  103. </code>
  104. This is used by the [page:WebGLRenderer] for selecting shaders.
  105. </p>
  106. <h3>[property:Float ior]</h3>
  107. <p>
  108. Index-of-refraction for non-metallic materials, from `1.0` to `2.333`. Default is `1.5`.<br />
  109. </p>
  110. <h3>[property:Float reflectivity]</h3>
  111. <p>
  112. Degree of reflectivity, from `0.0` to `1.0`. Default is `0.5`, which corresponds to an index-of-refraction of 1.5.<br />
  113. This models the reflectivity of non-metallic materials. It has no effect when [page:MeshStandardMaterial.metalness metalness] is `1.0`
  114. </p>
  115. <h3>[property:Float sheen]</h3>
  116. <p>
  117. The intensity of the sheen layer, from `0.0` to `1.0`. Default is `0.0`.
  118. </p>
  119. <h3>[property:Float sheenRoughness]</h3>
  120. <p>
  121. Roughness of the sheen layer, from `0.0` to `1.0`. Default is `1.0`.
  122. </p>
  123. <h3>[property:Texture sheenRoughnessMap]</h3>
  124. <p>
  125. The alpha channel of this texture is multiplied against [page:.sheenRoughness], for per-pixel control
  126. over sheen roughness. Default is `null`.
  127. </p>
  128. <h3>[property:Color sheenColor]</h3>
  129. <p>
  130. The sheen tint. Default is `0xffffff`, white.
  131. </p>
  132. <h3>[property:Texture sheenColorMap]</h3>
  133. <p>
  134. The RGB channels of this texture are multiplied against [page:.sheenColor], for per-pixel control
  135. over sheen tint. Default is `null`.
  136. </p>
  137. <h3>[property:Float specularIntensity]</h3>
  138. <p>
  139. A float that scales the amount of specular reflection for non-metals only. When set to zero, the model is effectively Lambertian. From `0.0` to `1.0`. Default is `0.0`.
  140. </p>
  141. <h3>[property:Texture specularIntensityMap]</h3>
  142. <p>
  143. The alpha channel of this texture is multiplied against [page:.specularIntensity], for per-pixel control over specular intensity. Default is `null`.
  144. </p>
  145. <h3>[property:Color specularColor]</h3>
  146. <p>
  147. A [page:Color] that tints the specular reflection at normal incidence for non-metals only.
  148. Default is `0xffffff`, white.
  149. </p>
  150. <h3>[property:Texture specularColorMap]</h3>
  151. <p>
  152. The RGB channels of this texture are multiplied against [page:.specularColor], for per-pixel control over specular color. Default is `null`.
  153. </p>
  154. <h3>[property:Float thickness]</h3>
  155. <p>
  156. The thickness of the volume beneath the surface. The value is given in the coordinate space of the mesh. If the value is 0 the material is thin-walled. Otherwise the material is a volume boundary. Default is `0`.
  157. </p>
  158. <h3>[property:Texture thicknessMap]</h3>
  159. <p>
  160. A texture that defines the thickness, stored in the G channel. This will be multiplied by [page:.thickness]. Default is `null`.
  161. </p>
  162. <h3>[property:Float transmission]</h3>
  163. <p>
  164. Degree of transmission (or optical transparency), from `0.0` to `1.0`. Default is `0.0`.<br />
  165. Thin, transparent or semitransparent, plastic or glass materials remain largely reflective even if they are fully transmissive.
  166. The transmission property can be used to model these materials.<br />
  167. When transmission is non-zero, [page:Material.opacity opacity] should be set to `0`.
  168. </p>
  169. <h3>[property:Texture transmissionMap]</h3>
  170. <p>
  171. The red channel of this texture is multiplied against [page:.transmission], for per-pixel control
  172. over optical transparency. Default is `null`.
  173. </p>
  174. <h2>Methods</h2>
  175. <p>See the base [page:Material] and [page:MeshStandardMaterial] classes for common methods.</p>
  176. <h2>Source</h2>
  177. <p>
  178. [link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
  179. </p>
  180. </body>
  181. </html>