LineMaterial.html 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>LineMaterial - 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="ShaderMaterial.html">ShaderMaterial</a> → </p>
  13. <h1 translate="no">LineMaterial</h1>
  14. <section>
  15. <header>
  16. <div class="class-description"><p>A material for drawing wireframe-style geometries.</p>
  17. <p>Unlike <a href="LineBasicMaterial.html">LineBasicMaterial</a>, it supports arbitrary line widths and allows using world units
  18. instead of screen space units. This material is used with <a href="LineSegments2.html">LineSegments2</a> and <a href="Line2.html">Line2</a>.</p>
  19. <p>This module can only be used with <a href="WebGLRenderer.html">WebGLRenderer</a>. When using <a href="WebGPURenderer.html">WebGPURenderer</a>,
  20. use <a href="Line2NodeMaterial.html">Line2NodeMaterial</a>.</p></div>
  21. </header>
  22. <article>
  23. <h2 class="subsection-title">Import</h2>
  24. <p><span translate="no">LineMaterial</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>
  25. <pre><code class="language-js">import { LineMaterial } from 'three/addons/lines/LineMaterial.js';</code></pre>
  26. <div class="container-overview">
  27. <h2>Constructor</h2>
  28. <h3 class="name name-method" id="LineMaterial" translate="no">new <a href="#LineMaterial">LineMaterial</a><span class="signature">( parameters : <span class="param-type">Object</span> )</span> </h3>
  29. <div class="method">
  30. <div class="description">
  31. <p>Constructs a new line segments geometry.</p>
  32. </div>
  33. <table class="params">
  34. <tbody>
  35. <tr>
  36. <td class="name">
  37. <strong>parameters</strong>
  38. </td>
  39. <td class="description last">
  40. <p>An object with one or more properties
  41. defining the material's appearance. Any property of the material
  42. (including any property from inherited materials) can be passed
  43. in here. Color values can be passed any type of value accepted
  44. by <a href="Color.html#set">Color#set</a>.</p>
  45. </td>
  46. </tr>
  47. </tbody>
  48. </table>
  49. </div>
  50. </div>
  51. <h2 class="subsection-title">Properties</h2>
  52. <div class="member">
  53. <h3 class="name" id="alphaToCoverage" translate="no">.<a href="#alphaToCoverage">alphaToCoverage</a><span class="type-signature"> : boolean</span> </h3>
  54. <div class="description">
  55. <p>Whether to use alphaToCoverage or not. When enabled, this can improve the
  56. anti-aliasing of line edges when using MSAA.</p>
  57. </div>
  58. <dl class="details">
  59. <dt class="tag-overrides"><strong>Overrides:</strong> <a href="ShaderMaterial.html#alphaToCoverage">ShaderMaterial#alphaToCoverage</a></dt>
  60. </dl>
  61. </div>
  62. <div class="member">
  63. <h3 class="name" id="color" translate="no">.<a href="#color">color</a><span class="type-signature"> : <a href="Color.html">Color</a></span> </h3>
  64. <div class="description">
  65. <p>The material's color.</p>
  66. <p>Default is <code>(1,1,1)</code>.</p>
  67. </div>
  68. </div>
  69. <div class="member">
  70. <h3 class="name" id="dashOffset" translate="no">.<a href="#dashOffset">dashOffset</a><span class="type-signature"> : number</span> </h3>
  71. <div class="description">
  72. <p>Where in the dash cycle the dash starts.</p>
  73. <p>Default is <code>0</code>.</p>
  74. </div>
  75. </div>
  76. <div class="member">
  77. <h3 class="name" id="dashScale" translate="no">.<a href="#dashScale">dashScale</a><span class="type-signature"> : number</span> </h3>
  78. <div class="description">
  79. <p>The scale of the dashes and gaps.</p>
  80. <p>Default is <code>1</code>.</p>
  81. </div>
  82. </div>
  83. <div class="member">
  84. <h3 class="name" id="dashSize" translate="no">.<a href="#dashSize">dashSize</a><span class="type-signature"> : number</span> </h3>
  85. <div class="description">
  86. <p>The size of the dash.</p>
  87. <p>Default is <code>1</code>.</p>
  88. </div>
  89. </div>
  90. <div class="member">
  91. <h3 class="name" id="dashed" translate="no">.<a href="#dashed">dashed</a><span class="type-signature"> : boolean</span> </h3>
  92. <div class="description">
  93. <p>Whether the line is dashed, or solid.</p>
  94. <p>Default is <code>false</code>.</p>
  95. </div>
  96. </div>
  97. <div class="member">
  98. <h3 class="name" id="gapSize" translate="no">.<a href="#gapSize">gapSize</a><span class="type-signature"> : number</span> </h3>
  99. <div class="description">
  100. <p>The size of the gap.</p>
  101. <p>Default is <code>0</code>.</p>
  102. </div>
  103. </div>
  104. <div class="member">
  105. <h3 class="name" id="isLineMaterial" translate="no">.<a href="#isLineMaterial">isLineMaterial</a><span class="type-signature"> : boolean</span> <span class="type-signature">(readonly) </span></h3>
  106. <div class="description">
  107. <p>This flag can be used for type testing.</p>
  108. <p>Default is <code>true</code>.</p>
  109. </div>
  110. </div>
  111. <div class="member">
  112. <h3 class="name" id="linewidth" translate="no">.<a href="#linewidth">linewidth</a><span class="type-signature"> : number</span> </h3>
  113. <div class="description">
  114. <p>Controls line thickness in CSS pixel units when <code>worldUnits</code> is <code>false</code> (default),
  115. or in world units when <code>worldUnits</code> is <code>true</code>.</p>
  116. <p>Default is <code>1</code>.</p>
  117. </div>
  118. <dl class="details">
  119. <dt class="tag-overrides"><strong>Overrides:</strong> <a href="ShaderMaterial.html#linewidth">ShaderMaterial#linewidth</a></dt>
  120. </dl>
  121. </div>
  122. <div class="member">
  123. <h3 class="name" id="opacity" translate="no">.<a href="#opacity">opacity</a><span class="type-signature"> : number</span> </h3>
  124. <div class="description">
  125. <p>The opacity.</p>
  126. <p>Default is <code>1</code>.</p>
  127. </div>
  128. <dl class="details">
  129. <dt class="tag-overrides"><strong>Overrides:</strong> <a href="ShaderMaterial.html#opacity">ShaderMaterial#opacity</a></dt>
  130. </dl>
  131. </div>
  132. <div class="member">
  133. <h3 class="name" id="resolution" translate="no">.<a href="#resolution">resolution</a><span class="type-signature"> : <a href="Vector2.html">Vector2</a></span> </h3>
  134. <div class="description">
  135. <p>The size of the viewport, in screen pixels. This must be kept updated to make
  136. screen-space rendering accurate.The <code>LineSegments2.onBeforeRender</code> callback
  137. performs the update for visible objects.</p>
  138. </div>
  139. </div>
  140. <div class="member">
  141. <h3 class="name" id="worldUnits" translate="no">.<a href="#worldUnits">worldUnits</a><span class="type-signature"> : boolean</span> </h3>
  142. <div class="description">
  143. <p>Whether the material's sizes (width, dash gaps) are in world units.</p>
  144. <p>Default is <code>false</code>.</p>
  145. </div>
  146. </div>
  147. <h2 class="subsection-title">Source</h2>
  148. <p>
  149. <a href="https://github.com/mrdoob/three.js/blob/master/examples/jsm/lines/LineMaterial.js" translate="no" target="_blank" rel="noopener">examples/jsm/lines/LineMaterial.js</a>
  150. </p>
  151. </article>
  152. </section>
  153. <script src="../scripts/linenumber.js"></script>
  154. <script src="../scripts/page.js"></script>
  155. </body>
  156. </html>
粤ICP备19079148号