Home Explore Help
Register Sign In
gitadmin
/
three.js
mirror of https://github.com/mrdoob/three.js.git
1
0
Fork 0
Files Issues 0 Wiki
Branch: renovate/jimp-1.x
Branches Tags
three.js
/
manual
/
zh
/
custom-buffergeometry.html

custom-buffergeometry.html 23 KB
Permalink History Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391 
  1. <!DOCTYPE html><html lang="zh"><head>
    2. 

  2.     <meta charset="utf-8">
    3. 

  3.     <title>自定义缓冲几何体</title>
    4. 

  4.     <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    5. 

  5.     <meta name="twitter:card" content="summary_large_image">
    6. 

  6.     <meta name="twitter:site" content="@threejs">
    7. 

  7.     <meta name="twitter:title" content="Three.js – 自定义缓冲几何体">
    8. 

  8.     <meta property="og:image" content="https://threejs.org/files/share.png">
    9. 

  9.     <link rel="shortcut icon" href="../../files/favicon_white.ico" media="(prefers-color-scheme: dark)">
    10. 

  10.     <link rel="shortcut icon" href="../../files/favicon.ico" media="(prefers-color-scheme: light)">
    11. 

  11. 

  12.     <link rel="stylesheet" href="../resources/lesson.css">
    13. 

  13.     <link rel="stylesheet" href="../resources/lang.css">
    14. 

  14. <script type="importmap">
    15. 

  15. {
    16. 

  16.   "imports": {
    17. 

  17.     "three": "../../build/three.module.js"
    18. 

  18.   }
    19. 

  19. }
    20. 

  20. </script>
    21. 

  21.     <link rel="stylesheet" href="/manual/zh/lang.css">
    22. 

  22.   </head>
    23. 

  23.   <body>
    24. 

  24.     <div class="container">
    25. 

  25.       <div class="lesson-title">
    26. 

  26.         <h1>自定义缓冲几何体</h1>
    27. 

  27.       </div>
    28. 

  28.       <div class="lesson">
    29. 

  29.         <div class="lesson-main">
    30. 

  30.           <p>在three.js中， <a href="/docs/#api/zh/core/BufferGeometry"><code class="notranslate" translate="no">BufferGeometry</code></a> 是用来代表所有几何体的一种方式。 <a href="/docs/#api/zh/core/BufferGeometry"><code class="notranslate" translate="no">BufferGeometry</code></a> 本质上是一系列 <a href="/docs/#api/zh/core/BufferAttribute"><code class="notranslate" translate="no">BufferAttribute</code></a>s 的 <em>名称</em> 。每一个 <a href="/docs/#api/zh/core/BufferAttribute"><code class="notranslate" translate="no">BufferAttribute</code></a> 代表一种类型数据的数组：位置，法线，颜色，uv，等等…… 这些合起来， <a href="/docs/#api/zh/core/BufferAttribute"><code class="notranslate" translate="no">BufferAttribute</code></a>s 代表每个顶点所有数据的 <em>并行数组</em> 。</p>
    31. 

  31. <div class="threejs_center"><img src="../resources/threejs-attributes.svg" style="width: 700px"></div>
    32. 

  32. 

  33. <p>上面提到，我们有四个属性：<code class="notranslate" translate="no">position</code>, <code class="notranslate" translate="no">normal</code>, <code class="notranslate" translate="no">color</code>, <code class="notranslate" translate="no">uv</code> 。
    34. 

  34. 它们指的是 <em>并行数组</em> ，代表每个属性的第N个数据集属于同一个顶点。index=4的顶点被高亮表示贯穿所有属性的平行数据定义一个顶点。</p>
    35. 

  35. <p>这就告诉我们，这是一个方块的数据图，高亮的地方代表一个角。</p>
    36. 

  36. <div class="threejs_center"><img src="../resources/cube-faces-vertex.svg" style="width: 500px"></div>
    37. 

  37. 

  38. <p>考虑下方块的单个角，不同的面都需要一个不同的法线。法线是面朝向的信息。在图中，在方块的角周围用箭头表示的法线，代表共用顶点位置的面需要指向不同方向的法线。</p>
    39. 

  39. <p>同理，一个角在不同的面需要不同的UVs。UVs是用来指定纹理区域中，画在相应顶点位置三角形的纹理坐标。你可以看到，绿色的面需要顶点的UV对应于F纹理的右上角，蓝色的面需要的UV对应于F纹理的左上角，红色的面需要的UV对应于F纹理的左下角。</p>
    40. 

  40. <p>一个简单的 <em>顶点</em> 是所有组成部分的集合。如果顶点需要其中任一部分变得不同，那么它必须是一个不同的顶点。</p>
    41. 

  41. <p>举一个简单的例子，让我们创建一个使用 <a href="/docs/#api/zh/core/BufferGeometry"><code class="notranslate" translate="no">BufferGeometry</code></a> 的方块。方块很有趣，因为它看起来在角的地方共用顶点但实际上不是。在我们的例子中，我们将列出所有顶点数据，然后转化成并行数组，最后用它们创建 <a href="/docs/#api/zh/core/BufferAttribute"><code class="notranslate" translate="no">BufferAttribute</code></a>s 并添加到 <a href="/docs/#api/zh/core/BufferGeometry"><code class="notranslate" translate="no">BufferGeometry</code></a> 。</p>
    42. 

  42. <p>我们从方块所需的所有数据开始。再次记住如果顶点有任何独一无二的部分，它必须是不同的顶点。像这里创建一个方块需要36个顶点，每个面2个三角形，每个三角形3个顶点，6个面=36个顶点。</p>
    43. 

  43. <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const vertices = [
    44. 

  44.   // front
    45. 

  45.   { pos: [-1, -1,  1], norm: [ 0,  0,  1], uv: [0, 0], },
    46. 

  46.   { pos: [ 1, -1,  1], norm: [ 0,  0,  1], uv: [1, 0], },
    47. 

  47.   { pos: [-1,  1,  1], norm: [ 0,  0,  1], uv: [0, 1], },
    48. 

  48. 

  49.   { pos: [-1,  1,  1], norm: [ 0,  0,  1], uv: [0, 1], },
    50. 

  50.   { pos: [ 1, -1,  1], norm: [ 0,  0,  1], uv: [1, 0], },
    51. 

  51.   { pos: [ 1,  1,  1], norm: [ 0,  0,  1], uv: [1, 1], },
    52. 

  52.   // right
    53. 

  53.   { pos: [ 1, -1,  1], norm: [ 1,  0,  0], uv: [0, 0], },
    54. 

  54.   { pos: [ 1, -1, -1], norm: [ 1,  0,  0], uv: [1, 0], },
    55. 

  55.   { pos: [ 1,  1,  1], norm: [ 1,  0,  0], uv: [0, 1], },
    56. 

  56. 

  57.   { pos: [ 1,  1,  1], norm: [ 1,  0,  0], uv: [0, 1], },
    58. 

  58.   { pos: [ 1, -1, -1], norm: [ 1,  0,  0], uv: [1, 0], },
    59. 

  59.   { pos: [ 1,  1, -1], norm: [ 1,  0,  0], uv: [1, 1], },
    60. 

  60.   // back
    61. 

  61.   { pos: [ 1, -1, -1], norm: [ 0,  0, -1], uv: [0, 0], },
    62. 

  62.   { pos: [-1, -1, -1], norm: [ 0,  0, -1], uv: [1, 0], },
    63. 

  63.   { pos: [ 1,  1, -1], norm: [ 0,  0, -1], uv: [0, 1], },
    64. 

  64. 

  65.   { pos: [ 1,  1, -1], norm: [ 0,  0, -1], uv: [0, 1], },
    66. 

  66.   { pos: [-1, -1, -1], norm: [ 0,  0, -1], uv: [1, 0], },
    67. 

  67.   { pos: [-1,  1, -1], norm: [ 0,  0, -1], uv: [1, 1], },
    68. 

  68.   // left
    69. 

  69.   { pos: [-1, -1, -1], norm: [-1,  0,  0], uv: [0, 0], },
    70. 

  70.   { pos: [-1, -1,  1], norm: [-1,  0,  0], uv: [1, 0], },
    71. 

  71.   { pos: [-1,  1, -1], norm: [-1,  0,  0], uv: [0, 1], },
    72. 

  72. 

  73.   { pos: [-1,  1, -1], norm: [-1,  0,  0], uv: [0, 1], },
    74. 

  74.   { pos: [-1, -1,  1], norm: [-1,  0,  0], uv: [1, 0], },
    75. 

  75.   { pos: [-1,  1,  1], norm: [-1,  0,  0], uv: [1, 1], },
    76. 

  76.   // top
    77. 

  77.   { pos: [ 1,  1, -1], norm: [ 0,  1,  0], uv: [0, 0], },
    78. 

  78.   { pos: [-1,  1, -1], norm: [ 0,  1,  0], uv: [1, 0], },
    79. 

  79.   { pos: [ 1,  1,  1], norm: [ 0,  1,  0], uv: [0, 1], },
    80. 

  80. 

  81.   { pos: [ 1,  1,  1], norm: [ 0,  1,  0], uv: [0, 1], },
    82. 

  82.   { pos: [-1,  1, -1], norm: [ 0,  1,  0], uv: [1, 0], },
    83. 

  83.   { pos: [-1,  1,  1], norm: [ 0,  1,  0], uv: [1, 1], },
    84. 

  84.   // bottom
    85. 

  85.   { pos: [ 1, -1,  1], norm: [ 0, -1,  0], uv: [0, 0], },
    86. 

  86.   { pos: [-1, -1,  1], norm: [ 0, -1,  0], uv: [1, 0], },
    87. 

  87.   { pos: [ 1, -1, -1], norm: [ 0, -1,  0], uv: [0, 1], },
    88. 

  88. 

  89.   { pos: [ 1, -1, -1], norm: [ 0, -1,  0], uv: [0, 1], },
    90. 

  90.   { pos: [-1, -1,  1], norm: [ 0, -1,  0], uv: [1, 0], },
    91. 

  91.   { pos: [-1, -1, -1], norm: [ 0, -1,  0], uv: [1, 1], },
    92. 

  92. ];
    93. 

  93. </pre>
    94. 

  94. <p>然后我们能将它们全部转换成3个并行数组</p>
    95. 

  95. <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const positions = [];
    96. 

  96. const normals = [];
    97. 

  97. const uvs = [];
    98. 

  98. for (const vertex of vertices) {
    99. 

  99.   positions.push(...vertex.pos);
    100. 

  100.   normals.push(...vertex.norm);
    101. 

  101.   uvs.push(...vertex.uv);
    102. 

  102. }
    103. 

  103. </pre>
    104. 

  104. <p>最终我们能创建一个 <a href="/docs/#api/zh/core/BufferGeometry"><code class="notranslate" translate="no">BufferGeometry</code></a> ，然后为每个数组创建一个 <a href="/docs/#api/zh/core/BufferAttribute"><code class="notranslate" translate="no">BufferAttribute</code></a> 并添加到 <a href="/docs/#api/zh/core/BufferGeometry"><code class="notranslate" translate="no">BufferGeometry</code></a> 。</p>
    105. 

  105. <pre class="prettyprint showlinemods notranslate lang-js" translate="no">  const geometry = new THREE.BufferGeometry();
    106. 

  106.   const positionNumComponents = 3;
    107. 

  107.   const normalNumComponents = 3;
    108. 

  108.   const uvNumComponents = 2;
    109. 

  109.   geometry.setAttribute(
    110. 

  110.       'position',
    111. 

  111.       new THREE.BufferAttribute(new Float32Array(positions), positionNumComponents));
    112. 

  112.   geometry.setAttribute(
    113. 

  113.       'normal',
    114. 

  114.       new THREE.BufferAttribute(new Float32Array(normals), normalNumComponents));
    115. 

  115.   geometry.setAttribute(
    116. 

  116.       'uv',
    117. 

  117.       new THREE.BufferAttribute(new Float32Array(uvs), uvNumComponents));
    118. 

  118. </pre>
    119. 

  119. <p>注意名字很重要。你必须将属性的名字命名成three.js所期望的(除非你正在创建自定义着色器)，在这里是 <code class="notranslate" translate="no">position</code>、 <code class="notranslate" translate="no">normal</code> 和 <code class="notranslate" translate="no">uv</code> 。如果你想要设置顶点颜色则命名属性为 <code class="notranslate" translate="no">color</code> 。</p>
    120. 

  120. <p>在上面我们创建了3个JavaScript原生数组， <code class="notranslate" translate="no">positions</code>, <code class="notranslate" translate="no">normals</code> 和 <code class="notranslate" translate="no">uvs</code> 。
    121. 

  121. 然后我们将他们转换为 <code class="notranslate" translate="no">Float32Array</code> 的类型数组<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray">TypedArrays</a>。 <a href="/docs/#api/zh/core/BufferAttribute"><code class="notranslate" translate="no">BufferAttribute</code></a> 是类型数组而不是原生数组。同时 <a href="/docs/#api/zh/core/BufferAttribute"><code class="notranslate" translate="no">BufferAttribute</code></a> 需要你设定每个顶点有多少组成成分。对于位置和法线，每个顶点我们需要3个组成成分，x、y和z。对于UVs我们需要2个，u和v。</p>
    122. 

  122. <p></p><div translate="no" class="threejs_example_container notranslate">
    123. 

  123.   <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/custom-buffergeometry-cube.html"></iframe></div>
    124. 

  124.   <a class="threejs_center" href="/manual/examples/custom-buffergeometry-cube.html" target="_blank">点击此处在新标签页中打开</a>
    125. 

  125. </div>
    126. 

  126. 

  127. <p></p>
    128. 

  128. <p>那会是大量的数据。我们可以做点改善，可以用索引来代表顶点。看回我们的方块数据，每个面由2个三角形组成，每个三角形3个顶点，总共6个，但是其中2个是完全一样的；同样的位置，同样的法线，和同样的uv。因此，我们可以移除匹配的顶点，然后用索引代表他们。首先我们移除匹配的顶点。</p>
    129. 

  129. <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const vertices = [
    130. 

  130.   // front
    131. 

  131.   { pos: [-1, -1,  1], norm: [ 0,  0,  1], uv: [0, 0], }, // 0
    132. 

  132.   { pos: [ 1, -1,  1], norm: [ 0,  0,  1], uv: [1, 0], }, // 1
    133. 

  133.   { pos: [-1,  1,  1], norm: [ 0,  0,  1], uv: [0, 1], }, // 2
    134. 

  134. -
    135. 

  135. -  { pos: [-1,  1,  1], norm: [ 0,  0,  1], uv: [0, 1], },
    136. 

  136. -  { pos: [ 1, -1,  1], norm: [ 0,  0,  1], uv: [1, 0], },
    137. 

  137.   { pos: [ 1,  1,  1], norm: [ 0,  0,  1], uv: [1, 1], }, // 3
    138. 

  138.   // right
    139. 

  139.   { pos: [ 1, -1,  1], norm: [ 1,  0,  0], uv: [0, 0], }, // 4
    140. 

  140.   { pos: [ 1, -1, -1], norm: [ 1,  0,  0], uv: [1, 0], }, // 5
    141. 

  141. -
    142. 

  142. -  { pos: [ 1,  1,  1], norm: [ 1,  0,  0], uv: [0, 1], },
    143. 

  143. -  { pos: [ 1, -1, -1], norm: [ 1,  0,  0], uv: [1, 0], },
    144. 

  144.   { pos: [ 1,  1,  1], norm: [ 1,  0,  0], uv: [0, 1], }, // 6
    145. 

  145.   { pos: [ 1,  1, -1], norm: [ 1,  0,  0], uv: [1, 1], }, // 7
    146. 

  146.   // back
    147. 

  147.   { pos: [ 1, -1, -1], norm: [ 0,  0, -1], uv: [0, 0], }, // 8
    148. 

  148.   { pos: [-1, -1, -1], norm: [ 0,  0, -1], uv: [1, 0], }, // 9
    149. 

  149. -
    150. 

  150. -  { pos: [ 1,  1, -1], norm: [ 0,  0, -1], uv: [0, 1], },
    151. 

  151. -  { pos: [-1, -1, -1], norm: [ 0,  0, -1], uv: [1, 0], },
    152. 

  152.   { pos: [ 1,  1, -1], norm: [ 0,  0, -1], uv: [0, 1], }, // 10
    153. 

  153.   { pos: [-1,  1, -1], norm: [ 0,  0, -1], uv: [1, 1], }, // 11
    154. 

  154.   // left
    155. 

  155.   { pos: [-1, -1, -1], norm: [-1,  0,  0], uv: [0, 0], }, // 12
    156. 

  156.   { pos: [-1, -1,  1], norm: [-1,  0,  0], uv: [1, 0], }, // 13
    157. 

  157. -
    158. 

  158. -  { pos: [-1,  1, -1], norm: [-1,  0,  0], uv: [0, 1], },
    159. 

  159. -  { pos: [-1, -1,  1], norm: [-1,  0,  0], uv: [1, 0], },
    160. 

  160.   { pos: [-1,  1, -1], norm: [-1,  0,  0], uv: [0, 1], }, // 14
    161. 

  161.   { pos: [-1,  1,  1], norm: [-1,  0,  0], uv: [1, 1], }, // 15
    162. 

  162.   // top
    163. 

  163.   { pos: [ 1,  1, -1], norm: [ 0,  1,  0], uv: [0, 0], }, // 16
    164. 

  164.   { pos: [-1,  1, -1], norm: [ 0,  1,  0], uv: [1, 0], }, // 17
    165. 

  165. -
    166. 

  166. -  { pos: [ 1,  1,  1], norm: [ 0,  1,  0], uv: [0, 1], },
    167. 

  167. -  { pos: [-1,  1, -1], norm: [ 0,  1,  0], uv: [1, 0], },
    168. 

  168.   { pos: [ 1,  1,  1], norm: [ 0,  1,  0], uv: [0, 1], }, // 18
    169. 

  169.   { pos: [-1,  1,  1], norm: [ 0,  1,  0], uv: [1, 1], }, // 19
    170. 

  170.   // bottom
    171. 

  171.   { pos: [ 1, -1,  1], norm: [ 0, -1,  0], uv: [0, 0], }, // 20
    172. 

  172.   { pos: [-1, -1,  1], norm: [ 0, -1,  0], uv: [1, 0], }, // 21
    173. 

  173. -
    174. 

  174. -  { pos: [ 1, -1, -1], norm: [ 0, -1,  0], uv: [0, 1], },
    175. 

  175. -  { pos: [-1, -1,  1], norm: [ 0, -1,  0], uv: [1, 0], },
    176. 

  176.   { pos: [ 1, -1, -1], norm: [ 0, -1,  0], uv: [0, 1], }, // 22
    177. 

  177.   { pos: [-1, -1, -1], norm: [ 0, -1,  0], uv: [1, 1], }, // 23
    178. 

  178. ];
    179. 

  179. </pre>
    180. 

  180. <p>现在我们有24个唯一的顶点。然后我们为36个要画的顶点设定36个索引，通过调用 <a href="/docs/#api/zh/core/BufferGeometry.setIndex"><code class="notranslate" translate="no">BufferGeometry.setIndex</code></a> 并传入索引数组来创建12个三角形。</p>
    181. 

  181. <pre class="prettyprint showlinemods notranslate lang-js" translate="no">geometry.setAttribute(
    182. 

  182.     'position',
    183. 

  183.     new THREE.BufferAttribute(positions, positionNumComponents));
    184. 

  184. geometry.setAttribute(
    185. 

  185.     'normal',
    186. 

  186.     new THREE.BufferAttribute(normals, normalNumComponents));
    187. 

  187. geometry.setAttribute(
    188. 

  188.     'uv',
    189. 

  189.     new THREE.BufferAttribute(uvs, uvNumComponents));
    190. 

  190. 

  191. +geometry.setIndex([
    192. 

  192. +   0,  1,  2,   2,  1,  3,  // front
    193. 

  193. +   4,  5,  6,   6,  5,  7,  // right
    194. 

  194. +   8,  9, 10,  10,  9, 11,  // back
    195. 

  195. +  12, 13, 14,  14, 13, 15,  // left
    196. 

  196. +  16, 17, 18,  18, 17, 19,  // top
    197. 

  197. +  20, 21, 22,  22, 21, 23,  // bottom
    198. 

  198. +]);
    199. 

  199. </pre>
    200. 

  200. <p></p><div translate="no" class="threejs_example_container notranslate">
    201. 

  201.   <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/custom-buffergeometry-cube-indexed.html"></iframe></div>
    202. 

  202.   <a class="threejs_center" href="/manual/examples/custom-buffergeometry-cube-indexed.html" target="_blank">点击此处在新标签页中打开</a>
    203. 

  203. </div>
    204. 

  204. 

  205. <p></p>
    206. 

  206. <p>如果你没有提供法线数据的话， <a href="/docs/#api/zh/core/BufferGeometry"><code class="notranslate" translate="no">BufferGeometry</code></a> 有个方法<a href="/docs/#api/zh/core/BufferGeometry#computeVertexNormals"><code class="notranslate" translate="no">computeVertexNormals</code></a>可以用来计算法线。不幸的是，因为如果顶点的其他数据不同的话，位置数据不能被共享，调用  <code class="notranslate" translate="no">computeVertexNormals</code> 会让你的几何体像球面或者圆筒一样连接自身。</p>
    207. 

  207. <div class="spread">
    208. 

  208.   <div>
    209. 

  209.     <div data-diagram="bufferGeometryCylinder"></div>
    210. 

  210.   </div>
    211. 

  211. </div>
    212. 

  212. 

  213. <p>对于上面的圆筒，法线是通过 <code class="notranslate" translate="no">computeVertexNormals</code> 方法创建的。
    214. 

  214. 如果你仔细观察会发现在圆筒上有条缝。这是因为在圆筒的开始和结束的地方没有办法共享顶点数据，需要不同的UVs，所以该方法不知道它们是同样的顶点以平滑过度。只要知道一点，解决方法是应用自己的法线数据。</p>
    215. 

  215. <p>我们同样可以在一开始使用类型数组<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray">TypedArrays</a>取代JavaScript的原生数组。
    216. 

  216. 缺点是你必须在一开始定义数组的大小。当然那不是很难，但是使用原生数组我们只需要用 <code class="notranslate" translate="no">push</code> 将数据加入数组并最后通过 <code class="notranslate" translate="no">length</code> 查看数组大小。使用类型数组我们没有这样的方法，所以需要记录添加的数据。</p>
    217. 

  217. <p>在这个例子，提前计算数组长度很简单，因为我们一开始使用一大块静态数据。</p>
    218. 

  218. <pre class="prettyprint showlinemods notranslate lang-js" translate="no">-const positions = [];
    219. 

  219. -const normals = [];
    220. 

  220. -const uvs = [];
    221. 

  221. +const numVertices = vertices.length;
    222. 

  222. +const positionNumComponents = 3;
    223. 

  223. +const normalNumComponents = 3;
    224. 

  224. +const uvNumComponents = 2;
    225. 

  225. +const positions = new Float32Array(numVertices * positionNumComponents);
    226. 

  226. +const normals = new Float32Array(numVertices * normalNumComponents);
    227. 

  227. +const uvs = new Float32Array(numVertices * uvNumComponents);
    228. 

  228. +let posNdx = 0;
    229. 

  229. +let nrmNdx = 0;
    230. 

  230. +let uvNdx = 0;
    231. 

  231. for (const vertex of vertices) {
    232. 

  232. -  positions.push(...vertex.pos);
    233. 

  233. -  normals.push(...vertex.norm);
    234. 

  234. -  uvs.push(...vertex.uv);
    235. 

  235. +  positions.set(vertex.pos, posNdx);
    236. 

  236. +  normals.set(vertex.norm, nrmNdx);
    237. 

  237. +  uvs.set(vertex.uv, uvNdx);
    238. 

  238. +  posNdx += positionNumComponents;
    239. 

  239. +  nrmNdx += normalNumComponents;
    240. 

  240. +  uvNdx += uvNumComponents;
    241. 

  241. }
    242. 

  242. 

  243. geometry.setAttribute(
    244. 

  244.     'position',
    245. 

  245. -    new THREE.BufferAttribute(new Float32Array(positions), positionNumComponents));
    246. 

  246. +    new THREE.BufferAttribute(positions, positionNumComponents));
    247. 

  247. geometry.setAttribute(
    248. 

  248.     'normal',
    249. 

  249. -    new THREE.BufferAttribute(new Float32Array(normals), normalNumComponents));
    250. 

  250. +    new THREE.BufferAttribute(normals, normalNumComponents));
    251. 

  251. geometry.setAttribute(
    252. 

  252.     'uv',
    253. 

  253. -    new THREE.BufferAttribute(new Float32Array(uvs), uvNumComponents));
    254. 

  254. +    new THREE.BufferAttribute(uvs, uvNumComponents));
    255. 

  255. 

  256. geometry.setIndex([
    257. 

  257.    0,  1,  2,   2,  1,  3,  // front
    258. 

  258.    4,  5,  6,   6,  5,  7,  // right
    259. 

  259.    8,  9, 10,  10,  9, 11,  // back
    260. 

  260.   12, 13, 14,  14, 13, 15,  // left
    261. 

  261.   16, 17, 18,  18, 17, 19,  // top
    262. 

  262.   20, 21, 22,  22, 21, 23,  // bottom
    263. 

  263. ]);
    264. 

  264. </pre>
    265. 

  265. <p></p><div translate="no" class="threejs_example_container notranslate">
    266. 

  266.   <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/custom-buffergeometry-cube-typedarrays.html"></iframe></div>
    267. 

  267.   <a class="threejs_center" href="/manual/examples/custom-buffergeometry-cube-typedarrays.html" target="_blank">点击此处在新标签页中打开</a>
    268. 

  268. </div>
    269. 

  269. 

  270. <p></p>
    271. 

  271. <p>一个使用类型数组的好理由，是如果你想动态更新顶点数据的任何一部分。</p>
    272. 

  272. <p>因为想不起动态更新顶点数据的好例子，所以我决定创建一个球面并从中央开始进进出出地移动每个四边形。但愿它是个有用的例子。</p>
    273. 

  273. <p>这里是用来产生球面的位置和索引数据的代码。代码共享了四边形内的顶点数据，但是四边形之间的没有共享，因为我们需要分别地移动每个四边形。</p>
    274. 

  274. <p>因为我懒，所以我通过3个 <a href="/docs/#api/zh/core/Object3D"><code class="notranslate" translate="no">Object3D</code></a> 对象的层级关系，计算球面的点。关于如何计算在这篇文章有解释<a href="optimize-lots-of-objects.html">the article on optimizing lots of objects</a>。</p>
    275. 

  275. <pre class="prettyprint showlinemods notranslate lang-js" translate="no">function makeSpherePositions(segmentsAround, segmentsDown) {
    276. 

  276.   const numVertices = segmentsAround * segmentsDown * 6;
    277. 

  277.   const numComponents = 3;
    278. 

  278.   const positions = new Float32Array(numVertices * numComponents);
    279. 

  279.   const indices = [];
    280. 

  280. 

  281.   const longHelper = new THREE.Object3D();
    282. 

  282.   const latHelper = new THREE.Object3D();
    283. 

  283.   const pointHelper = new THREE.Object3D();
    284. 

  284.   longHelper.add(latHelper);
    285. 

  285.   latHelper.add(pointHelper);
    286. 

  286.   pointHelper.position.z = 1;
    287. 

  287.   const temp = new THREE.Vector3();
    288. 

  288. 

  289.   function getPoint(lat, long) {
    290. 

  290.     latHelper.rotation.x = lat;
    291. 

  291.     longHelper.rotation.y = long;
    292. 

  292.     longHelper.updateMatrixWorld(true);
    293. 

  293.     return pointHelper.getWorldPosition(temp).toArray();
    294. 

  294.   }
    295. 

  295. 

  296.   let posNdx = 0;
    297. 

  297.   let ndx = 0;
    298. 

  298.   for (let down = 0; down &lt; segmentsDown; ++down) {
    299. 

  299.     const v0 = down / segmentsDown;
    300. 

  300.     const v1 = (down + 1) / segmentsDown;
    301. 

  301.     const lat0 = (v0 - 0.5) * Math.PI;
    302. 

  302.     const lat1 = (v1 - 0.5) * Math.PI;
    303. 

  303. 

  304.     for (let across = 0; across &lt; segmentsAround; ++across) {
    305. 

  305.       const u0 = across / segmentsAround;
    306. 

  306.       const u1 = (across + 1) / segmentsAround;
    307. 

  307.       const long0 = u0 * Math.PI * 2;
    308. 

  308.       const long1 = u1 * Math.PI * 2;
    309. 

  309. 

  310.       positions.set(getPoint(lat0, long0), posNdx);  posNdx += numComponents;
    311. 

  311.       positions.set(getPoint(lat1, long0), posNdx);  posNdx += numComponents;
    312. 

  312.       positions.set(getPoint(lat0, long1), posNdx);  posNdx += numComponents;
    313. 

  313.       positions.set(getPoint(lat1, long1), posNdx);  posNdx += numComponents;
    314. 

  314. 

  315.       indices.push(
    316. 

  316.         ndx, ndx + 1, ndx + 2,
    317. 

  317.         ndx + 2, ndx + 1, ndx + 3,
    318. 

  318.       );
    319. 

  319.       ndx += 4;
    320. 

  320.     }
    321. 

  321.   }
    322. 

  322.   return {positions, indices};
    323. 

  323. }
    324. 

  324. </pre>
    325. 

  325. <p>然后我们像这样调用。</p>
    326. 

  326. <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const segmentsAround = 24;
    327. 

  327. const segmentsDown = 16;
    328. 

  328. const {positions, indices} = makeSpherePositions(segmentsAround, segmentsDown);
    329. 

  329. </pre>
    330. 

  330. <p>因为返回的位置数据是单位球面位置，所以它们跟我们需要的法线数据完全一样，我们只需要复制它们。</p>
    331. 

  331. <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const normals = positions.slice();
    332. 

  332. </pre>
    333. 

  333. <p>然后我们像之前一样设置属性</p>
    334. 

  334. <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const geometry = new THREE.BufferGeometry();
    335. 

  335. const positionNumComponents = 3;
    336. 

  336. const normalNumComponents = 3;
    337. 

  337. 

  338. +const positionAttribute = new THREE.BufferAttribute(positions, positionNumComponents);
    339. 

  339. +positionAttribute.setUsage(THREE.DynamicDrawUsage);
    340. 

  340. geometry.setAttribute(
    341. 

  341.     'position',
    342. 

  342. +    positionAttribute);
    343. 

  343. geometry.setAttribute(
    344. 

  344.     'normal',
    345. 

  345.     new THREE.BufferAttribute(normals, normalNumComponents));
    346. 

  346. geometry.setIndex(indices);
    347. 

  347. </pre>
    348. 

  348. <p>我已经高亮一些区别。我们保存了位置属性的引用。
    349. 

  349. 同时我们标记它为动态。这是提示THREE.js我们将会经常改变属性的内容。</p>
    350. 

  350. <p>在我们的渲染循环中，每一帧我们基于它们的法线更新位置</p>
    351. 

  351. <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const temp = new THREE.Vector3();
    352. 

  352. 

  353. ...
    354. 

  354. 

  355. for (let i = 0; i &lt; positions.length; i += 3) {
    356. 

  356.   const quad = (i / 12 | 0);
    357. 

  357.   const ringId = quad / segmentsAround | 0;
    358. 

  358.   const ringQuadId = quad % segmentsAround;
    359. 

  359.   const ringU = ringQuadId / segmentsAround;
    360. 

  360.   const angle = ringU * Math.PI * 2;
    361. 

  361.   temp.fromArray(normals, i);
    362. 

  362.   temp.multiplyScalar(THREE.MathUtils.lerp(1, 1.4, Math.sin(time + ringId + angle) * .5 + .5));
    363. 

  363.   temp.toArray(positions, i);
    364. 

  364. }
    365. 

  365. positionAttribute.needsUpdate = true;
    366. 

  366. </pre>
    367. 

  367. <p>我们设置 <code class="notranslate" translate="no">positionAttribute.needsUpdate</code> 告诉THREE.js更新我们的改变。</p>
    368. 

  368. <p></p><div translate="no" class="threejs_example_container notranslate">
    369. 

  369.   <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/custom-buffergeometry-dynamic.html"></iframe></div>
    370. 

  370.   <a class="threejs_center" href="/manual/examples/custom-buffergeometry-dynamic.html" target="_blank">点击此处在新标签页中打开</a>
    371. 

  371. </div>
    372. 

  372. 

  373. <p></p>
    374. 

  374. <p>我希望这些例子能对如何使用 <a href="/docs/#api/zh/core/BufferGeometry"><code class="notranslate" translate="no">BufferGeometry</code></a> 直接创建你自己的几何体和如何动态更新 <a href="/docs/#api/zh/core/BufferAttribute"><code class="notranslate" translate="no">BufferAttribute</code></a> 的内容发挥作用。</p>
    375. 

  375. <!-- needed in English only to prevent warning from outdated translations -->
    376. 

  376. <p><a href="resources/threejs-geometry.svg"></a></p>
    377. 

  377. <p><canvas id="c"></canvas></p>
    378. 

  378. <script type="module" src="../resources/threejs-custom-buffergeometry.js"></script>
    379. 

  379. 

  380. 

  381.         </div>
    382. 

  382.       </div>
    383. 

  383.     </div>
    384. 

  384. 

  385.   <script src="../resources/prettify.js"></script>
    386. 

  386.   <script src="../resources/lesson.js"></script>
    387. 

  387. 

  388. 

  389. 

  390. 

  391. </body></html>
    392.