Geometry.html 14 KB

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