CSMShadowNode.html 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>CSMShadowNode - 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="Node.html">Node</a> → <a href="ShadowBaseNode.html">ShadowBaseNode</a> → </p>
  13. <h1 translate="no">CSMShadowNode</h1>
  14. <section>
  15. <header>
  16. <div class="class-description"><p>An implementation of Cascade Shadow Maps (CSM).</p>
  17. <p>This module can only be used with <a href="WebGPURenderer.html">WebGPURenderer</a>. When using <a href="WebGLRenderer.html">WebGLRenderer</a>,
  18. use <a href="CSM.html">CSM</a> instead.</p></div>
  19. </header>
  20. <article>
  21. <h2 class="subsection-title">Import</h2>
  22. <p><span translate="no">CSMShadowNode</span> is an addon, and must be imported explicitly, see <a href="https://threejs.org/manual/#en/installation" target="_blank" rel="noopener">Installation#Addons</a>.</p>
  23. <pre><code class="language-js">import { CSMShadowNode } from 'three/addons/csm/CSMShadowNode.js';</code></pre>
  24. <div class="container-overview">
  25. <h2>Constructor</h2>
  26. <h3 class="name name-method" id="CSMShadowNode" translate="no">new <a href="#CSMShadowNode">CSMShadowNode</a><span class="signature">( light : <span class="param-type"><a href="DirectionalLight.html">DirectionalLight</a></span>, data : <span class="param-type"><a href="CSMShadowNode.html#~Data">CSMShadowNode~Data</a></span> )</span> </h3>
  27. <div class="method">
  28. <div class="description">
  29. <p>Constructs a new CSM shadow node.</p>
  30. </div>
  31. <table class="params">
  32. <tbody>
  33. <tr>
  34. <td class="name">
  35. <strong>light</strong>
  36. </td>
  37. <td class="description last">
  38. <p>The CSM light.</p>
  39. </td>
  40. </tr>
  41. <tr>
  42. <td class="name">
  43. <strong>data</strong>
  44. </td>
  45. <td class="description last">
  46. <p>The CSM data.</p>
  47. <p>Default is <code>{}</code>.</p>
  48. </td>
  49. </tr>
  50. </tbody>
  51. </table>
  52. </div>
  53. </div>
  54. <h2 class="subsection-title">Properties</h2>
  55. <div class="member">
  56. <h3 class="name" id="breaks" translate="no">.<a href="#breaks">breaks</a><span class="type-signature"> : Array.&lt;number></span> </h3>
  57. <div class="description">
  58. <p>An array of numbers in the range <code>[0,1]</code> the defines how the
  59. mainCSM frustum should be split up.</p>
  60. </div>
  61. </div>
  62. <div class="member">
  63. <h3 class="name" id="camera" translate="no">.<a href="#camera">camera</a><span class="type-signature"> : <a href="Camera.html">Camera</a></span> </h3>
  64. <div class="description">
  65. <p>The scene's camera.</p>
  66. <p>Default is <code>null</code>.</p>
  67. </div>
  68. </div>
  69. <div class="member">
  70. <h3 class="name" id="cascades" translate="no">.<a href="#cascades">cascades</a><span class="type-signature"> : number</span> </h3>
  71. <div class="description">
  72. <p>The number of cascades.</p>
  73. <p>Default is <code>3</code>.</p>
  74. </div>
  75. </div>
  76. <div class="member">
  77. <h3 class="name" id="customSplitsCallback" translate="no">.<a href="#customSplitsCallback">customSplitsCallback</a><span class="type-signature"> : function</span> </h3>
  78. <div class="description">
  79. <p>Custom split callback when using <code>mode='custom'</code>.</p>
  80. </div>
  81. </div>
  82. <div class="member">
  83. <h3 class="name" id="fade" translate="no">.<a href="#fade">fade</a><span class="type-signature"> : boolean</span> </h3>
  84. <div class="description">
  85. <p>Whether to fade between cascades or not.</p>
  86. <p>Default is <code>false</code>.</p>
  87. </div>
  88. </div>
  89. <div class="member">
  90. <h3 class="name" id="frustums" translate="no">.<a href="#frustums">frustums</a><span class="type-signature"> : Array.&lt;<a href="CSMFrustum.html">CSMFrustum</a>></span> </h3>
  91. <div class="description">
  92. <p>An array of frustums representing the cascades.</p>
  93. </div>
  94. </div>
  95. <div class="member">
  96. <h3 class="name" id="lightMargin" translate="no">.<a href="#lightMargin">lightMargin</a><span class="type-signature"> : number</span> </h3>
  97. <div class="description">
  98. <p>The light margin.</p>
  99. <p>Default is <code>200</code>.</p>
  100. </div>
  101. </div>
  102. <div class="member">
  103. <h3 class="name" id="lights" translate="no">.<a href="#lights">lights</a><span class="type-signature"> : Array.&lt;<a href="DirectionalLight.html">DirectionalLight</a>></span> </h3>
  104. <div class="description">
  105. <p>An array of directional lights which cast the shadows for
  106. the different cascades. There is one directional light for each
  107. cascade.</p>
  108. </div>
  109. </div>
  110. <div class="member">
  111. <h3 class="name" id="mainFrustum" translate="no">.<a href="#mainFrustum">mainFrustum</a><span class="type-signature"> : <a href="CSMFrustum.html">CSMFrustum</a></span> </h3>
  112. <div class="description">
  113. <p>The main frustum.</p>
  114. <p>Default is <code>null</code>.</p>
  115. </div>
  116. </div>
  117. <div class="member">
  118. <h3 class="name" id="maxFar" translate="no">.<a href="#maxFar">maxFar</a><span class="type-signature"> : number</span> </h3>
  119. <div class="description">
  120. <p>The maximum far value.</p>
  121. <p>Default is <code>100000</code>.</p>
  122. </div>
  123. </div>
  124. <div class="member">
  125. <h3 class="name" id="mode" translate="no">.<a href="#mode">mode</a><span class="type-signature"> : 'practical' | 'uniform' | 'logarithmic' | 'custom'</span> </h3>
  126. <div class="description">
  127. <p>The frustum split mode.</p>
  128. <p>Default is <code>'practical'</code>.</p>
  129. </div>
  130. </div>
  131. <h2 class="subsection-title">Methods</h2>
  132. <h3 class="name name-method" id="dispose" translate="no">.<a href="#dispose">dispose</a><span class="signature">()</span> </h3>
  133. <div class="method">
  134. <div class="description">
  135. <p>Frees the GPU-related resources allocated by this instance. Call this
  136. method whenever this instance is no longer used in your app.</p>
  137. </div>
  138. <dl class="details">
  139. <dt class="tag-overrides"><strong>Overrides:</strong> <a href="ShadowBaseNode.html#dispose">ShadowBaseNode#dispose</a></dt>
  140. </dl>
  141. </div>
  142. <h3 class="name name-method" id="updateFrustums" translate="no">.<a href="#updateFrustums">updateFrustums</a><span class="signature">()</span> </h3>
  143. <div class="method">
  144. <div class="description">
  145. <p>Applications must call this method every time they change camera or CSM settings.</p>
  146. </div>
  147. </div>
  148. <h2 class="subsection-title">Type Definitions</h2>
  149. <div class="member">
  150. <h3 class="name" id="~Data" translate="no">.<a href="#~Data">Data</a> </h3>
  151. <div class="description">
  152. <p>Constructor data of <code>CSMShadowNode</code>.</p>
  153. </div>
  154. <table class="props">
  155. <tbody>
  156. <tr>
  157. <td class="name">
  158. <strong>cascades</strong>
  159. <br>
  160. <span class="param-type">number</span>
  161. </td>
  162. <td class="description last">
  163. <p>The number of cascades.</p>
  164. <p>Default is <code>3</code>.</p>
  165. </td>
  166. </tr>
  167. <tr>
  168. <td class="name">
  169. <strong>maxFar</strong>
  170. <br>
  171. <span class="param-type">number</span>
  172. </td>
  173. <td class="description last">
  174. <p>The maximum far value.</p>
  175. <p>Default is <code>100000</code>.</p>
  176. </td>
  177. </tr>
  178. <tr>
  179. <td class="name">
  180. <strong>mode</strong>
  181. <br>
  182. <span class="param-type">'practical'</span>
  183. |
  184. <span class="param-type">'uniform'</span>
  185. |
  186. <span class="param-type">'logarithmic'</span>
  187. |
  188. <span class="param-type">'custom'</span>
  189. </td>
  190. <td class="description last">
  191. <p>The frustum split mode.</p>
  192. <p>Default is <code>'practical'</code>.</p>
  193. </td>
  194. </tr>
  195. <tr>
  196. <td class="name">
  197. <strong>customSplitsCallback</strong>
  198. <br>
  199. <span class="param-type">function</span>
  200. </td>
  201. <td class="description last">
  202. <p>Custom split callback when using <code>mode='custom'</code>.</p>
  203. </td>
  204. </tr>
  205. <tr>
  206. <td class="name">
  207. <strong>lightMargin</strong>
  208. <br>
  209. <span class="param-type">number</span>
  210. </td>
  211. <td class="description last">
  212. <p>The light margin.</p>
  213. <p>Default is <code>200</code>.</p>
  214. </td>
  215. </tr>
  216. </tbody>
  217. </table>
  218. </div>
  219. <h2 class="subsection-title">Source</h2>
  220. <p>
  221. <a href="https://github.com/mrdoob/three.js/blob/master/examples/jsm/csm/CSMShadowNode.js" translate="no" target="_blank" rel="noopener">examples/jsm/csm/CSMShadowNode.js</a>
  222. </p>
  223. </article>
  224. </section>
  225. <script src="../scripts/linenumber.js"></script>
  226. <script src="../scripts/page.js"></script>
  227. </body>
  228. </html>
粤ICP备19079148号