MeshPhysicalMaterial.html 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272
  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`.<br />
  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 sheen]</h3>
  145. <p>
  146. The intensity of the sheen layer, from `0.0` to `1.0`. Default is `0.0`.
  147. </p>
  148. <h3>[property:Float sheenRoughness]</h3>
  149. <p>Roughness of the sheen layer, from `0.0` to `1.0`. Default is `1.0`.</p>
  150. <h3>[property:Texture sheenRoughnessMap]</h3>
  151. <p>
  152. The alpha channel of this texture is multiplied against
  153. [page:.sheenRoughness], for per-pixel control over sheen roughness.
  154. Default is `null`.
  155. </p>
  156. <h3>[property:Color sheenColor]</h3>
  157. <p>The sheen tint. Default is `0xffffff`, white.</p>
  158. <h3>[property:Texture sheenColorMap]</h3>
  159. <p>
  160. The RGB channels of this texture are multiplied against
  161. [page:.sheenColor], for per-pixel control over sheen tint. Default is
  162. `null`.
  163. </p>
  164. <h3>[property:Float specularIntensity]</h3>
  165. <p>
  166. A float that scales the amount of specular reflection for non-metals only.
  167. When set to zero, the model is effectively Lambertian. From `0.0` to
  168. `1.0`. Default is `0.0`.
  169. </p>
  170. <h3>[property:Texture specularIntensityMap]</h3>
  171. <p>
  172. The alpha channel of this texture is multiplied against
  173. [page:.specularIntensity], for per-pixel control over specular intensity.
  174. Default is `null`.
  175. </p>
  176. <h3>[property:Color specularColor]</h3>
  177. <p>
  178. A [page:Color] that tints the specular reflection at normal incidence for
  179. non-metals only. Default is `0xffffff`, white.
  180. </p>
  181. <h3>[property:Texture specularColorMap]</h3>
  182. <p>
  183. The RGB channels of this texture are multiplied against
  184. [page:.specularColor], for per-pixel control over specular color. Default
  185. is `null`.
  186. </p>
  187. <h3>[property:Float thickness]</h3>
  188. <p>
  189. The thickness of the volume beneath the surface. The value is given in the
  190. coordinate space of the mesh. If the value is 0 the material is
  191. thin-walled. Otherwise the material is a volume boundary. Default is `0`.
  192. </p>
  193. <h3>[property:Texture thicknessMap]</h3>
  194. <p>
  195. A texture that defines the thickness, stored in the G channel. This will
  196. be multiplied by [page:.thickness]. Default is `null`.
  197. </p>
  198. <h3>[property:Float transmission]</h3>
  199. <p>
  200. Degree of transmission (or optical transparency), from `0.0` to `1.0`.
  201. Default is `0.0`.<br />
  202. Thin, transparent or semitransparent, plastic or glass materials remain
  203. largely reflective even if they are fully transmissive. The transmission
  204. property can be used to model these materials.<br />
  205. When transmission is non-zero, [page:Material.opacity opacity] should be
  206. set to `0`.
  207. </p>
  208. <h3>[property:Texture transmissionMap]</h3>
  209. <p>
  210. The red channel of this texture is multiplied against
  211. [page:.transmission], for per-pixel control over optical transparency.
  212. Default is `null`.
  213. </p>
  214. <h2>Methods</h2>
  215. <p>
  216. See the base [page:Material] and [page:MeshStandardMaterial] classes for
  217. common methods.
  218. </p>
  219. <h2>Source</h2>
  220. <p>
  221. [link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
  222. </p>
  223. </body>
  224. </html>