MeshPhysicalMaterial.html 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346
  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">
  51. <strong>parameters</strong>
  52. </td>
  53. <td class="description last">
  54. <p>An object with one or more properties
  55. defining the material's appearance. Any property of the material
  56. (including any property from inherited materials) can be passed
  57. in here. Color values can be passed any type of value accepted
  58. by <a href="Color.html#set">Color#set</a>.</p>
  59. </td>
  60. </tr>
  61. </tbody>
  62. </table>
  63. </div>
  64. </div>
  65. <h2 class="subsection-title">Properties</h2>
  66. <div class="member">
  67. <h3 class="name" id="anisotropy" translate="no">.<a href="#anisotropy">anisotropy</a><span class="type-signature"> : number</span> </h3>
  68. <div class="description">
  69. <p>The anisotropy strength, from <code>0.0</code> to <code>1.0</code>.</p>
  70. <p>Default is <code>0</code>.</p>
  71. </div>
  72. </div>
  73. <div class="member">
  74. <h3 class="name" id="anisotropyMap" translate="no">.<a href="#anisotropyMap">anisotropyMap</a><span class="type-signature"> : <a href="Texture.html">Texture</a></span> </h3>
  75. <div class="description">
  76. <p>Red and green channels represent the anisotropy direction in <code>[-1, 1]</code> tangent,
  77. bitangent space, to be rotated by <code>anisotropyRotation</code>. The blue channel
  78. contains strength as <code>[0, 1]</code> to be multiplied by <code>anisotropy</code>.</p>
  79. <p>Default is <code>null</code>.</p>
  80. </div>
  81. </div>
  82. <div class="member">
  83. <h3 class="name" id="anisotropyRotation" translate="no">.<a href="#anisotropyRotation">anisotropyRotation</a><span class="type-signature"> : number</span> </h3>
  84. <div class="description">
  85. <p>The rotation of the anisotropy in tangent, bitangent space, measured in radians
  86. counter-clockwise from the tangent. When <code>anisotropyMap</code> is present, this
  87. property provides additional rotation to the vectors in the texture.</p>
  88. <p>Default is <code>1</code>.</p>
  89. </div>
  90. </div>
  91. <div class="member">
  92. <h3 class="name" id="attenuationColor" translate="no">.<a href="#attenuationColor">attenuationColor</a><span class="type-signature"> : <a href="Color.html">Color</a></span> </h3>
  93. <div class="description">
  94. <p>The color that white light turns into due to absorption when reaching the
  95. attenuation distance.</p>
  96. <p>Default is <code>(1,1,1)</code>.</p>
  97. </div>
  98. </div>
  99. <div class="member">
  100. <h3 class="name" id="attenuationDistance" translate="no">.<a href="#attenuationDistance">attenuationDistance</a><span class="type-signature"> : number</span> </h3>
  101. <div class="description">
  102. <p>Density of the medium given as the average distance that light travels in
  103. the medium before interacting with a particle. The value is given in world
  104. space units, and must be greater than zero.</p>
  105. <p>Default is <code>Infinity</code>.</p>
  106. </div>
  107. </div>
  108. <div class="member">
  109. <h3 class="name" id="clearcoat" translate="no">.<a href="#clearcoat">clearcoat</a><span class="type-signature"> : number</span> </h3>
  110. <div class="description">
  111. <p>Represents the intensity of the clear coat layer, from <code>0.0</code> to <code>1.0</code>. Use
  112. clear coat related properties to enable multilayer materials that have a
  113. thin translucent layer over the base layer.</p>
  114. <p>Default is <code>0</code>.</p>
  115. </div>
  116. </div>
  117. <div class="member">
  118. <h3 class="name" id="clearcoatMap" translate="no">.<a href="#clearcoatMap">clearcoatMap</a><span class="type-signature"> : <a href="Texture.html">Texture</a></span> </h3>
  119. <div class="description">
  120. <p>The red channel of this texture is multiplied against <code>clearcoat</code>,
  121. for per-pixel control over a coating's intensity.</p>
  122. <p>Default is <code>null</code>.</p>
  123. </div>
  124. </div>
  125. <div class="member">
  126. <h3 class="name" id="clearcoatNormalMap" translate="no">.<a href="#clearcoatNormalMap">clearcoatNormalMap</a><span class="type-signature"> : <a href="Texture.html">Texture</a></span> </h3>
  127. <div class="description">
  128. <p>Can be used to enable independent normals for the clear coat layer.</p>
  129. <p>Default is <code>null</code>.</p>
  130. </div>
  131. </div>
  132. <div class="member">
  133. <h3 class="name" id="clearcoatNormalScale" translate="no">.<a href="#clearcoatNormalScale">clearcoatNormalScale</a><span class="type-signature"> : <a href="Vector2.html">Vector2</a></span> </h3>
  134. <div class="description">
  135. <p>How much <code>clearcoatNormalMap</code> affects the clear coat layer, from
  136. <code>(0,0)</code> to <code>(1,1)</code>.</p>
  137. <p>Default is <code>(1,1)</code>.</p>
  138. </div>
  139. </div>
  140. <div class="member">
  141. <h3 class="name" id="clearcoatRoughness" translate="no">.<a href="#clearcoatRoughness">clearcoatRoughness</a><span class="type-signature"> : number</span> </h3>
  142. <div class="description">
  143. <p>Roughness of the clear coat layer, from <code>0.0</code> to <code>1.0</code>.</p>
  144. <p>Default is <code>0</code>.</p>
  145. </div>
  146. </div>
  147. <div class="member">
  148. <h3 class="name" id="clearcoatRoughnessMap" translate="no">.<a href="#clearcoatRoughnessMap">clearcoatRoughnessMap</a><span class="type-signature"> : <a href="Texture.html">Texture</a></span> </h3>
  149. <div class="description">
  150. <p>The green channel of this texture is multiplied against
  151. <code>clearcoatRoughness</code>, for per-pixel control over a coating's roughness.</p>
  152. <p>Default is <code>null</code>.</p>
  153. </div>
  154. </div>
  155. <div class="member">
  156. <h3 class="name" id="dispersion" translate="no">.<a href="#dispersion">dispersion</a><span class="type-signature"> : number</span> </h3>
  157. <div class="description">
  158. <p>Defines the strength of the angular separation of colors (chromatic aberration) transmitting
  159. through a relatively clear volume. Any value zero or larger is valid, the typical range of
  160. realistic values is <code>[0, 1]</code>. This property can be only be used with transmissive objects.</p>
  161. <p>Default is <code>0</code>.</p>
  162. </div>
  163. </div>
  164. <div class="member">
  165. <h3 class="name" id="ior" translate="no">.<a href="#ior">ior</a><span class="type-signature"> : number</span> </h3>
  166. <div class="description">
  167. <p>Index-of-refraction for non-metallic materials, from <code>1.0</code> to <code>2.333</code>.</p>
  168. <p>Default is <code>1.5</code>.</p>
  169. </div>
  170. </div>
  171. <div class="member">
  172. <h3 class="name" id="iridescence" translate="no">.<a href="#iridescence">iridescence</a><span class="type-signature"> : number</span> </h3>
  173. <div class="description">
  174. <p>The intensity of the iridescence layer, simulating RGB color shift based on the angle between
  175. the surface and the viewer, from <code>0.0</code> to <code>1.0</code>.</p>
  176. <p>Default is <code>0</code>.</p>
  177. </div>
  178. </div>
  179. <div class="member">
  180. <h3 class="name" id="iridescenceIOR" translate="no">.<a href="#iridescenceIOR">iridescenceIOR</a><span class="type-signature"> : number</span> </h3>
  181. <div class="description">
  182. <p>Strength of the iridescence RGB color shift effect, represented by an index-of-refraction.
  183. Between <code>1.0</code> to <code>2.333</code>.</p>
  184. <p>Default is <code>1.3</code>.</p>
  185. </div>
  186. </div>
  187. <div class="member">
  188. <h3 class="name" id="iridescenceMap" translate="no">.<a href="#iridescenceMap">iridescenceMap</a><span class="type-signature"> : <a href="Texture.html">Texture</a></span> </h3>
  189. <div class="description">
  190. <p>The red channel of this texture is multiplied against <code>iridescence</code>, for per-pixel
  191. control over iridescence.</p>
  192. <p>Default is <code>null</code>.</p>
  193. </div>
  194. </div>
  195. <div class="member">
  196. <h3 class="name" id="iridescenceThicknessMap" translate="no">.<a href="#iridescenceThicknessMap">iridescenceThicknessMap</a><span class="type-signature"> : <a href="Texture.html">Texture</a></span> </h3>
  197. <div class="description">
  198. <p>A texture that defines the thickness of the iridescence layer, stored in the green channel.
  199. Minimum and maximum values of thickness are defined by <code>iridescenceThicknessRange</code> array:</p>
  200. <ul>
  201. <li><code>0.0</code> in the green channel will result in thickness equal to first element of the array.</li>
  202. <li><code>1.0</code> in the green channel will result in thickness equal to second element of the array.</li>
  203. <li>Values in-between will linearly interpolate between the elements of the array.</li>
  204. </ul>
  205. <p>Default is <code>null</code>.</p>
  206. </div>
  207. </div>
  208. <div class="member">
  209. <h3 class="name" id="iridescenceThicknessRange" translate="no">.<a href="#iridescenceThicknessRange">iridescenceThicknessRange</a><span class="type-signature"> : Array.&lt;number, number></span> </h3>
  210. <div class="description">
  211. <p>Array of exactly 2 elements, specifying minimum and maximum thickness of the iridescence layer.
  212. Thickness of iridescence layer has an equivalent effect of the one <code>thickness</code> has on <code>ior</code>.</p>
  213. <p>Default is <code>[100,400]</code>.</p>
  214. </div>
  215. </div>
  216. <div class="member">
  217. <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>
  218. <div class="description">
  219. <p>This flag can be used for type testing.</p>
  220. <p>Default is <code>true</code>.</p>
  221. </div>
  222. </div>
  223. <div class="member">
  224. <h3 class="name" id="reflectivity" translate="no">.<a href="#reflectivity">reflectivity</a><span class="type-signature"> : number</span> </h3>
  225. <div class="description">
  226. <p>Degree of reflectivity, from <code>0.0</code> to <code>1.0</code>. Default is <code>0.5</code>, which
  227. corresponds to an index-of-refraction of <code>1.5</code>.</p>
  228. <p>This models the reflectivity of non-metallic materials. It has no effect
  229. when <code>metalness</code> is <code>1.0</code></p>
  230. <p>Default is <code>0.5</code>.</p>
  231. </div>
  232. </div>
  233. <div class="member">
  234. <h3 class="name" id="sheen" translate="no">.<a href="#sheen">sheen</a><span class="type-signature"> : number</span> </h3>
  235. <div class="description">
  236. <p>The intensity of the sheen layer, from <code>0.0</code> to <code>1.0</code>.</p>
  237. <p>Default is <code>0</code>.</p>
  238. </div>
  239. </div>
  240. <div class="member">
  241. <h3 class="name" id="sheenColor" translate="no">.<a href="#sheenColor">sheenColor</a><span class="type-signature"> : <a href="Color.html">Color</a></span> </h3>
  242. <div class="description">
  243. <p>The sheen tint.</p>
  244. <p>Default is <code>(0,0,0)</code>.</p>
  245. </div>
  246. </div>
  247. <div class="member">
  248. <h3 class="name" id="sheenColorMap" translate="no">.<a href="#sheenColorMap">sheenColorMap</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>sheenColor</code>, for per-pixel control
  251. over sheen tint.</p>
  252. <p>Default is <code>null</code>.</p>
  253. </div>
  254. </div>
  255. <div class="member">
  256. <h3 class="name" id="sheenRoughness" translate="no">.<a href="#sheenRoughness">sheenRoughness</a><span class="type-signature"> : number</span> </h3>
  257. <div class="description">
  258. <p>Roughness of the sheen layer, from <code>0.0</code> to <code>1.0</code>.</p>
  259. <p>Default is <code>1</code>.</p>
  260. </div>
  261. </div>
  262. <div class="member">
  263. <h3 class="name" id="sheenRoughnessMap" translate="no">.<a href="#sheenRoughnessMap">sheenRoughnessMap</a><span class="type-signature"> : <a href="Texture.html">Texture</a></span> </h3>
  264. <div class="description">
  265. <p>The alpha channel of this texture is multiplied against <code>sheenRoughness</code>, for per-pixel control
  266. over sheen roughness.</p>
  267. <p>Default is <code>null</code>.</p>
  268. </div>
  269. </div>
  270. <div class="member">
  271. <h3 class="name" id="specularColor" translate="no">.<a href="#specularColor">specularColor</a><span class="type-signature"> : <a href="Color.html">Color</a></span> </h3>
  272. <div class="description">
  273. <p>Tints the specular reflection at normal incidence for non-metals only.</p>
  274. <p>Default is <code>(1,1,1)</code>.</p>
  275. </div>
  276. </div>
  277. <div class="member">
  278. <h3 class="name" id="specularColorMap" translate="no">.<a href="#specularColorMap">specularColorMap</a><span class="type-signature"> : <a href="Texture.html">Texture</a></span> </h3>
  279. <div class="description">
  280. <p>The RGB channels of this texture are multiplied against <code>specularColor</code>,
  281. for per-pixel control over specular color.</p>
  282. <p>Default is <code>null</code>.</p>
  283. </div>
  284. </div>
  285. <div class="member">
  286. <h3 class="name" id="specularIntensity" translate="no">.<a href="#specularIntensity">specularIntensity</a><span class="type-signature"> : number</span> </h3>
  287. <div class="description">
  288. <p>A float that scales the amount of specular reflection for non-metals only.
  289. When set to zero, the model is effectively Lambertian. From <code>0.0</code> to <code>1.0</code>.</p>
  290. <p>Default is <code>1</code>.</p>
  291. </div>
  292. </div>
  293. <div class="member">
  294. <h3 class="name" id="specularIntensityMap" translate="no">.<a href="#specularIntensityMap">specularIntensityMap</a><span class="type-signature"> : <a href="Texture.html">Texture</a></span> </h3>
  295. <div class="description">
  296. <p>The alpha channel of this texture is multiplied against <code>specularIntensity</code>,
  297. for per-pixel control over specular intensity.</p>
  298. <p>Default is <code>null</code>.</p>
  299. </div>
  300. </div>
  301. <div class="member">
  302. <h3 class="name" id="thickness" translate="no">.<a href="#thickness">thickness</a><span class="type-signature"> : number</span> </h3>
  303. <div class="description">
  304. <p>The thickness of the volume beneath the surface. The value is given in the
  305. coordinate space of the mesh. If the value is <code>0</code> the material is
  306. thin-walled. Otherwise the material is a volume boundary.</p>
  307. <p>Default is <code>0</code>.</p>
  308. </div>
  309. </div>
  310. <div class="member">
  311. <h3 class="name" id="thicknessMap" translate="no">.<a href="#thicknessMap">thicknessMap</a><span class="type-signature"> : <a href="Texture.html">Texture</a></span> </h3>
  312. <div class="description">
  313. <p>A texture that defines the thickness, stored in the green channel. This will
  314. be multiplied by <code>thickness</code>.</p>
  315. <p>Default is <code>null</code>.</p>
  316. </div>
  317. </div>
  318. <div class="member">
  319. <h3 class="name" id="transmission" translate="no">.<a href="#transmission">transmission</a><span class="type-signature"> : number</span> </h3>
  320. <div class="description">
  321. <p>Degree of transmission (or optical transparency), from <code>0.0</code> to <code>1.0</code>.</p>
  322. <p>Thin, transparent or semitransparent, plastic or glass materials remain
  323. largely reflective even if they are fully transmissive. The transmission
  324. property can be used to model these materials.</p>
  325. <p>When transmission is non-zero, <code>opacity</code> should be set to <code>1</code>.</p>
  326. <p>Default is <code>0</code>.</p>
  327. </div>
  328. </div>
  329. <div class="member">
  330. <h3 class="name" id="transmissionMap" translate="no">.<a href="#transmissionMap">transmissionMap</a><span class="type-signature"> : <a href="Texture.html">Texture</a></span> </h3>
  331. <div class="description">
  332. <p>The red channel of this texture is multiplied against <code>transmission</code>, for per-pixel control over
  333. optical transparency.</p>
  334. <p>Default is <code>null</code>.</p>
  335. </div>
  336. </div>
  337. <h2 class="subsection-title">Source</h2>
  338. <p>
  339. <a href="https://github.com/mrdoob/three.js/blob/master/src/materials/MeshPhysicalMaterial.js" translate="no" target="_blank" rel="noopener">src/materials/MeshPhysicalMaterial.js</a>
  340. </p>
  341. </article>
  342. </section>
  343. <script src="../scripts/linenumber.js"></script>
  344. <script src="../scripts/page.js"></script>
  345. </body>
  346. </html>
粤ICP备19079148号