BufferGeometry.html 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <base href="../../../" />
  6. <script src="page.js"></script>
  7. <link type="text/css" rel="stylesheet" href="page.css" />
  8. </head>
  9. <body>
  10. <h1>[name]</h1>
  11. <p>
  12. A representation of mesh, line, or point geometry. Includes vertex
  13. positions, face indices, normals, colors, UVs, and custom attributes
  14. within buffers, reducing the cost of passing all this data to the GPU.
  15. </p>
  16. <p>
  17. To read and edit data in BufferGeometry attributes, see
  18. [page:BufferAttribute] documentation.
  19. </p>
  20. <h2>Code Example</h2>
  21. <code>
  22. const geometry = new THREE.BufferGeometry();
  23. // create a simple square shape. We duplicate the top left and bottom right
  24. // vertices because each vertex needs to appear once per triangle.
  25. const vertices = new Float32Array( [
  26. -1.0, -1.0, 1.0, // v0
  27. 1.0, -1.0, 1.0, // v1
  28. 1.0, 1.0, 1.0, // v2
  29. 1.0, 1.0, 1.0, // v3
  30. -1.0, 1.0, 1.0, // v4
  31. -1.0, -1.0, 1.0 // v5
  32. ] );
  33. // itemSize = 3 because there are 3 values (components) per vertex
  34. geometry.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
  35. const material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
  36. const mesh = new THREE.Mesh( geometry, material );
  37. </code>
  38. <h2>Code Example (Index)</h2>
  39. <code>
  40. const geometry = new THREE.BufferGeometry();
  41. const vertices = new Float32Array( [
  42. -1.0, -1.0, 1.0, // v0
  43. 1.0, -1.0, 1.0, // v1
  44. 1.0, 1.0, 1.0, // v2
  45. -1.0, 1.0, 1.0, // v3
  46. ] );
  47. const indices = [
  48. 0, 1, 2,
  49. 2, 3, 0,
  50. ];
  51. geometry.setIndex( indices );
  52. geometry.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
  53. const material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
  54. const mesh = new THREE.Mesh( geometry, material );
  55. </code>
  56. <h2>Examples</h2>
  57. <p>
  58. [example:webgl_buffergeometry Mesh with non-indexed faces]<br />
  59. [example:webgl_buffergeometry_indexed Mesh with indexed faces]<br />
  60. [example:webgl_buffergeometry_lines Lines]<br />
  61. [example:webgl_buffergeometry_lines_indexed Indexed Lines]<br />
  62. [example:webgl_buffergeometry_custom_attributes_particles Particles]<br />
  63. [example:webgl_buffergeometry_rawshader Raw Shaders]
  64. </p>
  65. <h2>Constructor</h2>
  66. <h3>[name]()</h3>
  67. <div>
  68. This creates a new [name]. It also sets several properties to a default
  69. value.
  70. </div>
  71. <h2>Properties</h2>
  72. <h3>[property:Object attributes]</h3>
  73. <p>
  74. This hashmap has as id the name of the attribute to be set and as value
  75. the [page:BufferAttribute buffer] to set it to. Rather than accessing this
  76. property directly, use [page:.setAttribute] and [page:.getAttribute] to
  77. access attributes of this geometry.
  78. </p>
  79. <h3>[property:Box3 boundingBox]</h3>
  80. <p>
  81. Bounding box for the bufferGeometry, which can be calculated with
  82. [page:.computeBoundingBox](). Default is `null`.
  83. </p>
  84. <h3>[property:Sphere boundingSphere]</h3>
  85. <p>
  86. Bounding sphere for the bufferGeometry, which can be calculated with
  87. [page:.computeBoundingSphere](). Default is `null`.
  88. </p>
  89. <h3>[property:Object drawRange]</h3>
  90. <p>
  91. Determines the part of the geometry to render. This should not be set
  92. directly, instead use [page:.setDrawRange]. Default is
  93. <code>
  94. { start: 0, count: Infinity }
  95. </code>
  96. For non-indexed BufferGeometry, count is the number of vertices to render.
  97. For indexed BufferGeometry, count is the number of indices to render.
  98. </p>
  99. <h3>[property:Array groups]</h3>
  100. <p>
  101. Split the geometry into groups, each of which will be rendered in a
  102. separate WebGL draw call. This allows an array of materials to be used
  103. with the geometry.<br /><br />
  104. Each group is an object of the form:
  105. <code>
  106. { start: Integer, count: Integer, materialIndex: Integer }
  107. </code>
  108. where start specifies the first element in this draw call – the first
  109. vertex for non-indexed geometry, otherwise the first triangle index. Count
  110. specifies how many vertices (or indices) are included, and materialIndex
  111. specifies the material array index to use.<br /><br />
  112. Use [page:.addGroup] to add groups, rather than modifying this array
  113. directly.<br /><br />
  114. Every vertex and index must belong to exactly one group — groups must not
  115. share vertices or indices, and must not leave vertices or indices unused.
  116. </p>
  117. <!-- Note: groups used to be called drawCalls
  118. <h3>[property:Array drawcalls]</h3>
  119. <p>
  120. For geometries that use indexed triangles, this Array can be used to split the object
  121. into multiple WebGL draw calls. Each draw call will draw some subset of the vertices
  122. in this geometry using the configured [page:Material shader]. This may be necessary if,
  123. for instance, you have more than 65535 vertices in your object.
  124. </p> -->
  125. <h3>[property:Integer id]</h3>
  126. <p>Unique number for this bufferGeometry instance.</p>
  127. <h3>[property:BufferAttribute index]</h3>
  128. <p>
  129. Allows for vertices to be re-used across multiple triangles; this is
  130. called using "indexed triangles". Each triangle is associated with the
  131. indices of three vertices. This attribute therefore stores the index of
  132. each vertex for each triangular face. If this attribute is not set, the
  133. [page:WebGLRenderer renderer] assumes that each three contiguous positions
  134. represent a single triangle. Default is `null`.
  135. </p>
  136. <h3>[property:Boolean isBufferGeometry]</h3>
  137. <p>Read-only flag to check if a given object is of type [name].</p>
  138. <h3>[property:Object morphAttributes]</h3>
  139. <p>
  140. Hashmap of [page:BufferAttribute]s holding details of the geometry's morph
  141. targets.<br />
  142. Note: Once the geometry has been rendered, the morph attribute data cannot
  143. be changed. You will have to call [page:.dispose](), and create a new
  144. instance of [name].
  145. </p>
  146. <h3>[property:Boolean morphTargetsRelative]</h3>
  147. <p>
  148. Used to control the morph target behavior; when set to true, the morph
  149. target data is treated as relative offsets, rather than as absolute
  150. positions/normals. Default is `false`.
  151. </p>
  152. <h3>[property:String name]</h3>
  153. <p>
  154. Optional name for this bufferGeometry instance. Default is an empty
  155. string.
  156. </p>
  157. <h3>[property:Object userData]</h3>
  158. <p>
  159. An object that can be used to store custom data about the BufferGeometry.
  160. It should not hold references to functions as these will not be cloned.
  161. Default is an empty object `{}`.
  162. </p>
  163. <h3>[property:String uuid]</h3>
  164. <p>
  165. [link:http://en.wikipedia.org/wiki/Universally_unique_identifier UUID] of
  166. this object instance. This gets automatically assigned and shouldn't be
  167. edited.
  168. </p>
  169. <h2>Methods</h2>
  170. <p>
  171. [page:EventDispatcher EventDispatcher] methods are available on this
  172. class.
  173. </p>
  174. <h3>[method:undefined addGroup]( [param:Integer start], [param:Integer count], [param:Integer materialIndex] )</h3>
  175. <p>
  176. Adds a group to this geometry; see the [page:BufferGeometry.groups groups]
  177. property for details.
  178. </p>
  179. <h3>[method:this applyMatrix4]( [param:Matrix4 matrix] )</h3>
  180. <p>Applies the matrix transform to the geometry.</p>
  181. <h3>[method:this applyQuaternion]( [param:Quaternion quaternion] )</h3>
  182. <p>Applies the rotation represented by the quaternion to the geometry.</p>
  183. <h3>[method:this center] ()</h3>
  184. <p>Center the geometry based on the bounding box.</p>
  185. <h3>[method:undefined clearGroups]( )</h3>
  186. <p>Clears all groups.</p>
  187. <h3>[method:BufferGeometry clone]()</h3>
  188. <p>Creates a clone of this BufferGeometry.</p>
  189. <h3>[method:undefined computeBoundingBox]()</h3>
  190. <p>
  191. Computes the bounding box of the geometry, and updates the [page:.boundingBox] attribute.
  192. The bounding box is not computed by the engine; it must be computed by your app.
  193. You may need to recompute the bounding box if the geometry vertices are modified.
  194. </p>
  195. <h3>[method:undefined computeBoundingSphere]()</h3>
  196. <p>
  197. Computes the bounding sphere of the geometry, and updates the [page:.boundingSphere] attribute.
  198. The engine automatically computes the bounding sphere when it is needed, e.g., for ray casting or view frustum culling.
  199. You may need to recompute the bounding sphere if the geometry vertices are modified.
  200. </p>
  201. <h3>[method:undefined computeTangents]()</h3>
  202. <p>
  203. Calculates and adds a tangent attribute to this geometry.<br />
  204. The computation is only supported for indexed geometries and if position,
  205. normal, and uv attributes are defined. When using a tangent space normal
  206. map, prefer the MikkTSpace algorithm provided by
  207. [page:BufferGeometryUtils.computeMikkTSpaceTangents] instead.
  208. </p>
  209. <h3>[method:undefined computeVertexNormals]()</h3>
  210. <p>Computes vertex normals for the given vertex data. For indexed geometries, the method sets each vertex normal to be the average of the face normals of the faces that share that vertex.
  211. For non-indexed geometries, vertices are not shared, and the method sets each vertex normal to be the same as the face normal.</p>
  212. <h3>[method:this copy]( [param:BufferGeometry bufferGeometry] )</h3>
  213. <p>Copies another BufferGeometry to this BufferGeometry.</p>
  214. <h3>[method:BufferAttribute deleteAttribute]( [param:String name] )</h3>
  215. <p>Deletes the [page:BufferAttribute attribute] with the specified name.</p>
  216. <h3>[method:undefined dispose]()</h3>
  217. <p>
  218. Frees the GPU-related resources allocated by this instance. Call this
  219. method whenever this instance is no longer used in your app.
  220. </p>
  221. <h3>[method:BufferAttribute getAttribute]( [param:String name] )</h3>
  222. <p>Returns the [page:BufferAttribute attribute] with the specified name.</p>
  223. <h3>[method:BufferAttribute getIndex] ()</h3>
  224. <p>Return the [page:.index] buffer.</p>
  225. <h3>[method:Boolean hasAttribute]( [param:String name] )</h3>
  226. <p>Returns `true` if the attribute with the specified name exists.</p>
  227. <h3>[method:this lookAt] ( [param:Vector3 vector] )</h3>
  228. <p>
  229. vector - A world vector to look at.<br /><br />
  230. Rotates the geometry to face a point in space. This is typically done as a
  231. one time operation, and not during a loop. Use [page:Object3D.lookAt] for
  232. typical real-time mesh usage.
  233. </p>
  234. <h3>[method:undefined normalizeNormals]()</h3>
  235. <p>
  236. Every normal vector in a geometry will have a magnitude of `1`. This will
  237. correct lighting on the geometry surfaces.
  238. </p>
  239. <h3>[method:this rotateX] ( [param:Float radians] )</h3>
  240. <p>
  241. Rotate the geometry about the X axis. This is typically done as a one time
  242. operation, and not during a loop. Use [page:Object3D.rotation] for typical
  243. real-time mesh rotation.
  244. </p>
  245. <h3>[method:this rotateY] ( [param:Float radians] )</h3>
  246. <p>
  247. Rotate the geometry about the Y axis. This is typically done as a one time
  248. operation, and not during a loop. Use [page:Object3D.rotation] for typical
  249. real-time mesh rotation.
  250. </p>
  251. <h3>[method:this rotateZ] ( [param:Float radians] )</h3>
  252. <p>
  253. Rotate the geometry about the Z axis. This is typically done as a one time
  254. operation, and not during a loop. Use [page:Object3D.rotation] for typical
  255. real-time mesh rotation.
  256. </p>
  257. <h3>[method:this scale] ( [param:Float x], [param:Float y], [param:Float z] )</h3>
  258. <p>
  259. Scale the geometry data. This is typically done as a one time operation,
  260. and not during a loop. Use [page:Object3D.scale] for typical real-time
  261. mesh scaling.
  262. </p>
  263. <h3>[method:this setAttribute]( [param:String name], [param:BufferAttribute attribute] )</h3>
  264. <p>
  265. Sets an attribute to this geometry. Use this rather than the attributes
  266. property, because an internal hashmap of [page:.attributes] is maintained
  267. to speed up iterating over attributes.
  268. </p>
  269. <h3>[method:undefined setDrawRange] ( [param:Integer start], [param:Integer count] )</h3>
  270. <p>
  271. Set the [page:.drawRange] property. For non-indexed BufferGeometry, count
  272. is the number of vertices to render. For indexed BufferGeometry, count is
  273. the number of indices to render.
  274. </p>
  275. <h3>[method:this setFromPoints] ( [param:Array points] )</h3>
  276. <p>Sets the attributes for this BufferGeometry from an array of points.</p>
  277. <h3>[method:this setIndex] ( [param:BufferAttribute index] )</h3>
  278. <p>Set the [page:.index] buffer.</p>
  279. <h3>[method:Object toJSON]()</h3>
  280. <p>
  281. Convert the buffer geometry to three.js
  282. [link:https://github.com/mrdoob/three.js/wiki/JSON-Object-Scene-format-4 JSON Object/Scene format].
  283. </p>
  284. <h3>[method:BufferGeometry toNonIndexed]()</h3>
  285. <p>Return a non-index version of an indexed BufferGeometry.</p>
  286. <h3>[method:this translate] ( [param:Float x], [param:Float y], [param:Float z] )</h3>
  287. <p>
  288. Translate the geometry. This is typically done as a one time operation,
  289. and not during a loop. Use [page:Object3D.position] for typical real-time
  290. mesh translation.
  291. </p>
  292. <h2>Source</h2>
  293. <p>
  294. [link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
  295. </p>
  296. </body>
  297. </html>