Geometry.html 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <base href="../../../" />
  6. <script src="list.js"></script>
  7. <script src="page.js"></script>
  8. <link type="text/css" rel="stylesheet" href="page.css" />
  9. </head>
  10. <body>
  11. <h1>[name]</h1>
  12. <div class="desc">
  13. <p>
  14. Geometry 是对 [page:BufferGeometry] 的用户有好替代。Geometry 利用 [page:Vector3]
  15. 或 [page:Color] 存储了几何体的相关 attributes(如顶点位置,面信息,颜色等)比起 BufferGeometry
  16. 更容易读写,但是运行效率不如有类型的队列。
  17. </p>
  18. <p>
  19. 对于大型工程或正式工程,推荐采用 [page:BufferGeometry]。
  20. </p>
  21. </div>
  22. <h2>示例</h2>
  23. <div>[example:webgl_geometry_minecraft WebGL / geometry / minecraft ]</div>
  24. <div>[example:webgl_geometry_minecraft_ao WebGL / geometry / minecraft / ao ]</div>
  25. <div>[example:webgl_geometry_nurbs WebGL / geometry / nurbs ]</div>
  26. <div>[example:webgl_geometry_spline_editor WebGL / geometry / spline / editor ]</div>
  27. <div>[example:webgl_interactive_cubes_gpu WebGL / interactive / cubes / gpu ]</div>
  28. <div>[example:webgl_interactive_lines WebGL / interactive / lines ]</div>
  29. <div>[example:webgl_interactive_raycasting_points WebGL / interactive / raycasting / points ]</div>
  30. <div>[example:webgl_interactive_voxelpainter WebGL / interactive / voxelpainter ]</div>
  31. <div>[example:webgl_morphnormals WebGL / morphNormals ]</div>
  32. <code>var geometry = new THREE.Geometry();
  33. geometry.vertices.push(
  34. new THREE.Vector3( -10, 10, 0 ),
  35. new THREE.Vector3( -10, -10, 0 ),
  36. new THREE.Vector3( 10, -10, 0 )
  37. );
  38. geometry.faces.push( new THREE.Face3( 0, 1, 2 ) );
  39. geometry.computeBoundingSphere();
  40. </code>
  41. <h2>构造函数</h2>
  42. <h3>[name]()</h3>
  43. <p>
  44. 构造函数没有任何参数。
  45. </p>
  46. <h2>属性</h2>
  47. <h3>[property:Box3 boundingBox]</h3>
  48. <p>
  49. Geometry 的外边界矩形,可以通过 [page:.computeBoundingBox]() 进行计算,默认值是 *null*。
  50. </p>
  51. <h3>[property:Sphere boundingSphere]</h3>
  52. <p>
  53. Geometry 的外边界球形,可以通过 [page:.computeBoundingSphere]() 进行计算,默认值是 *null*。
  54. </p>
  55. <h3>[property:Array colors]</h3>
  56. <p>
  57. 顶点 [page:Color colors] 队列,与顶点数量和顺序保持一致。<br /><br />
  58. 该属性用于 [page:Points] 、 [page:Line] 或派生自 [page:LineSegments] 的类。
  59. 对于 [page:Mesh Meshes],请使用 [page:Face3.vertexColors] 函数。<br /><br />
  60. 如果要标记队列中的数据已经更新,[page:Geometry Geometry.colorsNeedUpdate] 值需要被设置为 true。
  61. </p>
  62. <h3>[property:Array faces]</h3>
  63. <p>
  64. [page:Face3 faces] 队列。<br />
  65. 描述每个顶点之间如何组成模型面的面队列。同时该队列保存面和顶点的法向量和颜色信息。<br /><br />
  66. 如果要标记队列中的数据已经更新,[page:Geometry Geometry.elementsNeedUpdate] 值需要被设置为 true。
  67. </p>
  68. <h3>[property:Array faceVertexUvs]</h3>
  69. <p>
  70. 面的 [link:https://en.wikipedia.org/wiki/UV_mapping UV] 层的队列,该队列用于将纹理和几何信息进行映射。<br />
  71. 每个 UV 层都是一个 [page:UV] 的队列,顺序和数量同面中的顶点相对用。<br /><br />
  72. 如果要标记队列中的数据已经更新,[page:Geometry Geometry.uvsNeedUpdate] 值需要被设置为 true。
  73. </p>
  74. <h3>[property:Integer id]</h3>
  75. <p>当前 geometry 实例的唯一标识符的数。</p>
  76. <h3>[property:Boolean isGeometry]</h3>
  77. <p>
  78. 用于判断当前类或派生类属于 Geometries。默认值是 *true*。<br /><br />
  79. 你不应该改变该值,该值用于内部优化。
  80. </p>
  81. <h3>[property:array lineDistances]</h3>
  82. <p>
  83. 用于保存线型几何体中每个顶点间距离的。在正确渲染 [page:LineDashedMaterial] 时,需要用到该数据。
  84. </p>
  85. <h3>[property:Array morphTargets]</h3>
  86. <p>
  87. [link:https://en.wikipedia.org/wiki/Morph_target_animation morph targets] 的队列。每个
  88. morph target 都是一个如下的 javascript 对象:
  89. <code>{ name: "targetName", vertices: [ new THREE.Vector3(), ... ] }</code>
  90. Morph 顶点和几何体原始顶点在数量和顺序上需要一一对应。
  91. </p>
  92. <h3>[property:Array morphNormals]</h3>
  93. <p>
  94. 一个 morph 法向量的数组。Morph 法向量和 morph target 有类似的结构,每个法向量都是一个如下的 Javascript 对象:
  95. <code>morphNormal = { name: "NormalName", normals: [ new THREE.Vector3(), ... ] }</code>
  96. 示例详见 [example:webgl_morphnormals WebGL / morphNormals]。
  97. </p>
  98. <h3>[property:String name]</h3>
  99. <p>当前几何的可选别名。默认值是一个空字符串。</p>
  100. <h3>[property:Array skinWeights]</h3>
  101. <p>
  102. 当在处理一个 [page:SkinnedMesh] 时,每个顶点最多可以有 4 个相关的 [page:Bone bones] 来影响它。
  103. skinWeights 属性是一个权重队列,顺序同几何体中的顶点保持一致。因而,队列中的第一个 skinWeight
  104. 就对应几何体中的第一个顶点。由于每个顶点可以被 4 个 [page:Bone bones] 营销,因而每个顶点的 skinWeights
  105. 就采用一个 [page:Vector4] 表示。
  106. </p>
  107. <p>
  108. skinWeight 矢量中每个元素的取值范围应该在 0 到 1 之间。例如,当设置为 0,骨骼对该顶点的位置没有影响。当设置为 0.5,
  109. 则对顶点的影响为 50%。 当设置为 100% 则对顶点的影响是 100%。如果矢量中只有一个骨骼与顶点相关联,则你只需要关注矢量中的第一个元素,
  110. 剩余的元素可以忽略,他们的值可以都设置为 0。
  111. </p>
  112. <h3>[property:Array skinIndices]</h3>
  113. <p>
  114. 就如同 skinWeights 属性一样。skinWeights 的值也是与几何体的顶点相对应。每个顶点可以最多有 4 个骨骼与之相关联。
  115. 因而第一个 skinIndex 就与几何体的第一个顶点相关联,skinIndex 的值就指明了影响该顶点的骨骼是哪个。例如,第一个顶点的值是
  116. <strong>( 10.05, 30.10, 12.12 )</strong>,第一个 skinIndex 的值是<strong>( 10, 2, 0, 0 )</strong>,第一个 skinWeight
  117. 的值是 <strong>( 0.8, 0.2, 0, 0 )</strong>。上述值表明第一个顶点受到<strong>mesh.bones[10]</strong>骨骼的影响有 80%,
  118. 受到 <strong>skeleton.bones[2]</strong> 的影响是 20%,由于另外两个 skinWeight 的值是 0,因而他们对顶点没有任何影响。
  119. </p>
  120. <p>
  121. 下面以代码的形式展示示例:
  122. <code>
  123. // 例如
  124. geometry.skinIndices[15] = new THREE.Vector4( 0, 5, 9, 10 );
  125. geometry.skinWeights[15] = new THREE.Vector4( 0.2, 0.5, 0.3, 0 );
  126. // 与该顶点相关
  127. geometry.vertices[15];
  128. // 相应骨骼可以这样被调用:
  129. skeleton.bones[0]; // weight of 0.2
  130. skeleton.bones[5]; // weight of 0.5
  131. skeleton.bones[9]; // weight of 0.3
  132. skeleton.bones[10]; // weight of 0
  133. </code>
  134. </p>
  135. <h3>[property:String uuid]</h3>
  136. <p>
  137. 当前对象实例的 [link:http://en.wikipedia.org/wiki/Universally_unique_identifier UUID]。
  138. 该值会被自动分配,请不要修改它。
  139. </p>
  140. <h3>[property:Array vertices]</h3>
  141. <p>
  142. [page:Vector3 vertices] 的队列。<br />
  143. 顶点的队列,保存了模型中每个顶点的位置信息。<br />
  144. 如果要标记队列中的数据已经更新,[page:.verticesNeedUpdate] 值需要被设置为 true。
  145. </p>
  146. <h3>[property:Boolean verticesNeedUpdate]</h3>
  147. <p> 如果顶点队列中的数据被修改,该值需要被设置为 *true*。</p>
  148. <h3>[property:Boolean elementsNeedUpdate]</h3>
  149. <p> 如果面队列中的数据被修改,该值需要被设置为 *true*。</p>
  150. <h3>[property:Boolean uvsNeedUpdate]</h3>
  151. <p> 如果 UV 队列中的数据被修改,该值需要被设置为 *true*。</p>
  152. <h3>[property:Boolean normalsNeedUpdate]</h3>
  153. <p> 如果法向量队列中的数据被修改,该值需要被设置为 *true*。</p>
  154. <h3>[property:Boolean colorsNeedUpdate]</h3>
  155. <p> 如果颜色队列或 face3 的颜色数据被修改,该值需要被设置为 *true*。</p>
  156. <h3>[property:Boolean groupsNeedUpdate]</h3>
  157. <p> 如果 face3 的 materialIndex 被修改,该值需要被设置为 *true*。</p>
  158. <h3>[property:Boolean lineDistancesNeedUpdate]</h3>
  159. <p> 如果 linedistances 队列中的数据被修改,该值需要被设置为 *true*。</p>
  160. <h2>方法</h2>
  161. <h3>[page:EventDispatcher EventDispatcher] 该类中可用的函数。</h3>
  162. <h3>[method:null applyMatrix]( [param:Matrix4 matrix] )</h3>
  163. <p> 将矩阵信息直接应用于几何体顶点坐标。</p>
  164. <h3>[method:Geometry center] ()</h3>
  165. <p> 基于外边界矩形将几何体居中。</p>
  166. <h3>[method:Geometry clone]()</h3>
  167. <p>克隆当前几何体。<br /><br />
  168. 该方法除几何体的顶点、面信息和 UV 外不会复制其他属性。
  169. </p>
  170. <h3>[method:null computeBoundingBox]()</h3>
  171. <p> 计算当前几何体的外边界矩形。该方法会更新 [page:Geometry Geometry.boundingBox] 属性值。</p>
  172. <h3>[method:null computeBoundingSphere]()</h3>
  173. <p> 计算当前几何体的外边界球。该方法会更新 [page:Geometry Geometry.boundingSphere] 属性值。</p>
  174. <p>
  175. 计算外边界矩形或外边界球并不是默认会自动调用的方法,这两个函数需要被显示的调用才能天得到相应属性值,否则对应属性值保持默认值 *null*。
  176. </p>
  177. <h3>[method:null computeFaceNormals]()</h3>
  178. <p> 计算 [page:Face3.normal face normals] 值。</p>
  179. <h3>[method:null computeFlatVertexNormals]()</h3>
  180. <p> 计算 flat [page:Face3.vertexNormals vertex normals] 值。
  181. 该方法会将顶点法向量的值赋值为相应面的法向量值。</p>
  182. <h3>[method:null computeMorphNormals]()</h3>
  183. <p> 计算 [page:.morphNormals] 值。</p>
  184. <h3>[method:null computeVertexNormals]( [param:Boolean areaWeighted] )</h3>
  185. <p>
  186. areaWeighted - 如果该值设置为 true,则每个面的法向量对顶点法向量的影响按照面的面积大小来计算。默认值为 true.<br /><br />
  187. 通过周围面的法向量计算顶点的法向量。
  188. </p>
  189. <h3>[method:Geometry copy]( [param:Geometry geometry] )</h3>
  190. <p>
  191. 将参数代表的几何体的顶点、面和 UV 复制到当前几何体。该方法不会复制除此以外的别的属性值。
  192. </p>
  193. <h3>[method:null dispose]()</h3>
  194. <p>
  195. 将对象从内存中删除。 <br />
  196. 在你删除一个几何体时,不要忘记调用该方法,否则会造成内存泄漏。
  197. </p>
  198. <h3>[method:Geometry fromBufferGeometry]( [param:BufferGeometry geometry] )</h3>
  199. <p> 将一个 [page:BufferGeometry] 对象,转换成一个 Geometry 对象。</p>
  200. <h3>[method:Geometry lookAt] ( [param:Vector3 vector] )</h3>
  201. <p>
  202. vector - 当前几何体朝向的世界坐标。<br /><br />
  203. 该方法将几何体进行旋转,是的几何体朝向参数指定的世界坐标。该方法一般在一次处理中完成,但不在渲染过程中执行。<br>
  204. 一般使用 [page:Object3D.lookAt] 方法进行实时更改。
  205. </p>
  206. <h3>[method:null merge]( [param:Geometry geometry], [param:Matrix4 matrix], [param:Integer materialIndexOffset] )</h3>
  207. <p> 将两个几何体,或一个几何体和一个从对象中通过变换获得的几何体进行合并。</p>
  208. <h3>[method:null mergeMesh]( [param:Mesh mesh] )</h3>
  209. <p> 将参数指定的面片信息与当前几何体进行合并。同样会使用到参数 mesh 的变换。</p>
  210. <h3>[method:null mergeVertices]()</h3>
  211. <p>
  212. 通过 hashmap 检查重复的顶点。<br />
  213. 重复的顶点将会被移除,面的顶点信息会被更新。
  214. </p>
  215. <h3>[method:null normalize]()</h3>
  216. <p>
  217. 将当前几何体归一化。 <br />
  218. 将当前几何体居中,并且使得该几何体的外边界球半径为 *1.0*。
  219. </p>
  220. <h3>[method:Geometry rotateX] ( [param:Float radians] )</h3>
  221. <p>
  222. 将几何体绕 X 轴旋转参数指定度数。该操作通常在一次处理中完成,但不会在渲染过程中处理。<br>
  223. 使用 [page:Object3D.rotation] 对模型面片进行实时旋转处理。
  224. </p>
  225. <h3>[method:Geometry rotateY] ( [param:Float radians] )</h3>
  226. <p>
  227. 将几何体绕 Y 轴旋转参数指定度数。该操作通常在一次处理中完成,但不会在渲染过程中处理。<br>
  228. 使用 [page:Object3D.rotation] 对模型面片进行实时旋转处理。
  229. </p>
  230. <h3>[method:Geometry rotateZ] ( [param:Float radians] )</h3>
  231. <p>
  232. 将几何体绕 Z 轴旋转参数指定度数。该操作通常在一次处理中完成,但不会在渲染过程中处理。<br>
  233. 使用 [page:Object3D.rotation] 对模型面片进行实时旋转处理。
  234. </p>
  235. <h3>[method:Geometry setFromPoints] ( [param:Array points] )</h3>
  236. <p>通过点队列设置一个 Geometry 中的顶点。</p>
  237. <h3>[method:null sortFacesByMaterialIndex] ( )</h3>
  238. <p>
  239. 通过材质索引对面队列进行排序。对于复杂且有多个材质的几何体,该操作可以有效减少 draw call 从而提升性能。
  240. </p>
  241. <h3>[method:Geometry scale] ( [param:Float x], [param:Float y], [param:Float z] )</h3>
  242. <p>
  243. 缩放几何体大小。该操作通常在一次处理中完成,但不会在渲染过程中处理。<br>
  244. 使用 [page:Object3D.scale] 对模型面片进行实时缩放处理。
  245. </p>
  246. <h3>[method:JSON toJSON] ( )</h3>
  247. <p> 将 Geometry 对象数据转为 JSON 格式。</p>
  248. <h3>[method:Geometry translate] ( [param:Float x], [param:Float y], [param:Float z] )</h3>
  249. <p>
  250. 移动当前几何体。该操作通常在一次处理中完成,但不会在渲染过程中处理。<br>
  251. 使用 [page:Object3D.position] 对模型面片进行实时移动处理。
  252. </p>
  253. <h2>源代码</h2>
  254. [link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
  255. </body>
  256. </html>