2
0

MeshPhysicalMaterial.html 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274
  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_variations_physical materials / variations / physical]<br />
  60. [example:webgl_materials_physical_clearcoat materials / physical / clearcoat]<br />
  61. [example:webgl_materials_physical_reflectivity materials / physical / reflectivity]<br />
  62. [example:webgl_loader_gltf_sheen loader / gltf / sheen]<br />
  63. [example:webgl_materials_physical_transmission materials / physical / transmission]
  64. </p>
  65. <h2>Constructor</h2>
  66. <h3>[name]( [param:Object parameters] )</h3>
  67. <p>
  68. [page:Object parameters] - (optional) an object with one or more
  69. properties defining the material's appearance. Any property of the
  70. material (including any property inherited from [page:Material] and
  71. [page:MeshStandardMaterial]) can be passed in here.<br /><br />
  72. The exception is the property [page:Hexadecimal color], which can be
  73. passed in as a hexadecimal string and is `0xffffff` (white) by default.
  74. [page:Color.set]( color ) is called internally.
  75. </p>
  76. <h2>Properties</h2>
  77. <p>
  78. See the base [page:Material] and [page:MeshStandardMaterial] classes for
  79. common properties.
  80. </p>
  81. <h3>[property:Color attenuationColor]</h3>
  82. <p>
  83. The color that white light turns into due to absorption when reaching the
  84. attenuation distance. Default is `white` (0xffffff).
  85. </p>
  86. <h3>[property:Float attenuationDistance]</h3>
  87. <p>
  88. Density of the medium given as the average distance that light travels in
  89. the medium before interacting with a particle. The value is given in world
  90. space units, and must be greater than zero. Default is `Infinity`.
  91. </p>
  92. <h3>[property:Float clearcoat]</h3>
  93. <p>
  94. Represents the intensity of the clear coat layer, from `0.0` to `1.0`. Use
  95. clear coat related properties to enable multilayer materials that have a
  96. thin translucent layer over the base layer. Default is `0.0`.
  97. </p>
  98. <h3>[property:Texture clearcoatMap]</h3>
  99. <p>
  100. The red channel of this texture is multiplied against [page:.clearcoat],
  101. for per-pixel control over a coating's intensity. Default is `null`.
  102. </p>
  103. <h3>[property:Texture clearcoatNormalMap]</h3>
  104. <p>
  105. Can be used to enable independent normals for the clear coat layer.
  106. Default is `null`.
  107. </p>
  108. <h3>[property:Vector2 clearcoatNormalScale]</h3>
  109. <p>
  110. How much [page:.clearcoatNormalMap] affects the clear coat layer, from
  111. `(0,0)` to `(1,1)`. Default is `(1,1)`.
  112. </p>
  113. <h3>[property:Float clearcoatRoughness]</h3>
  114. <p>
  115. Roughness of the clear coat layer, from `0.0` to `1.0`. Default is `0.0`.
  116. </p>
  117. <h3>[property:Texture clearcoatRoughnessMap]</h3>
  118. <p>
  119. The green channel of this texture is multiplied against
  120. [page:.clearcoatRoughness], for per-pixel control over a coating's
  121. roughness. Default is `null`.
  122. </p>
  123. <h3>[property:Object defines]</h3>
  124. <p>
  125. An object of the form:
  126. <code>
  127. {
  128. 'STANDARD': '',
  129. 'PHYSICAL': '',
  130. };
  131. </code>
  132. This is used by the [page:WebGLRenderer] for selecting shaders.
  133. </p>
  134. <h3>[property:Float ior]</h3>
  135. <p>
  136. Index-of-refraction for non-metallic materials, from `1.0` to `2.333`.
  137. Default is `1.5`.<br />
  138. </p>
  139. <h3>[property:Float reflectivity]</h3>
  140. <p>
  141. Degree of reflectivity, from `0.0` to `1.0`. Default is `0.5`, which
  142. corresponds to an index-of-refraction of 1.5.<br />
  143. This models the reflectivity of non-metallic materials. It has no effect
  144. when [page:MeshStandardMaterial.metalness metalness] is `1.0`
  145. </p>
  146. <h3>[property:Float sheen]</h3>
  147. <p>
  148. The intensity of the sheen layer, from `0.0` to `1.0`. Default is `0.0`.
  149. </p>
  150. <h3>[property:Float sheenRoughness]</h3>
  151. <p>Roughness of the sheen layer, from `0.0` to `1.0`. Default is `1.0`.</p>
  152. <h3>[property:Texture sheenRoughnessMap]</h3>
  153. <p>
  154. The alpha channel of this texture is multiplied against
  155. [page:.sheenRoughness], for per-pixel control over sheen roughness.
  156. Default is `null`.
  157. </p>
  158. <h3>[property:Color sheenColor]</h3>
  159. <p>The sheen tint. Default is `0xffffff`, white.</p>
  160. <h3>[property:Texture sheenColorMap]</h3>
  161. <p>
  162. The RGB channels of this texture are multiplied against
  163. [page:.sheenColor], for per-pixel control over sheen tint. Default is
  164. `null`.
  165. </p>
  166. <h3>[property:Float specularIntensity]</h3>
  167. <p>
  168. A float that scales the amount of specular reflection for non-metals only.
  169. When set to zero, the model is effectively Lambertian. From `0.0` to
  170. `1.0`. Default is `0.0`.
  171. </p>
  172. <h3>[property:Texture specularIntensityMap]</h3>
  173. <p>
  174. The alpha channel of this texture is multiplied against
  175. [page:.specularIntensity], for per-pixel control over specular intensity.
  176. Default is `null`.
  177. </p>
  178. <h3>[property:Color specularColor]</h3>
  179. <p>
  180. A [page:Color] that tints the specular reflection at normal incidence for
  181. non-metals only. Default is `0xffffff`, white.
  182. </p>
  183. <h3>[property:Texture specularColorMap]</h3>
  184. <p>
  185. The RGB channels of this texture are multiplied against
  186. [page:.specularColor], for per-pixel control over specular color. Default
  187. is `null`.
  188. </p>
  189. <h3>[property:Float thickness]</h3>
  190. <p>
  191. The thickness of the volume beneath the surface. The value is given in the
  192. coordinate space of the mesh. If the value is 0 the material is
  193. thin-walled. Otherwise the material is a volume boundary. Default is `0`.
  194. </p>
  195. <h3>[property:Texture thicknessMap]</h3>
  196. <p>
  197. A texture that defines the thickness, stored in the G channel. This will
  198. be multiplied by [page:.thickness]. Default is `null`.
  199. </p>
  200. <h3>[property:Float transmission]</h3>
  201. <p>
  202. Degree of transmission (or optical transparency), from `0.0` to `1.0`.
  203. Default is `0.0`.<br />
  204. Thin, transparent or semitransparent, plastic or glass materials remain
  205. largely reflective even if they are fully transmissive. The transmission
  206. property can be used to model these materials.<br />
  207. When transmission is non-zero, [page:Material.opacity opacity] should be
  208. set to `0`.
  209. </p>
  210. <h3>[property:Texture transmissionMap]</h3>
  211. <p>
  212. The red channel of this texture is multiplied against
  213. [page:.transmission], for per-pixel control over optical transparency.
  214. Default is `null`.
  215. </p>
  216. <h2>Methods</h2>
  217. <p>
  218. See the base [page:Material] and [page:MeshStandardMaterial] classes for
  219. common methods.
  220. </p>
  221. <h2>Source</h2>
  222. <p>
  223. [link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
  224. </p>
  225. </body>
  226. </html>