MeshPhysicalMaterial.html 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>MeshPhysicalMaterial - Three.js Docs</title>
  6. <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  7. <script src="../scripts/highlight.min.js"></script>
  8. <link type="text/css" rel="stylesheet" href="../styles/highlight-three.css">
  9. <link type="text/css" rel="stylesheet" href="../styles/page.css">
  10. </head>
  11. <body>
  12. <p class="inheritance" translate="no"><a href="EventDispatcher.html">EventDispatcher</a> → <a href="Material.html">Material</a> → <a href="MeshStandardMaterial.html">MeshStandardMaterial</a> → </p>
  13. <h1 translate="no">MeshPhysicalMaterial</h1>
  14. <section>
  15. <header>
  16. <div class="class-description"><p>An extension of the <a href="MeshStandardMaterial.html">MeshStandardMaterial</a>, providing more advanced
  17. physically-based rendering properties:</p>
  18. <ul>
  19. <li>Anisotropy: Ability to represent the anisotropic property of materials
  20. as observable with brushed metals.</li>
  21. <li>Clearcoat: Some materials — like car paints, carbon fiber, and wet surfaces — require
  22. a clear, reflective layer on top of another layer that may be irregular or rough.
  23. Clearcoat approximates this effect, without the need for a separate transparent surface.</li>
  24. <li>Iridescence: Allows to render the effect where hue varies depending on the viewing
  25. angle and illumination angle. This can be seen on soap bubbles, oil films, or on the
  26. wings of many insects.</li>
  27. <li>Physically-based transparency: One limitation of <a href="Material.html#opacity">Material#opacity</a> is that highly
  28. transparent materials are less reflective. Physically-based transmission provides a more
  29. realistic option for thin, transparent surfaces like glass.</li>
  30. <li>Advanced reflectivity: More flexible reflectivity for non-metallic materials.</li>
  31. <li>Sheen: Can be used for representing cloth and fabric materials.</li>
  32. </ul>
  33. <p>As a result of these complex shading features, <code>MeshPhysicalMaterial</code> has a
  34. higher performance cost, per pixel, than other three.js materials. Most
  35. effects are disabled by default, and add cost as they are enabled. For
  36. best results, always specify an environment map when using this material.</p></div>
  37. <iframe id="viewer" src="../scenes/material-browser.html#MeshPhysicalMaterial"></iframe>
  38. </header>
  39. <article>
  40. <div class="container-overview">
  41. <h2>Constructor</h2>
  42. <h3 class="name name-method" id="MeshPhysicalMaterial" translate="no">new <a href="#MeshPhysicalMaterial">MeshPhysicalMaterial</a><span class="signature">( parameters : <span class="param-type">Object</span> )</span> </h3>
  43. <div class="method">
  44. <div class="description">
  45. <p>Constructs a new mesh physical material.</p>
  46. </div>
  47. <table class="params">
  48. <tbody>
  49. <tr>
  50. <td class="name"><code>parameters</code></td>
  51. <td class="description last"><p>An object with one or more properties
  52. defining the material's appearance. Any property of the material
  53. (including any property from inherited materials) can be passed
  54. in here. Color values can be passed any type of value accepted
  55. by <a href="Color.html#set">Color#set</a>.</p></td>
  56. </tr>
  57. </tbody>
  58. </table>
  59. </div>
  60. </div>
  61. <h2 class="subsection-title">Properties</h2>
  62. <div class="member">
  63. <h3 class="name" id="anisotropy" translate="no">.<a href="#anisotropy">anisotropy</a><span class="type-signature"> : number</span> </h3>
  64. <div class="description">
  65. <p>The anisotropy strength, from <code>0.0</code> to <code>1.0</code>.<br/>Default is <code>0</code>.</p>
  66. </div>
  67. </div>
  68. <div class="member">
  69. <h3 class="name" id="anisotropyMap" translate="no">.<a href="#anisotropyMap">anisotropyMap</a><span class="type-signature"> : <a href="Texture.html">Texture</a></span> </h3>
  70. <div class="description">
  71. <p>Red and green channels represent the anisotropy direction in <code>[-1, 1]</code> tangent,
  72. bitangent space, to be rotated by <code>anisotropyRotation</code>. The blue channel
  73. contains strength as <code>[0, 1]</code> to be multiplied by <code>anisotropy</code>.<br/>Default is <code>null</code>.</p>
  74. </div>
  75. </div>
  76. <div class="member">
  77. <h3 class="name" id="anisotropyRotation" translate="no">.<a href="#anisotropyRotation">anisotropyRotation</a><span class="type-signature"> : number</span> </h3>
  78. <div class="description">
  79. <p>The rotation of the anisotropy in tangent, bitangent space, measured in radians
  80. counter-clockwise from the tangent. When <code>anisotropyMap</code> is present, this
  81. property provides additional rotation to the vectors in the texture.<br/>Default is <code>1</code>.</p>
  82. </div>
  83. </div>
  84. <div class="member">
  85. <h3 class="name" id="attenuationColor" translate="no">.<a href="#attenuationColor">attenuationColor</a><span class="type-signature"> : <a href="Color.html">Color</a></span> </h3>
  86. <div class="description">
  87. <p>The color that white light turns into due to absorption when reaching the
  88. attenuation distance.<br/>Default is <code>(1,1,1)</code>.</p>
  89. </div>
  90. </div>
  91. <div class="member">
  92. <h3 class="name" id="attenuationDistance" translate="no">.<a href="#attenuationDistance">attenuationDistance</a><span class="type-signature"> : number</span> </h3>
  93. <div class="description">
  94. <p>Density of the medium given as the average distance that light travels in
  95. the medium before interacting with a particle. The value is given in world
  96. space units, and must be greater than zero.<br/>Default is <code>Infinity</code>.</p>
  97. </div>
  98. </div>
  99. <div class="member">
  100. <h3 class="name" id="clearcoat" translate="no">.<a href="#clearcoat">clearcoat</a><span class="type-signature"> : number</span> </h3>
  101. <div class="description">
  102. <p>Represents the intensity of the clear coat layer, from <code>0.0</code> to <code>1.0</code>. Use
  103. clear coat related properties to enable multilayer materials that have a
  104. thin translucent layer over the base layer.<br/>Default is <code>0</code>.</p>
  105. </div>
  106. </div>
  107. <div class="member">
  108. <h3 class="name" id="clearcoatMap" translate="no">.<a href="#clearcoatMap">clearcoatMap</a><span class="type-signature"> : <a href="Texture.html">Texture</a></span> </h3>
  109. <div class="description">
  110. <p>The red channel of this texture is multiplied against <code>clearcoat</code>,
  111. for per-pixel control over a coating's intensity.<br/>Default is <code>null</code>.</p>
  112. </div>
  113. </div>
  114. <div class="member">
  115. <h3 class="name" id="clearcoatNormalMap" translate="no">.<a href="#clearcoatNormalMap">clearcoatNormalMap</a><span class="type-signature"> : <a href="Texture.html">Texture</a></span> </h3>
  116. <div class="description">
  117. <p>Can be used to enable independent normals for the clear coat layer.<br/>Default is <code>null</code>.</p>
  118. </div>
  119. </div>
  120. <div class="member">
  121. <h3 class="name" id="clearcoatNormalScale" translate="no">.<a href="#clearcoatNormalScale">clearcoatNormalScale</a><span class="type-signature"> : <a href="Vector2.html">Vector2</a></span> </h3>
  122. <div class="description">
  123. <p>How much <code>clearcoatNormalMap</code> affects the clear coat layer, from
  124. <code>(0,0)</code> to <code>(1,1)</code>.<br/>Default is <code>(1,1)</code>.</p>
  125. </div>
  126. </div>
  127. <div class="member">
  128. <h3 class="name" id="clearcoatRoughness" translate="no">.<a href="#clearcoatRoughness">clearcoatRoughness</a><span class="type-signature"> : number</span> </h3>
  129. <div class="description">
  130. <p>Roughness of the clear coat layer, from <code>0.0</code> to <code>1.0</code>.<br/>Default is <code>0</code>.</p>
  131. </div>
  132. </div>
  133. <div class="member">
  134. <h3 class="name" id="clearcoatRoughnessMap" translate="no">.<a href="#clearcoatRoughnessMap">clearcoatRoughnessMap</a><span class="type-signature"> : <a href="Texture.html">Texture</a></span> </h3>
  135. <div class="description">
  136. <p>The green channel of this texture is multiplied against
  137. <code>clearcoatRoughness</code>, for per-pixel control over a coating's roughness.<br/>Default is <code>null</code>.</p>
  138. </div>
  139. </div>
  140. <div class="member">
  141. <h3 class="name" id="dispersion" translate="no">.<a href="#dispersion">dispersion</a><span class="type-signature"> : number</span> </h3>
  142. <div class="description">
  143. <p>Defines the strength of the angular separation of colors (chromatic aberration) transmitting
  144. through a relatively clear volume. Any value zero or larger is valid, the typical range of
  145. realistic values is <code>[0, 1]</code>. This property can be only be used with transmissive objects.<br/>Default is <code>0</code>.</p>
  146. </div>
  147. </div>
  148. <div class="member">
  149. <h3 class="name" id="ior" translate="no">.<a href="#ior">ior</a><span class="type-signature"> : number</span> </h3>
  150. <div class="description">
  151. <p>Index-of-refraction for non-metallic materials, from <code>1.0</code> to <code>2.333</code>.<br/>Default is <code>1.5</code>.</p>
  152. </div>
  153. </div>
  154. <div class="member">
  155. <h3 class="name" id="iridescence" translate="no">.<a href="#iridescence">iridescence</a><span class="type-signature"> : number</span> </h3>
  156. <div class="description">
  157. <p>The intensity of the iridescence layer, simulating RGB color shift based on the angle between
  158. the surface and the viewer, from <code>0.0</code> to <code>1.0</code>.<br/>Default is <code>0</code>.</p>
  159. </div>
  160. </div>
  161. <div class="member">
  162. <h3 class="name" id="iridescenceIOR" translate="no">.<a href="#iridescenceIOR">iridescenceIOR</a><span class="type-signature"> : number</span> </h3>
  163. <div class="description">
  164. <p>Strength of the iridescence RGB color shift effect, represented by an index-of-refraction.
  165. Between <code>1.0</code> to <code>2.333</code>.<br/>Default is <code>1.3</code>.</p>
  166. </div>
  167. </div>
  168. <div class="member">
  169. <h3 class="name" id="iridescenceMap" translate="no">.<a href="#iridescenceMap">iridescenceMap</a><span class="type-signature"> : <a href="Texture.html">Texture</a></span> </h3>
  170. <div class="description">
  171. <p>The red channel of this texture is multiplied against <code>iridescence</code>, for per-pixel
  172. control over iridescence.<br/>Default is <code>null</code>.</p>
  173. </div>
  174. </div>
  175. <div class="member">
  176. <h3 class="name" id="iridescenceThicknessMap" translate="no">.<a href="#iridescenceThicknessMap">iridescenceThicknessMap</a><span class="type-signature"> : <a href="Texture.html">Texture</a></span> </h3>
  177. <div class="description">
  178. <p>A texture that defines the thickness of the iridescence layer, stored in the green channel.
  179. Minimum and maximum values of thickness are defined by <code>iridescenceThicknessRange</code> array:</p>
  180. <ul>
  181. <li><code>0.0</code> in the green channel will result in thickness equal to first element of the array.</li>
  182. <li><code>1.0</code> in the green channel will result in thickness equal to second element of the array.</li>
  183. <li>Values in-between will linearly interpolate between the elements of the array.</li>
  184. </ul><br/>Default is <code>null</code>.
  185. </div>
  186. </div>
  187. <div class="member">
  188. <h3 class="name" id="iridescenceThicknessRange" translate="no">.<a href="#iridescenceThicknessRange">iridescenceThicknessRange</a><span class="type-signature"> : Array.&lt;number, number></span> </h3>
  189. <div class="description">
  190. <p>Array of exactly 2 elements, specifying minimum and maximum thickness of the iridescence layer.
  191. Thickness of iridescence layer has an equivalent effect of the one <code>thickness</code> has on <code>ior</code>.<br/>Default is <code>[100,400]</code>.</p>
  192. </div>
  193. </div>
  194. <div class="member">
  195. <h3 class="name" id="isMeshPhysicalMaterial" translate="no">.<a href="#isMeshPhysicalMaterial">isMeshPhysicalMaterial</a><span class="type-signature"> : boolean</span> <span class="type-signature">(readonly) </span></h3>
  196. <div class="description">
  197. <p>This flag can be used for type testing.<br/>Default is <code>true</code>.</p>
  198. </div>
  199. </div>
  200. <div class="member">
  201. <h3 class="name" id="reflectivity" translate="no">.<a href="#reflectivity">reflectivity</a><span class="type-signature"> : number</span> </h3>
  202. <div class="description">
  203. <p>Degree of reflectivity, from <code>0.0</code> to <code>1.0</code>. Default is <code>0.5</code>, which
  204. corresponds to an index-of-refraction of <code>1.5</code>.</p>
  205. <p>This models the reflectivity of non-metallic materials. It has no effect
  206. when <code>metalness</code> is <code>1.0</code><br/>Default is <code>0.5</code>.</p>
  207. </div>
  208. </div>
  209. <div class="member">
  210. <h3 class="name" id="sheen" translate="no">.<a href="#sheen">sheen</a><span class="type-signature"> : number</span> </h3>
  211. <div class="description">
  212. <p>The intensity of the sheen layer, from <code>0.0</code> to <code>1.0</code>.<br/>Default is <code>0</code>.</p>
  213. </div>
  214. </div>
  215. <div class="member">
  216. <h3 class="name" id="sheenColor" translate="no">.<a href="#sheenColor">sheenColor</a><span class="type-signature"> : <a href="Color.html">Color</a></span> </h3>
  217. <div class="description">
  218. <p>The sheen tint.<br/>Default is <code>(0,0,0)</code>.</p>
  219. </div>
  220. </div>
  221. <div class="member">
  222. <h3 class="name" id="sheenColorMap" translate="no">.<a href="#sheenColorMap">sheenColorMap</a><span class="type-signature"> : <a href="Texture.html">Texture</a></span> </h3>
  223. <div class="description">
  224. <p>The RGB channels of this texture are multiplied against <code>sheenColor</code>, for per-pixel control
  225. over sheen tint.<br/>Default is <code>null</code>.</p>
  226. </div>
  227. </div>
  228. <div class="member">
  229. <h3 class="name" id="sheenRoughness" translate="no">.<a href="#sheenRoughness">sheenRoughness</a><span class="type-signature"> : number</span> </h3>
  230. <div class="description">
  231. <p>Roughness of the sheen layer, from <code>0.0</code> to <code>1.0</code>.<br/>Default is <code>1</code>.</p>
  232. </div>
  233. </div>
  234. <div class="member">
  235. <h3 class="name" id="sheenRoughnessMap" translate="no">.<a href="#sheenRoughnessMap">sheenRoughnessMap</a><span class="type-signature"> : <a href="Texture.html">Texture</a></span> </h3>
  236. <div class="description">
  237. <p>The alpha channel of this texture is multiplied against <code>sheenRoughness</code>, for per-pixel control
  238. over sheen roughness.<br/>Default is <code>null</code>.</p>
  239. </div>
  240. </div>
  241. <div class="member">
  242. <h3 class="name" id="specularColor" translate="no">.<a href="#specularColor">specularColor</a><span class="type-signature"> : <a href="Color.html">Color</a></span> </h3>
  243. <div class="description">
  244. <p>Tints the specular reflection at normal incidence for non-metals only.<br/>Default is <code>(1,1,1)</code>.</p>
  245. </div>
  246. </div>
  247. <div class="member">
  248. <h3 class="name" id="specularColorMap" translate="no">.<a href="#specularColorMap">specularColorMap</a><span class="type-signature"> : <a href="Texture.html">Texture</a></span> </h3>
  249. <div class="description">
  250. <p>The RGB channels of this texture are multiplied against <code>specularColor</code>,
  251. for per-pixel control over specular color.<br/>Default is <code>null</code>.</p>
  252. </div>
  253. </div>
  254. <div class="member">
  255. <h3 class="name" id="specularIntensity" translate="no">.<a href="#specularIntensity">specularIntensity</a><span class="type-signature"> : number</span> </h3>
  256. <div class="description">
  257. <p>A float that scales the amount of specular reflection for non-metals only.
  258. When set to zero, the model is effectively Lambertian. From <code>0.0</code> to <code>1.0</code>.<br/>Default is <code>1</code>.</p>
  259. </div>
  260. </div>
  261. <div class="member">
  262. <h3 class="name" id="specularIntensityMap" translate="no">.<a href="#specularIntensityMap">specularIntensityMap</a><span class="type-signature"> : <a href="Texture.html">Texture</a></span> </h3>
  263. <div class="description">
  264. <p>The alpha channel of this texture is multiplied against <code>specularIntensity</code>,
  265. for per-pixel control over specular intensity.<br/>Default is <code>null</code>.</p>
  266. </div>
  267. </div>
  268. <div class="member">
  269. <h3 class="name" id="thickness" translate="no">.<a href="#thickness">thickness</a><span class="type-signature"> : number</span> </h3>
  270. <div class="description">
  271. <p>The thickness of the volume beneath the surface. The value is given in the
  272. coordinate space of the mesh. If the value is <code>0</code> the material is
  273. thin-walled. Otherwise the material is a volume boundary.<br/>Default is <code>0</code>.</p>
  274. </div>
  275. </div>
  276. <div class="member">
  277. <h3 class="name" id="thicknessMap" translate="no">.<a href="#thicknessMap">thicknessMap</a><span class="type-signature"> : <a href="Texture.html">Texture</a></span> </h3>
  278. <div class="description">
  279. <p>A texture that defines the thickness, stored in the green channel. This will
  280. be multiplied by <code>thickness</code>.<br/>Default is <code>null</code>.</p>
  281. </div>
  282. </div>
  283. <div class="member">
  284. <h3 class="name" id="transmission" translate="no">.<a href="#transmission">transmission</a><span class="type-signature"> : number</span> </h3>
  285. <div class="description">
  286. <p>Degree of transmission (or optical transparency), from <code>0.0</code> to <code>1.0</code>.</p>
  287. <p>Thin, transparent or semitransparent, plastic or glass materials remain
  288. largely reflective even if they are fully transmissive. The transmission
  289. property can be used to model these materials.</p>
  290. <p>When transmission is non-zero, <code>opacity</code> should be set to <code>1</code>.<br/>Default is <code>0</code>.</p>
  291. </div>
  292. </div>
  293. <div class="member">
  294. <h3 class="name" id="transmissionMap" translate="no">.<a href="#transmissionMap">transmissionMap</a><span class="type-signature"> : <a href="Texture.html">Texture</a></span> </h3>
  295. <div class="description">
  296. <p>The red channel of this texture is multiplied against <code>transmission</code>, for per-pixel control over
  297. optical transparency.<br/>Default is <code>null</code>.</p>
  298. </div>
  299. </div>
  300. <h2 class="subsection-title">Source</h2>
  301. <p>
  302. <a href="https://github.com/mrdoob/three.js/blob/master/src/materials/MeshPhysicalMaterial.js" target="_blank" rel="noopener" translate="no">src/materials/MeshPhysicalMaterial.js</a>
  303. </p>
  304. </article>
  305. </section>
  306. <script src="../scripts/linenumber.js"></script>
  307. <script src="../scripts/page.js"></script>
  308. </body>
  309. </html>
粤ICP备19079148号