PointsMaterial.html 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>PointsMaterial - 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> → </p>
  13. <h1 translate="no">PointsMaterial</h1>
  14. <section>
  15. <header>
  16. <div class="class-description"><p>A material for rendering point primitives.</p>
  17. <p>Materials define the appearance of renderable 3D objects.</p></div>
  18. <h2>Code Example</h2>
  19. <div translate="no"><pre><code class="language-js">const vertices = [];
  20. for ( let i = 0; i &lt; 10000; i ++ ) {
  21. const x = THREE.MathUtils.randFloatSpread( 2000 );
  22. const y = THREE.MathUtils.randFloatSpread( 2000 );
  23. const z = THREE.MathUtils.randFloatSpread( 2000 );
  24. vertices.push( x, y, z );
  25. }
  26. const geometry = new THREE.BufferGeometry();
  27. geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
  28. const material = new THREE.PointsMaterial( { color: 0x888888 } );
  29. const points = new THREE.Points( geometry, material );
  30. scene.add( points );
  31. </code></pre></div>
  32. </header>
  33. <article>
  34. <div class="container-overview">
  35. <h2>Constructor</h2>
  36. <h3 class="name name-method" id="PointsMaterial" translate="no">new <a href="#PointsMaterial">PointsMaterial</a><span class="signature">( parameters : <span class="param-type">Object</span> )</span> </h3>
  37. <div class="method">
  38. <div class="description">
  39. <p>Constructs a new points material.</p>
  40. </div>
  41. <table class="params">
  42. <tbody>
  43. <tr>
  44. <td class="name">
  45. <strong>parameters</strong>
  46. </td>
  47. <td class="description last">
  48. <p>An object with one or more properties
  49. defining the material's appearance. Any property of the material
  50. (including any property from inherited materials) can be passed
  51. in here. Color values can be passed any type of value accepted
  52. by <a href="Color.html#set">Color#set</a>.</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="alphaMap" translate="no">.<a href="#alphaMap">alphaMap</a><span class="type-signature"> : <a href="Texture.html">Texture</a></span> </h3>
  62. <div class="description">
  63. <p>The alpha map is a grayscale texture that controls the opacity across the
  64. surface (black: fully transparent; white: fully opaque).</p>
  65. <p>Only the color of the texture is used, ignoring the alpha channel if one
  66. exists. For RGB and RGBA textures, the renderer will use the green channel
  67. when sampling this texture due to the extra bit of precision provided for
  68. green in DXT-compressed and uncompressed RGB 565 formats. Luminance-only and
  69. luminance/alpha textures will also still work as expected.</p>
  70. <p>Default is <code>null</code>.</p>
  71. </div>
  72. </div>
  73. <div class="member">
  74. <h3 class="name" id="color" translate="no">.<a href="#color">color</a><span class="type-signature"> : <a href="Color.html">Color</a></span> </h3>
  75. <div class="description">
  76. <p>Color of the material.</p>
  77. <p>Default is <code>(1,1,1)</code>.</p>
  78. </div>
  79. </div>
  80. <div class="member">
  81. <h3 class="name" id="fog" translate="no">.<a href="#fog">fog</a><span class="type-signature"> : boolean</span> </h3>
  82. <div class="description">
  83. <p>Whether the material is affected by fog or not.</p>
  84. <p>Default is <code>true</code>.</p>
  85. </div>
  86. </div>
  87. <div class="member">
  88. <h3 class="name" id="isPointsMaterial" translate="no">.<a href="#isPointsMaterial">isPointsMaterial</a><span class="type-signature"> : boolean</span> <span class="type-signature">(readonly) </span></h3>
  89. <div class="description">
  90. <p>This flag can be used for type testing.</p>
  91. <p>Default is <code>true</code>.</p>
  92. </div>
  93. </div>
  94. <div class="member">
  95. <h3 class="name" id="map" translate="no">.<a href="#map">map</a><span class="type-signature"> : <a href="Texture.html">Texture</a></span> </h3>
  96. <div class="description">
  97. <p>The color map. May optionally include an alpha channel, typically combined
  98. with <a href="Material.html#transparent">Material#transparent</a> or <a href="Material.html#alphaTest">Material#alphaTest</a>. The texture map
  99. color is modulated by the diffuse <code>color</code>.</p>
  100. <p>Default is <code>null</code>.</p>
  101. </div>
  102. </div>
  103. <div class="member">
  104. <h3 class="name" id="size" translate="no">.<a href="#size">size</a><span class="type-signature"> : number</span> </h3>
  105. <div class="description">
  106. <p>Defines the size of the points in pixels.</p>
  107. <p>Might be capped if the value exceeds hardware dependent parameters like <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/getParamete" target="_blank" rel="noopener">gl.ALIASED_POINT_SIZE_RANGE</a>.</p>
  108. <p>Default is <code>1</code>.</p>
  109. </div>
  110. </div>
  111. <div class="member">
  112. <h3 class="name" id="sizeAttenuation" translate="no">.<a href="#sizeAttenuation">sizeAttenuation</a><span class="type-signature"> : boolean</span> </h3>
  113. <div class="description">
  114. <p>Specifies whether size of individual points is attenuated by the camera depth (perspective camera only).</p>
  115. <p>Default is <code>true</code>.</p>
  116. </div>
  117. </div>
  118. <h2 class="subsection-title">Source</h2>
  119. <p>
  120. <a href="https://github.com/mrdoob/three.js/blob/master/src/materials/PointsMaterial.js" translate="no" target="_blank" rel="noopener">src/materials/PointsMaterial.js</a>
  121. </p>
  122. </article>
  123. </section>
  124. <script src="../scripts/linenumber.js"></script>
  125. <script src="../scripts/page.js"></script>
  126. </body>
  127. </html>
粤ICP备19079148号