Line.html 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Line - 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="Object3D.html">Object3D</a> → </p>
  13. <h1 translate="no">Line</h1>
  14. <section>
  15. <header>
  16. <div class="class-description"><p>A continuous line. The line are rendered by connecting consecutive
  17. vertices with straight lines.</p></div>
  18. <h2>Code Example</h2>
  19. <div translate="no"><pre><code class="language-js">const material = new THREE.LineBasicMaterial( { color: 0x0000ff } );
  20. const points = [];
  21. points.push( new THREE.Vector3( - 10, 0, 0 ) );
  22. points.push( new THREE.Vector3( 0, 10, 0 ) );
  23. points.push( new THREE.Vector3( 10, 0, 0 ) );
  24. const geometry = new THREE.BufferGeometry().setFromPoints( points );
  25. const line = new THREE.Line( geometry, material );
  26. scene.add( line );
  27. </code></pre></div>
  28. </header>
  29. <article>
  30. <div class="container-overview">
  31. <h2>Constructor</h2>
  32. <h3 class="name name-method" id="Line" translate="no">new <a href="#Line">Line</a><span class="signature">( geometry : <span class="param-type"><a href="BufferGeometry.html">BufferGeometry</a></span>, material : <span class="param-type"><a href="Material.html">Material</a> | Array.&lt;<a href="Material.html">Material</a>></span> )</span> </h3>
  33. <div class="method">
  34. <div class="description">
  35. <p>Constructs a new line.</p>
  36. </div>
  37. <table class="params">
  38. <tbody>
  39. <tr>
  40. <td class="name">
  41. <strong>geometry</strong>
  42. </td>
  43. <td class="description last">
  44. <p>The line geometry.</p>
  45. </td>
  46. </tr>
  47. <tr>
  48. <td class="name">
  49. <strong>material</strong>
  50. </td>
  51. <td class="description last">
  52. <p>The line material.</p>
  53. </td>
  54. </tr>
  55. </tbody>
  56. </table>
  57. </div>
  58. </div>
  59. <h2 class="subsection-title">Properties</h2>
  60. <div class="member">
  61. <h3 class="name" id="geometry" translate="no">.<a href="#geometry">geometry</a><span class="type-signature"> : <a href="BufferGeometry.html">BufferGeometry</a></span> </h3>
  62. <div class="description">
  63. <p>The line geometry.</p>
  64. </div>
  65. </div>
  66. <div class="member">
  67. <h3 class="name" id="isLine" translate="no">.<a href="#isLine">isLine</a><span class="type-signature"> : boolean</span> <span class="type-signature">(readonly) </span></h3>
  68. <div class="description">
  69. <p>This flag can be used for type testing.</p>
  70. <p>Default is <code>true</code>.</p>
  71. </div>
  72. </div>
  73. <div class="member">
  74. <h3 class="name" id="material" translate="no">.<a href="#material">material</a><span class="type-signature"> : <a href="Material.html">Material</a> | Array.&lt;<a href="Material.html">Material</a>></span> </h3>
  75. <div class="description">
  76. <p>The line material.</p>
  77. <p>Default is <code>LineBasicMaterial</code>.</p>
  78. </div>
  79. </div>
  80. <div class="member">
  81. <h3 class="name" id="morphTargetDictionary" translate="no">.<a href="#morphTargetDictionary">morphTargetDictionary</a><span class="type-signature"> : Object.&lt;String, number> | undefined</span> </h3>
  82. <div class="description">
  83. <p>A dictionary representing the morph targets in the geometry. The key is the
  84. morph targets name, the value its attribute index. This member is <code>undefined</code>
  85. by default and only set when morph targets are detected in the geometry.</p>
  86. <p>Default is <code>undefined</code>.</p>
  87. </div>
  88. </div>
  89. <div class="member">
  90. <h3 class="name" id="morphTargetInfluences" translate="no">.<a href="#morphTargetInfluences">morphTargetInfluences</a><span class="type-signature"> : Array.&lt;number> | undefined</span> </h3>
  91. <div class="description">
  92. <p>An array of weights typically in the range <code>[0,1]</code> that specify how much of the morph
  93. is applied. This member is <code>undefined</code> by default and only set when morph targets are
  94. detected in the geometry.</p>
  95. <p>Default is <code>undefined</code>.</p>
  96. </div>
  97. </div>
  98. <h2 class="subsection-title">Methods</h2>
  99. <h3 class="name name-method" id="computeLineDistances" translate="no">.<a href="#computeLineDistances">computeLineDistances</a><span class="signature">()</span><span class="type-signature"> : <a href="Line.html">Line</a></span> </h3>
  100. <div class="method">
  101. <div class="description">
  102. <p>Computes an array of distance values which are necessary for rendering dashed lines.
  103. For each vertex in the geometry, the method calculates the cumulative length from the
  104. current point to the very beginning of the line.</p>
  105. </div>
  106. <dl class="details">
  107. <dt class="tag-returns"><strong>Returns:</strong> A reference to this line.</dt>
  108. </dl>
  109. </div>
  110. <h3 class="name name-method" id="raycast" translate="no">.<a href="#raycast">raycast</a><span class="signature">( raycaster : <span class="param-type"><a href="Raycaster.html">Raycaster</a></span>, intersects : <span class="param-type">Array.&lt;Object></span> )</span> </h3>
  111. <div class="method">
  112. <div class="description">
  113. <p>Computes intersection points between a casted ray and this line.</p>
  114. </div>
  115. <table class="params">
  116. <tbody>
  117. <tr>
  118. <td class="name">
  119. <strong>raycaster</strong>
  120. </td>
  121. <td class="description last">
  122. <p>The raycaster.</p>
  123. </td>
  124. </tr>
  125. <tr>
  126. <td class="name">
  127. <strong>intersects</strong>
  128. </td>
  129. <td class="description last">
  130. <p>The target array that holds the intersection points.</p>
  131. </td>
  132. </tr>
  133. </tbody>
  134. </table>
  135. <dl class="details">
  136. <dt class="tag-overrides"><strong>Overrides:</strong> <a href="Object3D.html#raycast">Object3D#raycast</a></dt>
  137. </dl>
  138. </div>
  139. <h3 class="name name-method" id="updateMorphTargets" translate="no">.<a href="#updateMorphTargets">updateMorphTargets</a><span class="signature">()</span> </h3>
  140. <div class="method">
  141. <div class="description">
  142. <p>Sets the values of <a href="Line.html#morphTargetDictionary">Line#morphTargetDictionary</a> and <a href="Line.html#morphTargetInfluences">Line#morphTargetInfluences</a>
  143. to make sure existing morph targets can influence this 3D object.</p>
  144. </div>
  145. </div>
  146. <h2 class="subsection-title">Source</h2>
  147. <p>
  148. <a href="https://github.com/mrdoob/three.js/blob/master/src/objects/Line.js" translate="no" target="_blank" rel="noopener">src/objects/Line.js</a>
  149. </p>
  150. </article>
  151. </section>
  152. <script src="../scripts/linenumber.js"></script>
  153. <script src="../scripts/page.js"></script>
  154. </body>
  155. </html>
粤ICP备19079148号