Material.html 38 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Material - 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> → </p>
  13. <h1 translate="no">Material</h1>
  14. <section>
  15. <header>
  16. <div class="class-description"><p>Abstract base class for materials.</p>
  17. <p>Materials define the appearance of renderable 3D objects.</p></div>
  18. </header>
  19. <article>
  20. <div class="container-overview">
  21. <h2>Constructor</h2>
  22. <h3 class="name name-method" id="Material" translate="no">new <a href="#Material">Material</a><span class="signature">()</span> <span class="type-signature">(abstract) </span></h3>
  23. <div class="method">
  24. <div class="description">
  25. <p>Constructs a new material.</p>
  26. </div>
  27. </div>
  28. </div>
  29. <h2 class="subsection-title">Properties</h2>
  30. <div class="member">
  31. <h3 class="name" id="allowOverride" translate="no">.<a href="#allowOverride">allowOverride</a><span class="type-signature"> : boolean</span> </h3>
  32. <div class="description">
  33. <p>Whether it's possible to override the material with <a href="Scene.html#overrideMaterial">Scene#overrideMaterial</a> or not.</p>
  34. <p>Default is <code>true</code>.</p>
  35. </div>
  36. </div>
  37. <div class="member">
  38. <h3 class="name" id="alphaHash" translate="no">.<a href="#alphaHash">alphaHash</a><span class="type-signature"> : boolean</span> </h3>
  39. <div class="description">
  40. <p>Enables alpha hashed transparency, an alternative to <a href="Material.html#transparent">Material#transparent</a> or
  41. <a href="Material.html#alphaTest">Material#alphaTest</a>. The material will not be rendered if opacity is lower than
  42. a random threshold. Randomization introduces some grain or noise, but approximates alpha
  43. blending without the associated problems of sorting. Using TAA can reduce the resulting noise.</p>
  44. <p>Default is <code>false</code>.</p>
  45. </div>
  46. </div>
  47. <div class="member">
  48. <h3 class="name" id="alphaTest" translate="no">.<a href="#alphaTest">alphaTest</a><span class="type-signature"> : number</span> <span class="type-signature">(readonly) </span></h3>
  49. <div class="description">
  50. <p>Sets the alpha value to be used when running an alpha test. The material
  51. will not be rendered if the opacity is lower than this value.</p>
  52. <p>Default is <code>0</code>.</p>
  53. </div>
  54. </div>
  55. <div class="member">
  56. <h3 class="name" id="alphaToCoverage" translate="no">.<a href="#alphaToCoverage">alphaToCoverage</a><span class="type-signature"> : boolean</span> </h3>
  57. <div class="description">
  58. <p>Whether alpha to coverage should be enabled or not. Can only be used with MSAA-enabled contexts
  59. (meaning when the renderer was created with <em>antialias</em> parameter set to <code>true</code>). Enabling this
  60. will smooth aliasing on clip plane edges and alphaTest-clipped edges.</p>
  61. <p>Default is <code>false</code>.</p>
  62. </div>
  63. </div>
  64. <div class="member">
  65. <h3 class="name" id="blendAlpha" translate="no">.<a href="#blendAlpha">blendAlpha</a><span class="type-signature"> : number</span> </h3>
  66. <div class="description">
  67. <p>Represents the alpha value of the constant blend color.</p>
  68. <p>This property has only an effect when using custom blending with <code>ConstantAlpha</code> or <code>OneMinusConstantAlpha</code>.</p>
  69. <p>Default is <code>0</code>.</p>
  70. </div>
  71. </div>
  72. <div class="member">
  73. <h3 class="name" id="blendColor" translate="no">.<a href="#blendColor">blendColor</a><span class="type-signature"> : <a href="Color.html">Color</a></span> </h3>
  74. <div class="description">
  75. <p>Represents the RGB values of the constant blend color.</p>
  76. <p>This property has only an effect when using custom blending with <code>ConstantColor</code> or <code>OneMinusConstantColor</code>.</p>
  77. <p>Default is <code>(0,0,0)</code>.</p>
  78. </div>
  79. </div>
  80. <div class="member">
  81. <h3 class="name" id="blendDst" translate="no">.<a href="#blendDst">blendDst</a><span class="type-signature"> : <a href="global.html#ZeroFactor">ZeroFactor</a> | <a href="global.html#OneFactor">OneFactor</a> | <a href="global.html#SrcColorFactor">SrcColorFactor</a> | <a href="global.html#OneMinusSrcColorFactor">OneMinusSrcColorFactor</a> | <a href="global.html#SrcAlphaFactor">SrcAlphaFactor</a> | <a href="global.html#OneMinusSrcAlphaFactor">OneMinusSrcAlphaFactor</a> | <a href="global.html#DstAlphaFactor">DstAlphaFactor</a> | <a href="global.html#OneMinusDstAlphaFactor">OneMinusDstAlphaFactor</a> | <a href="global.html#DstColorFactor">DstColorFactor</a> | <a href="global.html#OneMinusDstColorFactor">OneMinusDstColorFactor</a> | <a href="global.html#SrcAlphaSaturateFactor">SrcAlphaSaturateFactor</a> | <a href="global.html#ConstantColorFactor">ConstantColorFactor</a> | <a href="global.html#OneMinusConstantColorFactor">OneMinusConstantColorFactor</a> | <a href="global.html#ConstantAlphaFactor">ConstantAlphaFactor</a> | <a href="global.html#OneMinusConstantAlphaFactor">OneMinusConstantAlphaFactor</a></span> </h3>
  82. <div class="description">
  83. <p>Defines the blending destination factor.</p>
  84. <p>Default is <code>OneMinusSrcAlphaFactor</code>.</p>
  85. </div>
  86. </div>
  87. <div class="member">
  88. <h3 class="name" id="blendDstAlpha" translate="no">.<a href="#blendDstAlpha">blendDstAlpha</a><span class="type-signature"> : <a href="global.html#ZeroFactor">ZeroFactor</a> | <a href="global.html#OneFactor">OneFactor</a> | <a href="global.html#SrcColorFactor">SrcColorFactor</a> | <a href="global.html#OneMinusSrcColorFactor">OneMinusSrcColorFactor</a> | <a href="global.html#SrcAlphaFactor">SrcAlphaFactor</a> | <a href="global.html#OneMinusSrcAlphaFactor">OneMinusSrcAlphaFactor</a> | <a href="global.html#DstAlphaFactor">DstAlphaFactor</a> | <a href="global.html#OneMinusDstAlphaFactor">OneMinusDstAlphaFactor</a> | <a href="global.html#DstColorFactor">DstColorFactor</a> | <a href="global.html#OneMinusDstColorFactor">OneMinusDstColorFactor</a> | <a href="global.html#SrcAlphaSaturateFactor">SrcAlphaSaturateFactor</a> | <a href="global.html#ConstantColorFactor">ConstantColorFactor</a> | <a href="global.html#OneMinusConstantColorFactor">OneMinusConstantColorFactor</a> | <a href="global.html#ConstantAlphaFactor">ConstantAlphaFactor</a> | <a href="global.html#OneMinusConstantAlphaFactor">OneMinusConstantAlphaFactor</a></span> </h3>
  89. <div class="description">
  90. <p>Defines the blending destination alpha factor.</p>
  91. <p>Default is <code>null</code>.</p>
  92. </div>
  93. </div>
  94. <div class="member">
  95. <h3 class="name" id="blendEquation" translate="no">.<a href="#blendEquation">blendEquation</a><span class="type-signature"> : <a href="global.html#AddEquation">AddEquation</a> | <a href="global.html#SubtractEquation">SubtractEquation</a> | <a href="global.html#ReverseSubtractEquation">ReverseSubtractEquation</a> | <a href="global.html#MinEquation">MinEquation</a> | <a href="global.html#MaxEquation">MaxEquation</a></span> </h3>
  96. <div class="description">
  97. <p>Defines the blending equation.</p>
  98. <p>Default is <code>AddEquation</code>.</p>
  99. </div>
  100. </div>
  101. <div class="member">
  102. <h3 class="name" id="blendEquationAlpha" translate="no">.<a href="#blendEquationAlpha">blendEquationAlpha</a><span class="type-signature"> : <a href="global.html#AddEquation">AddEquation</a> | <a href="global.html#SubtractEquation">SubtractEquation</a> | <a href="global.html#ReverseSubtractEquation">ReverseSubtractEquation</a> | <a href="global.html#MinEquation">MinEquation</a> | <a href="global.html#MaxEquation">MaxEquation</a></span> </h3>
  103. <div class="description">
  104. <p>Defines the blending equation of the alpha channel.</p>
  105. <p>Default is <code>null</code>.</p>
  106. </div>
  107. </div>
  108. <div class="member">
  109. <h3 class="name" id="blendSrc" translate="no">.<a href="#blendSrc">blendSrc</a><span class="type-signature"> : <a href="global.html#ZeroFactor">ZeroFactor</a> | <a href="global.html#OneFactor">OneFactor</a> | <a href="global.html#SrcColorFactor">SrcColorFactor</a> | <a href="global.html#OneMinusSrcColorFactor">OneMinusSrcColorFactor</a> | <a href="global.html#SrcAlphaFactor">SrcAlphaFactor</a> | <a href="global.html#OneMinusSrcAlphaFactor">OneMinusSrcAlphaFactor</a> | <a href="global.html#DstAlphaFactor">DstAlphaFactor</a> | <a href="global.html#OneMinusDstAlphaFactor">OneMinusDstAlphaFactor</a> | <a href="global.html#DstColorFactor">DstColorFactor</a> | <a href="global.html#OneMinusDstColorFactor">OneMinusDstColorFactor</a> | <a href="global.html#SrcAlphaSaturateFactor">SrcAlphaSaturateFactor</a> | <a href="global.html#ConstantColorFactor">ConstantColorFactor</a> | <a href="global.html#OneMinusConstantColorFactor">OneMinusConstantColorFactor</a> | <a href="global.html#ConstantAlphaFactor">ConstantAlphaFactor</a> | <a href="global.html#OneMinusConstantAlphaFactor">OneMinusConstantAlphaFactor</a></span> </h3>
  110. <div class="description">
  111. <p>Defines the blending source factor.</p>
  112. <p>Default is <code>SrcAlphaFactor</code>.</p>
  113. </div>
  114. </div>
  115. <div class="member">
  116. <h3 class="name" id="blendSrcAlpha" translate="no">.<a href="#blendSrcAlpha">blendSrcAlpha</a><span class="type-signature"> : <a href="global.html#ZeroFactor">ZeroFactor</a> | <a href="global.html#OneFactor">OneFactor</a> | <a href="global.html#SrcColorFactor">SrcColorFactor</a> | <a href="global.html#OneMinusSrcColorFactor">OneMinusSrcColorFactor</a> | <a href="global.html#SrcAlphaFactor">SrcAlphaFactor</a> | <a href="global.html#OneMinusSrcAlphaFactor">OneMinusSrcAlphaFactor</a> | <a href="global.html#DstAlphaFactor">DstAlphaFactor</a> | <a href="global.html#OneMinusDstAlphaFactor">OneMinusDstAlphaFactor</a> | <a href="global.html#DstColorFactor">DstColorFactor</a> | <a href="global.html#OneMinusDstColorFactor">OneMinusDstColorFactor</a> | <a href="global.html#SrcAlphaSaturateFactor">SrcAlphaSaturateFactor</a> | <a href="global.html#ConstantColorFactor">ConstantColorFactor</a> | <a href="global.html#OneMinusConstantColorFactor">OneMinusConstantColorFactor</a> | <a href="global.html#ConstantAlphaFactor">ConstantAlphaFactor</a> | <a href="global.html#OneMinusConstantAlphaFactor">OneMinusConstantAlphaFactor</a></span> </h3>
  117. <div class="description">
  118. <p>Defines the blending source alpha factor.</p>
  119. <p>Default is <code>null</code>.</p>
  120. </div>
  121. </div>
  122. <div class="member">
  123. <h3 class="name" id="blending" translate="no">.<a href="#blending">blending</a><span class="type-signature"> : <a href="global.html#NoBlending">NoBlending</a> | <a href="global.html#NormalBlending">NormalBlending</a> | <a href="global.html#AdditiveBlending">AdditiveBlending</a> | <a href="global.html#SubtractiveBlending">SubtractiveBlending</a> | <a href="global.html#MultiplyBlending">MultiplyBlending</a> | <a href="global.html#CustomBlending">CustomBlending</a></span> </h3>
  124. <div class="description">
  125. <p>Defines the blending type of the material.</p>
  126. <p>It must be set to <code>CustomBlending</code> if custom blending properties like
  127. <a href="Material.html#blendSrc">Material#blendSrc</a>, <a href="Material.html#blendDst">Material#blendDst</a> or <a href="Material.html#blendEquation">Material#blendEquation</a>
  128. should have any effect.</p>
  129. <p>Default is <code>NormalBlending</code>.</p>
  130. </div>
  131. </div>
  132. <div class="member">
  133. <h3 class="name" id="clipIntersection" translate="no">.<a href="#clipIntersection">clipIntersection</a><span class="type-signature"> : boolean</span> </h3>
  134. <div class="description">
  135. <p>Changes the behavior of clipping planes so that only their intersection is
  136. clipped, rather than their union.</p>
  137. <p>Default is <code>false</code>.</p>
  138. </div>
  139. </div>
  140. <div class="member">
  141. <h3 class="name" id="clipShadows" translate="no">.<a href="#clipShadows">clipShadows</a><span class="type-signature"> : boolean</span> </h3>
  142. <div class="description">
  143. <p>Defines whether to clip shadows according to the clipping planes specified
  144. on this material.</p>
  145. <p>Default is <code>false</code>.</p>
  146. </div>
  147. </div>
  148. <div class="member">
  149. <h3 class="name" id="clippingPlanes" translate="no">.<a href="#clippingPlanes">clippingPlanes</a><span class="type-signature"> : Array.&lt;<a href="Plane.html">Plane</a>></span> </h3>
  150. <div class="description">
  151. <p>User-defined clipping planes specified as THREE.Plane objects in world
  152. space. These planes apply to the objects this material is attached to.
  153. Points in space whose signed distance to the plane is negative are clipped
  154. (not rendered). This requires <a href="WebGLRenderer.html#localClippingEnabled">WebGLRenderer#localClippingEnabled</a> to
  155. be <code>true</code>.</p>
  156. <p>Default is <code>null</code>.</p>
  157. </div>
  158. </div>
  159. <div class="member">
  160. <h3 class="name" id="colorWrite" translate="no">.<a href="#colorWrite">colorWrite</a><span class="type-signature"> : boolean</span> </h3>
  161. <div class="description">
  162. <p>Whether to render the material's color.</p>
  163. <p>This can be used in conjunction with Object3D#renderOder to create invisible
  164. objects that occlude other objects.</p>
  165. <p>Default is <code>true</code>.</p>
  166. </div>
  167. </div>
  168. <div class="member">
  169. <h3 class="name" id="depthFunc" translate="no">.<a href="#depthFunc">depthFunc</a><span class="type-signature"> : <a href="global.html#NeverDepth">NeverDepth</a> | <a href="global.html#AlwaysDepth">AlwaysDepth</a> | <a href="global.html#LessDepth">LessDepth</a> | <a href="global.html#LessEqualDepth">LessEqualDepth</a> | <a href="global.html#EqualDepth">EqualDepth</a> | <a href="global.html#GreaterEqualDepth">GreaterEqualDepth</a> | <a href="global.html#GreaterDepth">GreaterDepth</a> | <a href="global.html#NotEqualDepth">NotEqualDepth</a></span> </h3>
  170. <div class="description">
  171. <p>Defines the depth function.</p>
  172. <p>Default is <code>LessEqualDepth</code>.</p>
  173. </div>
  174. </div>
  175. <div class="member">
  176. <h3 class="name" id="depthTest" translate="no">.<a href="#depthTest">depthTest</a><span class="type-signature"> : boolean</span> </h3>
  177. <div class="description">
  178. <p>Whether to have depth test enabled when rendering this material.
  179. When the depth test is disabled, the depth write will also be implicitly disabled.</p>
  180. <p>Default is <code>true</code>.</p>
  181. </div>
  182. </div>
  183. <div class="member">
  184. <h3 class="name" id="depthWrite" translate="no">.<a href="#depthWrite">depthWrite</a><span class="type-signature"> : boolean</span> </h3>
  185. <div class="description">
  186. <p>Whether rendering this material has any effect on the depth buffer.</p>
  187. <p>When drawing 2D overlays it can be useful to disable the depth writing in
  188. order to layer several things together without creating z-index artifacts.</p>
  189. <p>Default is <code>true</code>.</p>
  190. </div>
  191. </div>
  192. <div class="member">
  193. <h3 class="name" id="dithering" translate="no">.<a href="#dithering">dithering</a><span class="type-signature"> : boolean</span> </h3>
  194. <div class="description">
  195. <p>Whether to apply dithering to the color to remove the appearance of banding.</p>
  196. <p>Default is <code>false</code>.</p>
  197. </div>
  198. </div>
  199. <div class="member">
  200. <h3 class="name" id="forceSinglePass" translate="no">.<a href="#forceSinglePass">forceSinglePass</a><span class="type-signature"> : boolean</span> </h3>
  201. <div class="description">
  202. <p>Whether double-sided, transparent objects should be rendered with a single pass or not.</p>
  203. <p>The engine renders double-sided, transparent objects with two draw calls (back faces first,
  204. then front faces) to mitigate transparency artifacts. There are scenarios however where this
  205. approach produces no quality gains but still doubles draw calls e.g. when rendering flat
  206. vegetation like grass sprites. In these cases, set the <code>forceSinglePass</code> flag to <code>true</code> to
  207. disable the two pass rendering to avoid performance issues.</p>
  208. <p>Default is <code>false</code>.</p>
  209. </div>
  210. </div>
  211. <div class="member">
  212. <h3 class="name" id="id" translate="no">.<a href="#id">id</a><span class="type-signature"> : number</span> <span class="type-signature">(readonly) </span></h3>
  213. <div class="description">
  214. <p>The ID of the material.</p>
  215. </div>
  216. </div>
  217. <div class="member">
  218. <h3 class="name" id="isMaterial" translate="no">.<a href="#isMaterial">isMaterial</a><span class="type-signature"> : boolean</span> <span class="type-signature">(readonly) </span></h3>
  219. <div class="description">
  220. <p>This flag can be used for type testing.</p>
  221. <p>Default is <code>true</code>.</p>
  222. </div>
  223. </div>
  224. <div class="member">
  225. <h3 class="name" id="name" translate="no">.<a href="#name">name</a><span class="type-signature"> : string</span> </h3>
  226. <div class="description">
  227. <p>The name of the material.</p>
  228. </div>
  229. </div>
  230. <div class="member">
  231. <h3 class="name" id="needsUpdate" translate="no">.<a href="#needsUpdate">needsUpdate</a><span class="type-signature"> : boolean</span> </h3>
  232. <div class="description">
  233. <p>Setting this property to <code>true</code> indicates the engine the material
  234. needs to be recompiled.</p>
  235. <p>Default is <code>false</code>.</p>
  236. </div>
  237. </div>
  238. <div class="member">
  239. <h3 class="name" id="opacity" translate="no">.<a href="#opacity">opacity</a><span class="type-signature"> : number</span> </h3>
  240. <div class="description">
  241. <p>Defines how transparent the material is.
  242. A value of <code>0.0</code> indicates fully transparent, <code>1.0</code> is fully opaque.</p>
  243. <p>If the <a href="Material.html#transparent">Material#transparent</a> is not set to <code>true</code>,
  244. the material will remain fully opaque and this value will only affect its color.</p>
  245. <p>Default is <code>1</code>.</p>
  246. </div>
  247. </div>
  248. <div class="member">
  249. <h3 class="name" id="polygonOffset" translate="no">.<a href="#polygonOffset">polygonOffset</a><span class="type-signature"> : boolean</span> </h3>
  250. <div class="description">
  251. <p>Whether to use polygon offset or not. When enabled, each fragment's depth value will
  252. be offset after it is interpolated from the depth values of the appropriate vertices.
  253. The offset is added before the depth test is performed and before the value is written
  254. into the depth buffer.</p>
  255. <p>Can be useful for rendering hidden-line images, for applying decals to surfaces, and for
  256. rendering solids with highlighted edges.</p>
  257. <p>Default is <code>false</code>.</p>
  258. </div>
  259. </div>
  260. <div class="member">
  261. <h3 class="name" id="polygonOffsetFactor" translate="no">.<a href="#polygonOffsetFactor">polygonOffsetFactor</a><span class="type-signature"> : number</span> </h3>
  262. <div class="description">
  263. <p>Specifies a scale factor that is used to create a variable depth offset for each polygon.</p>
  264. <p>Default is <code>0</code>.</p>
  265. </div>
  266. </div>
  267. <div class="member">
  268. <h3 class="name" id="polygonOffsetUnits" translate="no">.<a href="#polygonOffsetUnits">polygonOffsetUnits</a><span class="type-signature"> : number</span> </h3>
  269. <div class="description">
  270. <p>Is multiplied by an implementation-specific value to create a constant depth offset.</p>
  271. <p>Default is <code>0</code>.</p>
  272. </div>
  273. </div>
  274. <div class="member">
  275. <h3 class="name" id="precision" translate="no">.<a href="#precision">precision</a><span class="type-signature"> : 'highp' | 'mediump' | 'lowp'</span> </h3>
  276. <div class="description">
  277. <p>Override the renderer's default precision for this material.</p>
  278. <p>Default is <code>null</code>.</p>
  279. </div>
  280. </div>
  281. <div class="member">
  282. <h3 class="name" id="premultipliedAlpha" translate="no">.<a href="#premultipliedAlpha">premultipliedAlpha</a><span class="type-signature"> : boolean</span> </h3>
  283. <div class="description">
  284. <p>Whether to premultiply the alpha (transparency) value.</p>
  285. <p>Default is <code>false</code>.</p>
  286. </div>
  287. </div>
  288. <div class="member">
  289. <h3 class="name" id="shadowSide" translate="no">.<a href="#shadowSide">shadowSide</a><span class="type-signature"> : <a href="global.html#FrontSide">FrontSide</a> | <a href="global.html#BackSide">BackSide</a> | <a href="global.html#DoubleSide">DoubleSide</a></span> </h3>
  290. <div class="description">
  291. <p>Defines which side of faces cast shadows. If <code>null</code>, the side casting shadows
  292. is determined as follows:</p>
  293. <ul>
  294. <li>When <a href="Material.html#side">Material#side</a> is set to <code>FrontSide</code>, the back side cast shadows.</li>
  295. <li>When <a href="Material.html#side">Material#side</a> is set to <code>BackSide</code>, the front side cast shadows.</li>
  296. <li>When <a href="Material.html#side">Material#side</a> is set to <code>DoubleSide</code>, both sides cast shadows.</li>
  297. </ul>
  298. <p>Default is <code>null</code>.</p>
  299. </div>
  300. </div>
  301. <div class="member">
  302. <h3 class="name" id="side" translate="no">.<a href="#side">side</a><span class="type-signature"> : <a href="global.html#FrontSide">FrontSide</a> | <a href="global.html#BackSide">BackSide</a> | <a href="global.html#DoubleSide">DoubleSide</a></span> </h3>
  303. <div class="description">
  304. <p>Defines which side of faces will be rendered - front, back or both.</p>
  305. <p>Default is <code>FrontSide</code>.</p>
  306. </div>
  307. </div>
  308. <div class="member">
  309. <h3 class="name" id="stencilFail" translate="no">.<a href="#stencilFail">stencilFail</a><span class="type-signature"> : <a href="global.html#ZeroStencilOp">ZeroStencilOp</a> | <a href="global.html#KeepStencilOp">KeepStencilOp</a> | <a href="global.html#ReplaceStencilOp">ReplaceStencilOp</a> | <a href="global.html#IncrementStencilOp">IncrementStencilOp</a> | <a href="global.html#DecrementStencilOp">DecrementStencilOp</a> | <a href="global.html#IncrementWrapStencilOp">IncrementWrapStencilOp</a> | <a href="global.html#DecrementWrapStencilOp">DecrementWrapStencilOp</a> | <a href="global.html#InvertStencilOp">InvertStencilOp</a></span> </h3>
  310. <div class="description">
  311. <p>Which stencil operation to perform when the comparison function returns <code>false</code>.</p>
  312. <p>Default is <code>KeepStencilOp</code>.</p>
  313. </div>
  314. </div>
  315. <div class="member">
  316. <h3 class="name" id="stencilFunc" translate="no">.<a href="#stencilFunc">stencilFunc</a><span class="type-signature"> : <a href="global.html#NeverStencilFunc">NeverStencilFunc</a> | <a href="global.html#LessStencilFunc">LessStencilFunc</a> | <a href="global.html#EqualStencilFunc">EqualStencilFunc</a> | <a href="global.html#LessEqualStencilFunc">LessEqualStencilFunc</a> | <a href="global.html#GreaterStencilFunc">GreaterStencilFunc</a> | <a href="global.html#NotEqualStencilFunc">NotEqualStencilFunc</a> | <a href="global.html#GreaterEqualStencilFunc">GreaterEqualStencilFunc</a> | <a href="global.html#AlwaysStencilFunc">AlwaysStencilFunc</a></span> </h3>
  317. <div class="description">
  318. <p>The stencil comparison function to use.</p>
  319. <p>Default is <code>AlwaysStencilFunc</code>.</p>
  320. </div>
  321. </div>
  322. <div class="member">
  323. <h3 class="name" id="stencilFuncMask" translate="no">.<a href="#stencilFuncMask">stencilFuncMask</a><span class="type-signature"> : number</span> </h3>
  324. <div class="description">
  325. <p>The bit mask to use when comparing against the stencil buffer.</p>
  326. <p>Default is <code>0xff</code>.</p>
  327. </div>
  328. </div>
  329. <div class="member">
  330. <h3 class="name" id="stencilRef" translate="no">.<a href="#stencilRef">stencilRef</a><span class="type-signature"> : number</span> </h3>
  331. <div class="description">
  332. <p>The value to use when performing stencil comparisons or stencil operations.</p>
  333. <p>Default is <code>0</code>.</p>
  334. </div>
  335. </div>
  336. <div class="member">
  337. <h3 class="name" id="stencilWrite" translate="no">.<a href="#stencilWrite">stencilWrite</a><span class="type-signature"> : boolean</span> </h3>
  338. <div class="description">
  339. <p>Whether stencil operations are performed against the stencil buffer. In
  340. order to perform writes or comparisons against the stencil buffer this
  341. value must be <code>true</code>.</p>
  342. <p>Default is <code>false</code>.</p>
  343. </div>
  344. </div>
  345. <div class="member">
  346. <h3 class="name" id="stencilWriteMask" translate="no">.<a href="#stencilWriteMask">stencilWriteMask</a><span class="type-signature"> : number</span> </h3>
  347. <div class="description">
  348. <p>The bit mask to use when writing to the stencil buffer.</p>
  349. <p>Default is <code>0xff</code>.</p>
  350. </div>
  351. </div>
  352. <div class="member">
  353. <h3 class="name" id="stencilZFail" translate="no">.<a href="#stencilZFail">stencilZFail</a><span class="type-signature"> : <a href="global.html#ZeroStencilOp">ZeroStencilOp</a> | <a href="global.html#KeepStencilOp">KeepStencilOp</a> | <a href="global.html#ReplaceStencilOp">ReplaceStencilOp</a> | <a href="global.html#IncrementStencilOp">IncrementStencilOp</a> | <a href="global.html#DecrementStencilOp">DecrementStencilOp</a> | <a href="global.html#IncrementWrapStencilOp">IncrementWrapStencilOp</a> | <a href="global.html#DecrementWrapStencilOp">DecrementWrapStencilOp</a> | <a href="global.html#InvertStencilOp">InvertStencilOp</a></span> </h3>
  354. <div class="description">
  355. <p>Which stencil operation to perform when the comparison function returns
  356. <code>true</code> but the depth test fails.</p>
  357. <p>Default is <code>KeepStencilOp</code>.</p>
  358. </div>
  359. </div>
  360. <div class="member">
  361. <h3 class="name" id="stencilZPass" translate="no">.<a href="#stencilZPass">stencilZPass</a><span class="type-signature"> : <a href="global.html#ZeroStencilOp">ZeroStencilOp</a> | <a href="global.html#KeepStencilOp">KeepStencilOp</a> | <a href="global.html#ReplaceStencilOp">ReplaceStencilOp</a> | <a href="global.html#IncrementStencilOp">IncrementStencilOp</a> | <a href="global.html#DecrementStencilOp">DecrementStencilOp</a> | <a href="global.html#IncrementWrapStencilOp">IncrementWrapStencilOp</a> | <a href="global.html#DecrementWrapStencilOp">DecrementWrapStencilOp</a> | <a href="global.html#InvertStencilOp">InvertStencilOp</a></span> </h3>
  362. <div class="description">
  363. <p>Which stencil operation to perform when the comparison function returns
  364. <code>true</code> and the depth test passes.</p>
  365. <p>Default is <code>KeepStencilOp</code>.</p>
  366. </div>
  367. </div>
  368. <div class="member">
  369. <h3 class="name" id="toneMapped" translate="no">.<a href="#toneMapped">toneMapped</a><span class="type-signature"> : boolean</span> </h3>
  370. <div class="description">
  371. <p>Defines whether this material is tone mapped according to the renderer's tone mapping setting.</p>
  372. <p>It is ignored when rendering to a render target or using post processing or when using
  373. <code>WebGPURenderer</code>. In all these cases, all materials are honored by tone mapping.</p>
  374. <p>Default is <code>true</code>.</p>
  375. </div>
  376. </div>
  377. <div class="member">
  378. <h3 class="name" id="transparent" translate="no">.<a href="#transparent">transparent</a><span class="type-signature"> : boolean</span> </h3>
  379. <div class="description">
  380. <p>Defines whether this material is transparent. This has an effect on
  381. rendering as transparent objects need special treatment and are rendered
  382. after non-transparent objects.</p>
  383. <p>When set to true, the extent to which the material is transparent is
  384. controlled by <a href="Material.html#opacity">Material#opacity</a>.</p>
  385. <p>Default is <code>false</code>.</p>
  386. </div>
  387. </div>
  388. <div class="member">
  389. <h3 class="name" id="type" translate="no">.<a href="#type">type</a><span class="type-signature"> : string</span> <span class="type-signature">(readonly) </span></h3>
  390. <div class="description">
  391. <p>The type property is used for detecting the object type
  392. in context of serialization/deserialization.</p>
  393. </div>
  394. </div>
  395. <div class="member">
  396. <h3 class="name" id="userData" translate="no">.<a href="#userData">userData</a><span class="type-signature"> : Object</span> </h3>
  397. <div class="description">
  398. <p>An object that can be used to store custom data about the Material. It
  399. should not hold references to functions as these will not be cloned.</p>
  400. </div>
  401. </div>
  402. <div class="member">
  403. <h3 class="name" id="uuid" translate="no">.<a href="#uuid">uuid</a><span class="type-signature"> : string</span> <span class="type-signature">(readonly) </span></h3>
  404. <div class="description">
  405. <p>The UUID of the material.</p>
  406. </div>
  407. </div>
  408. <div class="member">
  409. <h3 class="name" id="version" translate="no">.<a href="#version">version</a><span class="type-signature"> : number</span> <span class="type-signature">(readonly) </span></h3>
  410. <div class="description">
  411. <p>This starts at <code>0</code> and counts how many times <a href="Material.html#needsUpdate">Material#needsUpdate</a> is set to <code>true</code>.</p>
  412. <p>Default is <code>0</code>.</p>
  413. </div>
  414. </div>
  415. <div class="member">
  416. <h3 class="name" id="vertexColors" translate="no">.<a href="#vertexColors">vertexColors</a><span class="type-signature"> : boolean</span> </h3>
  417. <div class="description">
  418. <p>If set to <code>true</code>, vertex colors should be used.</p>
  419. <p>The engine supports RGB and RGBA vertex colors depending on whether a three (RGB) or
  420. four (RGBA) component color buffer attribute is used.</p>
  421. <p>Default is <code>false</code>.</p>
  422. </div>
  423. </div>
  424. <div class="member">
  425. <h3 class="name" id="visible" translate="no">.<a href="#visible">visible</a><span class="type-signature"> : boolean</span> </h3>
  426. <div class="description">
  427. <p>Defines whether 3D objects using this material are visible.</p>
  428. <p>Default is <code>true</code>.</p>
  429. </div>
  430. </div>
  431. <h2 class="subsection-title">Methods</h2>
  432. <h3 class="name name-method" id="clone" translate="no">.<a href="#clone">clone</a><span class="signature">()</span><span class="type-signature"> : <a href="Material.html">Material</a></span> </h3>
  433. <div class="method">
  434. <div class="description">
  435. <p>Returns a new material with copied values from this instance.</p>
  436. </div>
  437. <dl class="details">
  438. <dt class="tag-returns"><strong>Returns:</strong> A clone of this instance.</dt>
  439. </dl>
  440. </div>
  441. <h3 class="name name-method" id="copy" translate="no">.<a href="#copy">copy</a><span class="signature">( source : <span class="param-type"><a href="Material.html">Material</a></span> )</span><span class="type-signature"> : <a href="Material.html">Material</a></span> </h3>
  442. <div class="method">
  443. <div class="description">
  444. <p>Copies the values of the given material to this instance.</p>
  445. </div>
  446. <table class="params">
  447. <tbody>
  448. <tr>
  449. <td class="name">
  450. <strong>source</strong>
  451. </td>
  452. <td class="description last">
  453. <p>The material to copy.</p>
  454. </td>
  455. </tr>
  456. </tbody>
  457. </table>
  458. <dl class="details">
  459. <dt class="tag-returns"><strong>Returns:</strong> A reference to this instance.</dt>
  460. </dl>
  461. </div>
  462. <h3 class="name name-method" id="customProgramCacheKey" translate="no">.<a href="#customProgramCacheKey">customProgramCacheKey</a><span class="signature">()</span><span class="type-signature"> : string</span> </h3>
  463. <div class="method">
  464. <div class="description">
  465. <p>In case <a href="Material.html#onBeforeCompile">Material#onBeforeCompile</a> is used, this callback can be used to identify
  466. values of settings used in <code>onBeforeCompile()</code>, so three.js can reuse a cached
  467. shader or recompile the shader for this material as needed.</p>
  468. <p>This method can only be used when rendering with <a href="WebGLRenderer.html">WebGLRenderer</a>.</p>
  469. </div>
  470. <dl class="details">
  471. <dt class="tag-returns"><strong>Returns:</strong> The custom program cache key.</dt>
  472. </dl>
  473. </div>
  474. <h3 class="name name-method" id="dispose" translate="no">.<a href="#dispose">dispose</a><span class="signature">()</span> </h3>
  475. <div class="method">
  476. <div class="description">
  477. <p>Frees the GPU-related resources allocated by this instance. Call this
  478. method whenever this instance is no longer used in your app.</p>
  479. </div>
  480. <h5>Fires:</h5>
  481. <ul>
  482. <li><a href="Material.html#event:dispose">Material#event:dispose</a></li>
  483. </ul>
  484. </div>
  485. <h3 class="name name-method" id="onBeforeCompile" translate="no">.<a href="#onBeforeCompile">onBeforeCompile</a><span class="signature">( shaderobject : <span class="param-type">Object</span>, renderer : <span class="param-type"><a href="WebGLRenderer.html">WebGLRenderer</a></span> )</span> </h3>
  486. <div class="method">
  487. <div class="description">
  488. <p>An optional callback that is executed immediately before the shader
  489. program is compiled. This function is called with the shader source code
  490. as a parameter. Useful for the modification of built-in materials.</p>
  491. <p>This method can only be used when rendering with <a href="WebGLRenderer.html">WebGLRenderer</a>. The
  492. recommended approach when customizing materials is to use <code>WebGPURenderer</code> with the new
  493. Node Material system and <a href="https://github.com/mrdoob/three.js/wiki/Three.js-Shading-Language" target="_blank" rel="noopener">TSL</a>.</p>
  494. </div>
  495. <table class="params">
  496. <tbody>
  497. <tr>
  498. <td class="name">
  499. <strong>shaderobject</strong>
  500. </td>
  501. <td class="description last">
  502. <p>The object holds the uniforms and the vertex and fragment shader source.</p>
  503. </td>
  504. </tr>
  505. <tr>
  506. <td class="name">
  507. <strong>renderer</strong>
  508. </td>
  509. <td class="description last">
  510. <p>A reference to the renderer.</p>
  511. </td>
  512. </tr>
  513. </tbody>
  514. </table>
  515. </div>
  516. <h3 class="name name-method" id="onBeforeRender" translate="no">.<a href="#onBeforeRender">onBeforeRender</a><span class="signature">( renderer : <span class="param-type"><a href="WebGLRenderer.html">WebGLRenderer</a></span>, scene : <span class="param-type"><a href="Scene.html">Scene</a></span>, camera : <span class="param-type"><a href="Camera.html">Camera</a></span>, geometry : <span class="param-type"><a href="BufferGeometry.html">BufferGeometry</a></span>, object : <span class="param-type"><a href="Object3D.html">Object3D</a></span>, group : <span class="param-type">Object</span> )</span> </h3>
  517. <div class="method">
  518. <div class="description">
  519. <p>An optional callback that is executed immediately before the material is used to render a 3D object.</p>
  520. <p>This method can only be used when rendering with <a href="WebGLRenderer.html">WebGLRenderer</a>.</p>
  521. </div>
  522. <table class="params">
  523. <tbody>
  524. <tr>
  525. <td class="name">
  526. <strong>renderer</strong>
  527. </td>
  528. <td class="description last">
  529. <p>The renderer.</p>
  530. </td>
  531. </tr>
  532. <tr>
  533. <td class="name">
  534. <strong>scene</strong>
  535. </td>
  536. <td class="description last">
  537. <p>The scene.</p>
  538. </td>
  539. </tr>
  540. <tr>
  541. <td class="name">
  542. <strong>camera</strong>
  543. </td>
  544. <td class="description last">
  545. <p>The camera that is used to render the scene.</p>
  546. </td>
  547. </tr>
  548. <tr>
  549. <td class="name">
  550. <strong>geometry</strong>
  551. </td>
  552. <td class="description last">
  553. <p>The 3D object's geometry.</p>
  554. </td>
  555. </tr>
  556. <tr>
  557. <td class="name">
  558. <strong>object</strong>
  559. </td>
  560. <td class="description last">
  561. <p>The 3D object.</p>
  562. </td>
  563. </tr>
  564. <tr>
  565. <td class="name">
  566. <strong>group</strong>
  567. </td>
  568. <td class="description last">
  569. <p>The geometry group data.</p>
  570. </td>
  571. </tr>
  572. </tbody>
  573. </table>
  574. </div>
  575. <h3 class="name name-method" id="setValues" translate="no">.<a href="#setValues">setValues</a><span class="signature">( values : <span class="param-type">Object</span> )</span> </h3>
  576. <div class="method">
  577. <div class="description">
  578. <p>This method can be used to set default values from parameter objects.
  579. It is a generic implementation so it can be used with different types
  580. of materials.</p>
  581. </div>
  582. <table class="params">
  583. <tbody>
  584. <tr>
  585. <td class="name">
  586. <strong>values</strong>
  587. </td>
  588. <td class="description last">
  589. <p>The material values to set.</p>
  590. </td>
  591. </tr>
  592. </tbody>
  593. </table>
  594. </div>
  595. <h3 class="name name-method" id="toJSON" translate="no">.<a href="#toJSON">toJSON</a><span class="signature">( meta : <span class="param-type">Object | string</span> )</span><span class="type-signature"> : Object</span> </h3>
  596. <div class="method">
  597. <div class="description">
  598. <p>Serializes the material into JSON.</p>
  599. </div>
  600. <table class="params">
  601. <tbody>
  602. <tr>
  603. <td class="name">
  604. <strong>meta</strong>
  605. </td>
  606. <td class="description last">
  607. <p>An optional value holding meta information about the serialization.</p>
  608. </td>
  609. </tr>
  610. </tbody>
  611. </table>
  612. <dl class="details">
  613. <dt class="tag-see">See:</dt>
  614. <dd class="tag-see">
  615. <ul>
  616. <li><a href="ObjectLoader.html#parse">ObjectLoader#parse</a></li>
  617. </ul>
  618. </dd>
  619. </dl>
  620. <dl class="details">
  621. <dt class="tag-returns"><strong>Returns:</strong> A JSON object representing the serialized material.</dt>
  622. </dl>
  623. </div>
  624. <h2 class="subsection-title">Events</h2>
  625. <h3 class="name name-method" id="event:dispose" translate="no">.<a href="#event:dispose">dispose</a> </h3>
  626. <div class="method">
  627. <div class="description">
  628. <p>Fires when the material has been disposed of.</p>
  629. </div>
  630. <h5>Type:</h5>
  631. <ul>
  632. <li>
  633. <span class="param-type">Object</span>
  634. </li>
  635. </ul>
  636. </div>
  637. <h2 class="subsection-title">Source</h2>
  638. <p>
  639. <a href="https://github.com/mrdoob/three.js/blob/master/src/materials/Material.js" translate="no" target="_blank" rel="noopener">src/materials/Material.js</a>
  640. </p>
  641. </article>
  642. </section>
  643. <script src="../scripts/linenumber.js"></script>
  644. <script src="../scripts/page.js"></script>
  645. </body>
  646. </html>
粤ICP备19079148号