Domovská stránka Prehľadávať Pomoc
Registrovať Prihlásiť sa
samien
/
three.js
zrkadlo https://github.com/mrdoob/three.js.git
1
0
Fork 0
Súbory Issues 0 Wiki
Strom: 28e2425652
Branche Tagy
three.js
/
manual
/
fr
/
custom-buffergeometry.html

custom-buffergeometry.html 25 KB
História Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447 
  1. <!DOCTYPE html><html lang="fr"><head>
    2. 

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

  3.     <title>BufferGeometry Personnalisée</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 – BufferGeometry Personnalisée">
    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.   </head>
    22. 

  22.   <body>
    23. 

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

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

  25.         <h1>BufferGeometry Personnalisée</h1>
    26. 

  26.       </div>
    27. 

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

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

  29.           <p><a href="/docs/#api/en/core/BufferGeometry"><code class="notranslate" translate="no">BufferGeometry</code></a> est la manière dont three.js représente toute la géométrie. Une <a href="/docs/#api/en/core/BufferGeometry"><code class="notranslate" translate="no">BufferGeometry</code></a>
    30. 

  30. est essentiellement une collection <em>nommée</em> de <a href="/docs/#api/en/core/BufferAttribute"><code class="notranslate" translate="no">BufferAttribute</code></a>s.
    31. 

  31. Chaque <a href="/docs/#api/en/core/BufferAttribute"><code class="notranslate" translate="no">BufferAttribute</code></a> représente un tableau d'un type de données : positions,
    32. 

  32. normales, couleurs, uv, etc... Ensemble, les <a href="/docs/#api/en/core/BufferAttribute"><code class="notranslate" translate="no">BufferAttribute</code></a>s nommées représentent
    33. 

  33. des <em>tableaux parallèles</em> de toutes les données pour chaque sommet.</p>
    34. 

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

  35. 

  36. <p>Ci-dessus, vous pouvez voir que nous avons 4 attributs : <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>.
    37. 

  37. Ils représentent des <em>tableaux parallèles</em>, ce qui signifie que le N-ième ensemble de données de chaque
    38. 

  38. attribut appartient au même sommet. Le sommet à l'index = 4 est mis en évidence
    39. 

  39. pour montrer que les données parallèles à travers tous les attributs définissent un seul sommet.</p>
    40. 

  40. <p>Cela soulève un point, voici un diagramme d'un cube avec un coin mis en évidence.</p>
    41. 

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

  42. 

  43. <p>En y réfléchissant, ce coin unique nécessite une normale différente pour chaque face du
    44. 

  44. cube. Une normale est une information sur la direction vers laquelle quelque chose fait face. Dans le diagramme,
    45. 

  45. les normales sont représentées par les flèches autour du sommet d'angle, montrant que chaque
    46. 

  46. face qui partage cette position de sommet a besoin d'une normale qui pointe dans une direction différente.</p>
    47. 

  47. <p>Ce coin a également besoin d'UV différents pour chaque face. Les UV sont des coordonnées de texture
    48. 

  48. qui spécifient quelle partie d'une texture dessinée sur un triangle correspond à cette
    49. 

  49. position de sommet. Vous pouvez voir que la face verte a besoin que ce sommet ait une UV qui corresponde
    50. 

  50. au coin supérieur droit de la texture F, la face bleue a besoin d'une UV qui corresponde au
    51. 

  51. coin supérieur gauche de la texture F, et la face rouge a besoin d'une UV qui corresponde au coin
    52. 

  52. inférieur gauche de la texture F.</p>
    53. 

  53. <p>Un seul <em>sommet</em> est la combinaison de toutes ses parties. Si un sommet a besoin d'une
    54. 

  54. partie différente, alors il doit s'agir d'un sommet différent.</p>
    55. 

  55. <p>Comme exemple simple, créons un cube en utilisant <a href="/docs/#api/en/core/BufferGeometry"><code class="notranslate" translate="no">BufferGeometry</code></a>. Un cube est intéressant
    56. 

  56. car il semble partager des sommets aux coins mais ce n'est pas le cas en réalité. Pour notre exemple, nous allons lister tous les sommets avec toutes leurs données,
    57. 

  57. puis convertir ces données en tableaux parallèles et enfin les utiliser pour créer des
    58. 

  58. <a href="/docs/#api/en/core/BufferAttribute"><code class="notranslate" translate="no">BufferAttribute</code></a>s et les ajouter à une <a href="/docs/#api/en/core/BufferGeometry"><code class="notranslate" translate="no">BufferGeometry</code></a>.</p>
    59. 

  59. <p>Nous commençons par une liste de toutes les données nécessaires pour le cube. Rappelez-vous encore une fois
    60. 

  60. que si un sommet a des parties uniques, il doit s'agir d'un sommet distinct. En conséquence,
    61. 

  61. pour faire un cube, il faut 36 sommets. 2 triangles par face, 3 sommets par triangle,
    62. 

  62. 6 faces = 36 sommets.</p>
    63. 

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

  64.   // avant
    65. 

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

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

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

  68. 

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

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

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

  72.   // droite
    73. 

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

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

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

  76. 

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

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

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

  80.   // arrière
    81. 

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

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

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

  84. 

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

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

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

  88.   // gauche
    89. 

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

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

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

  92. 

  93.   { pos: [-1,  1, -1], norm: [-1,  0,  0], uv: [0, 1], },
    94. 

  94.   { pos: [-1, -1,  1], norm: [-1,  0,  0], uv: [1, 0], },
    95. 

  95.   { pos: [-1,  1,  1], norm: [-1,  0,  0], uv: [1, 1], },
    96. 

  96.   // haut
    97. 

  97.   { pos: [ 1,  1, -1], norm: [ 0,  1,  0], uv: [0, 0], },
    98. 

  98.   { pos: [-1,  1, -1], norm: [ 0,  1,  0], uv: [1, 0], },
    99. 

  99.   { pos: [ 1,  1,  1], norm: [ 0,  1,  0], uv: [0, 1], },
    100. 

  100. 

  101.   { pos: [ 1,  1,  1], norm: [ 0,  1,  0], uv: [0, 1], },
    102. 

  102.   { pos: [-1,  1, -1], norm: [ 0,  1,  0], uv: [1, 0], },
    103. 

  103.   { pos: [-1,  1,  1], norm: [ 0,  1,  0], uv: [1, 1], },
    104. 

  104.   // bas
    105. 

  105.   { pos: [ 1, -1,  1], norm: [ 0, -1,  0], uv: [0, 0], },
    106. 

  106.   { pos: [-1, -1,  1], norm: [ 0, -1,  0], uv: [1, 0], },
    107. 

  107.   { pos: [ 1, -1, -1], norm: [ 0, -1,  0], uv: [0, 1], },
    108. 

  108. 

  109.   { pos: [ 1, -1, -1], norm: [ 0, -1,  0], uv: [0, 1], },
    110. 

  110.   { pos: [-1, -1,  1], norm: [ 0, -1,  0], uv: [1, 0], },
    111. 

  111.   { pos: [-1, -1, -1], norm: [ 0, -1,  0], uv: [1, 1], },
    112. 

  112. ];
    113. 

  113. </pre>
    114. 

  114. <p>Nous pouvons ensuite traduire tout cela en 3 tableaux parallèles</p>
    115. 

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

  116. const normals = [];
    117. 

  117. const uvs = [];
    118. 

  118. for (const vertex of vertices) {
    119. 

  119.   positions.push(...vertex.pos);
    120. 

  120.   normals.push(...vertex.norm);
    121. 

  121.   uvs.push(...vertex.uv);
    122. 

  122. }
    123. 

  123. </pre>
    124. 

  124. <p>Enfin, nous pouvons créer une <a href="/docs/#api/en/core/BufferGeometry"><code class="notranslate" translate="no">BufferGeometry</code></a>, puis une <a href="/docs/#api/en/core/BufferAttribute"><code class="notranslate" translate="no">BufferAttribute</code></a> pour chaque tableau
    125. 

  125. et l'ajouter à la <a href="/docs/#api/en/core/BufferGeometry"><code class="notranslate" translate="no">BufferGeometry</code></a>.</p>
    126. 

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

  127.   const positionNumComponents = 3;
    128. 

  128.   const normalNumComponents = 3;
    129. 

  129.   const uvNumComponents = 2;
    130. 

  130.   geometry.setAttribute(
    131. 

  131.       'position',
    132. 

  132.       new THREE.BufferAttribute(new Float32Array(positions), positionNumComponents));
    133. 

  133.   geometry.setAttribute(
    134. 

  134.       'normal',
    135. 

  135.       new THREE.BufferAttribute(new Float32Array(normals), normalNumComponents));
    136. 

  136.   geometry.setAttribute(
    137. 

  137.       'uv',
    138. 

  138.       new THREE.BufferAttribute(new Float32Array(uvs), uvNumComponents));
    139. 

  139. </pre>
    140. 

  140. <p>Notez que les noms sont importants. Vous devez nommer vos attributs avec les noms
    141. 

  141. que three.js attend (sauf si vous créez un shader personnalisé).
    142. 

  142. Dans ce cas : <code class="notranslate" translate="no">position</code>, <code class="notranslate" translate="no">normal</code>, et <code class="notranslate" translate="no">uv</code>. Si vous voulez des couleurs de sommet,
    143. 

  143. nommez votre attribut <code class="notranslate" translate="no">color</code>.</p>
    144. 

  144. <p>Ci-dessus, nous avons créé 3 tableaux natifs JavaScript, <code class="notranslate" translate="no">positions</code>, <code class="notranslate" translate="no">normals</code> et <code class="notranslate" translate="no">uvs</code>.
    145. 

  145. Nous les avons ensuite convertis en
    146. 

  146. <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray">TypedArrays</a>
    147. 

  147. de type <code class="notranslate" translate="no">Float32Array</code>. Une <a href="/docs/#api/en/core/BufferAttribute"><code class="notranslate" translate="no">BufferAttribute</code></a> nécessite un TypedArray, pas un tableau natif.
    148. 

  148. Une <a href="/docs/#api/en/core/BufferAttribute"><code class="notranslate" translate="no">BufferAttribute</code></a> exige également que vous lui indiquiez combien de composants il y a
    149. 

  149. par sommet. Pour les positions et les normales, nous avons 3 composants par sommet,
    150. 

  150. x, y et z. Pour les UV, nous en avons 2, u et v.</p>
    151. 

  151. <p></p><div translate="no" class="threejs_example_container notranslate">
    152. 

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

  153.   <a class="threejs_center" href="/manual/examples/custom-buffergeometry-cube.html" target="_blank">cliquez ici pour ouvrir dans une fenêtre séparée</a>
    154. 

  154. </div>
    155. 

  155. 

  156. <p></p>
    157. 

  157. <p>C'est beaucoup de données. Une petite chose que nous pouvons faire est d'utiliser des indices pour référencer
    158. 

  158. les sommets. En revenant à nos données de cube, chaque face est composée de 2 triangles
    159. 

  159. avec 3 sommets chacun, soit 6 sommets au total, mais 2 de ces sommets sont exactement les mêmes ;
    160. 

  160. La même position, la même normale et la même uv.
    161. 

  161. Nous pouvons donc supprimer les sommets correspondants et les
    162. 

  162. référencer par index. Nous commençons par supprimer les sommets correspondants.</p>
    163. 

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

  164.   // avant
    165. 

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

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

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

  168. -
    169. 

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

  170. -  { pos: [ 1, -1,  1], norm: [ 0,  0,  1], uv: [1, 0], },
    171. 

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

  172.   // droite
    173. 

  173.   { pos: [ 1, -1,  1], norm: [ 1,  0,  0], uv: [0, 0], }, // 4
    174. 

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

  175. -
    176. 

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

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

  178.   { pos: [ 1,  1,  1], norm: [ 1,  0,  0], uv: [0, 1], }, // 6
    179. 

  179.   { pos: [ 1,  1, -1], norm: [ 1,  0,  0], uv: [1, 1], }, // 7
    180. 

  180.   // arrière
    181. 

  181.   { pos: [ 1, -1, -1], norm: [ 0,  0, -1], uv: [0, 0], }, // 8
    182. 

  182.   { pos: [-1, -1, -1], norm: [ 0,  0, -1], uv: [1, 0], }, // 9
    183. 

  183. -
    184. 

  184. -  { pos: [ 1,  1, -1], norm: [ 0,  0, -1], uv: [0, 1], },
    185. 

  185. -  { pos: [-1, -1, -1], norm: [ 0,  0, -1], uv: [1, 0], },
    186. 

  186.   { pos: [ 1,  1, -1], norm: [ 0,  0, -1], uv: [0, 1], }, // 10
    187. 

  187.   { pos: [-1,  1, -1], norm: [ 0,  0, -1], uv: [1, 1], }, // 11
    188. 

  188.   // gauche
    189. 

  189.   { pos: [-1, -1, -1], norm: [-1,  0,  0], uv: [0, 0], }, // 12
    190. 

  190.   { pos: [-1, -1,  1], norm: [-1,  0,  0], uv: [1, 0], }, // 13
    191. 

  191. -
    192. 

  192. -  { pos: [-1,  1, -1], norm: [-1,  0,  0], uv: [0, 1], },
    193. 

  193. -  { pos: [-1, -1,  1], norm: [-1,  0,  0], uv: [1, 0], },
    194. 

  194.   { pos: [-1,  1, -1], norm: [-1,  0,  0], uv: [0, 1], }, // 14
    195. 

  195.   { pos: [-1,  1,  1], norm: [-1,  0,  0], uv: [1, 1], }, // 15
    196. 

  196.   // haut
    197. 

  197.   { pos: [ 1,  1, -1], norm: [ 0,  1,  0], uv: [0, 0], }, // 16
    198. 

  198.   { pos: [-1,  1, -1], norm: [ 0,  1,  0], uv: [1, 0], }, // 17
    199. 

  199. -
    200. 

  200. -  { pos: [ 1,  1,  1], norm: [ 0,  1,  0], uv: [0, 1], },
    201. 

  201. -  { pos: [-1,  1, -1], norm: [ 0,  1,  0], uv: [1, 0], },
    202. 

  202.   { pos: [ 1,  1,  1], norm: [ 0,  1,  0], uv: [0, 1], }, // 18
    203. 

  203.   { pos: [-1,  1,  1], norm: [ 0,  1,  0], uv: [1, 1], }, // 19
    204. 

  204.   // bas
    205. 

  205.   { pos: [ 1, -1,  1], norm: [ 0, -1,  0], uv: [0, 0], }, // 20
    206. 

  206.   { pos: [-1, -1,  1], norm: [ 0, -1,  0], uv: [1, 0], }, // 21
    207. 

  207. -
    208. 

  208. -  { pos: [ 1, -1, -1], norm: [ 0, -1,  0], uv: [0, 1], },
    209. 

  209. -  { pos: [-1, -1,  1], norm: [ 0, -1,  0], uv: [1, 0], },
    210. 

  210.   { pos: [ 1, -1, -1], norm: [ 0, -1,  0], uv: [0, 1], }, // 22
    211. 

  211.   { pos: [-1, -1, -1], norm: [ 0, -1,  0], uv: [1, 1], }, // 23
    212. 

  212. ];
    213. 

  213. </pre>
    214. 

  214. <p>Nous avons donc maintenant 24 sommets uniques. Ensuite, nous spécifions 36 indices
    215. 

  215. pour les 36 sommets que nous devons dessiner pour faire 12 triangles en appelant <a href="/docs/#api/en/core/BufferGeometry.setIndex"><code class="notranslate" translate="no">BufferGeometry.setIndex</code></a> avec un tableau d'indices.</p>
    216. 

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

  217.     'position',
    218. 

  218.     new THREE.BufferAttribute(positions, positionNumComponents));
    219. 

  219. geometry.setAttribute(
    220. 

  220.     'normal',
    221. 

  221.     new THREE.BufferAttribute(normals, normalNumComponents));
    222. 

  222. geometry.setAttribute(
    223. 

  223.     'uv',
    224. 

  224.     new THREE.BufferAttribute(uvs, uvNumComponents));
    225. 

  225. 

  226. +geometry.setIndex([
    227. 

  227. +   0,  1,  2,   2,  1,  3,  // avant
    228. 

  228. +   4,  5,  6,   6,  5,  7,  // droite
    229. 

  229. +   8,  9, 10,  10,  9, 11,  // arrière
    230. 

  230. +  12, 13, 14,  14, 13, 15,  // gauche
    231. 

  231. +  16, 17, 18,  18, 17, 19,  // haut
    232. 

  232. +  20, 21, 22,  22, 21, 23,  // bas
    233. 

  233. +]);
    234. 

  234. </pre>
    235. 

  235. <p></p><div translate="no" class="threejs_example_container notranslate">
    236. 

  236.   <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>
    237. 

  237.   <a class="threejs_center" href="/manual/examples/custom-buffergeometry-cube-indexed.html" target="_blank">cliquez ici pour ouvrir dans une fenêtre séparée</a>
    238. 

  238. </div>
    239. 

  239. 

  240. <p></p>
    241. 

  241. <p><a href="/docs/#api/en/core/BufferGeometry"><code class="notranslate" translate="no">BufferGeometry</code></a> a une méthode <a href="/docs/#api/en/core/BufferGeometry#computeVertexNormals"><code class="notranslate" translate="no">computeVertexNormals</code></a> pour calculer les normales si vous
    242. 

  242. ne les fournissez pas. Malheureusement,
    243. 

  243. étant donné que les positions ne peuvent pas être partagées si une autre partie d'un sommet est différente,
    244. 

  244. les résultats de l'appel à <code class="notranslate" translate="no">computeVertexNormals</code> généreront des coutures si votre
    245. 

  245. géométrie est censée se connecter à elle-même comme une sphère ou un cylindre.</p>
    246. 

  246. <div class="spread">
    247. 

  247.   <div>
    248. 

  248.     <div data-diagram="bufferGeometryCylinder"></div>
    249. 

  249.   </div>
    250. 

  250. </div>
    251. 

  251. 

  252. <p>Pour le cylindre ci-dessus, les normales ont été créées à l'aide de <code class="notranslate" translate="no">computeVertexNormals</code>.
    253. 

  253. Si vous regardez attentivement, il y a une couture sur le cylindre. Cela est dû au fait qu'il
    254. 

  254. n'y a aucun moyen de partager les sommets au début et à la fin du cylindre, car ils
    255. 

  255. nécessitent des UV différents, de sorte que la fonction pour les calculer n'a aucune idée qu'il
    256. 

  256. s'agit des mêmes sommets à lisser. Juste une petite chose dont il faut être conscient.
    257. 

  257. La solution est de fournir vos propres normales.</p>
    258. 

  258. <p>Nous pouvons également utiliser des <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray">TypedArrays</a> dès le début au lieu de tableaux JavaScript natifs.
    259. 

  259. L'inconvénient des TypedArrays est que vous devez spécifier leur taille à l'avance. Bien sûr,
    260. 

  260. ce n'est pas une si grande contrainte, mais avec les tableaux natifs, nous pouvons simplement
    261. 

  261. <code class="notranslate" translate="no">push</code> des valeurs et voir la taille finale en vérifiant leur
    262. 

  262. <code class="notranslate" translate="no">length</code> à la fin. Avec les TypedArrays, il n'y a pas de fonction push, nous devons donc
    263. 

  263. faire notre propre gestion des données lorsque nous y ajoutons des valeurs.</p>
    264. 

  264. <p>Dans cet exemple, connaître la longueur à l'avance est assez facile, car nous utilisons
    265. 

  265. un grand bloc de données statiques pour commencer.</p>
    266. 

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

  267. -const normals = [];
    268. 

  268. -const uvs = [];
    269. 

  269. +const numVertices = vertices.length;
    270. 

  270. +const positionNumComponents = 3;
    271. 

  271. +const normalNumComponents = 3;
    272. 

  272. +const uvNumComponents = 2;
    273. 

  273. +const positions = new Float32Array(numVertices * positionNumComponents);
    274. 

  274. +const normals = new Float32Array(numVertices * normalNumComponents);
    275. 

  275. +const uvs = new Float32Array(numVertices * uvNumComponents);
    276. 

  276. +let posNdx = 0;
    277. 

  277. +let nrmNdx = 0;
    278. 

  278. +let uvNdx = 0;
    279. 

  279. for (const vertex of vertices) {
    280. 

  280. -  positions.push(...vertex.pos);
    281. 

  281. -  normals.push(...vertex.norm);
    282. 

  282. -  uvs.push(...vertex.uv);
    283. 

  283. +  positions.set(vertex.pos, posNdx);
    284. 

  284. +  normals.set(vertex.norm, nrmNdx);
    285. 

  285. +  uvs.set(vertex.uv, uvNdx);
    286. 

  286. +  posNdx += positionNumComponents;
    287. 

  287. +  nrmNdx += normalNumComponents;
    288. 

  288. +  uvNdx += uvNumComponents;
    289. 

  289. }
    290. 

  290. 

  291. geometry.setAttribute(
    292. 

  292.     'position',
    293. 

  293. -    new THREE.BufferAttribute(new Float32Array(positions), positionNumComponents));
    294. 

  294. +    new THREE.BufferAttribute(positions, positionNumComponents));
    295. 

  295. geometry.setAttribute(
    296. 

  296.     'normal',
    297. 

  297. -    new THREE.BufferAttribute(new Float32Array(normals), normalNumComponents));
    298. 

  298. +    new THREE.BufferAttribute(normals, normalNumComponents));
    299. 

  299. geometry.setAttribute(
    300. 

  300.     'uv',
    301. 

  301. -    new THREE.BufferAttribute(new Float32Array(uvs), uvNumComponents));
    302. 

  302. +    new THREE.BufferAttribute(uvs, uvNumComponents));
    303. 

  303. 

  304. geometry.setIndex([
    305. 

  305.    0,  1,  2,   2,  1,  3,  // avant
    306. 

  306.    4,  5,  6,   6,  5,  7,  // droite
    307. 

  307.    8,  9, 10,  10,  9, 11,  // arrière
    308. 

  308.   12, 13, 14,  14, 13, 15,  // gauche
    309. 

  309.   16, 17, 18,  18, 17, 19,  // haut
    310. 

  310.   20, 21, 22,  22, 21, 23,  // bas
    311. 

  311. ]);
    312. 

  312. </pre>
    313. 

  313. <p></p><div translate="no" class="threejs_example_container notranslate">
    314. 

  314.   <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>
    315. 

  315.   <a class="threejs_center" href="/manual/examples/custom-buffergeometry-cube-typedarrays.html" target="_blank">cliquez ici pour ouvrir dans une fenêtre séparée</a>
    316. 

  316. </div>
    317. 

  317. 

  318. <p></p>
    319. 

  319. <p>Une bonne raison d'utiliser des typedarrays est si vous souhaitez mettre à jour dynamiquement une partie
    320. 

  320. des sommets.</p>
    321. 

  321. <p>Je n'ai pas pu trouver un très bon exemple de mise à jour dynamique des sommets, alors j'ai décidé de faire une sphère et de déplacer chaque quadricône vers l'intérieur et l'extérieur depuis le centre. J'espère que c'est un exemple utile.</p>
    322. 

  322. <p>Voici le code pour générer les positions et les indices d'une sphère. Le code
    323. 

  323. partage les sommets au sein d'un quadricône, mais ne partage pas les sommets entre
    324. 

  324. les quadricônes, car nous voulons pouvoir déplacer chaque quadricône séparément.</p>
    325. 

  325. <p>Comme je suis paresseux, j'ai utilisé une petite hiérarchie de 3 objets <a href="/docs/#api/en/core/Object3D"><code class="notranslate" translate="no">Object3D</code></a> pour calculer
    326. 

  326. les points de la sphère. La façon dont cela fonctionne est expliquée dans <a href="optimize-lots-of-objects.html">l'article sur l'optimisation de nombreux objets</a>.</p>
    327. 

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

  328.   const numVertices = segmentsAround * segmentsDown * 6;
    329. 

  329.   const numComponents = 3;
    330. 

  330.   const positions = new Float32Array(numVertices * numComponents);
    331. 

  331.   const indices = [];
    332. 

  332. 

  333.   const longHelper = new THREE.Object3D();
    334. 

  334.   const latHelper = new THREE.Object3D();
    335. 

  335.   const pointHelper = new THREE.Object3D();
    336. 

  336.   longHelper.add(latHelper);
    337. 

  337.   latHelper.add(pointHelper);
    338. 

  338.   pointHelper.position.z = 1;
    339. 

  339.   const temp = new THREE.Vector3();
    340. 

  340. 

  341.   function getPoint(lat, long) {
    342. 

  342.     latHelper.rotation.x = lat;
    343. 

  343.     longHelper.rotation.y = long;
    344. 

  344.     longHelper.updateMatrixWorld(true);
    345. 

  345.     return pointHelper.getWorldPosition(temp).toArray();
    346. 

  346.   }
    347. 

  347. 

  348.   let posNdx = 0;
    349. 

  349.   let ndx = 0;
    350. 

  350.   for (let down = 0; down &lt; segmentsDown; ++down) {
    351. 

  351.     const v0 = down / segmentsDown;
    352. 

  352.     const v1 = (down + 1) / segmentsDown;
    353. 

  353.     const lat0 = (v0 - 0.5) * Math.PI;
    354. 

  354.     const lat1 = (v1 - 0.5) * Math.PI;
    355. 

  355. 

  356.     for (let across = 0; across &lt; segmentsAround; ++across) {
    357. 

  357.       const u0 = across / segmentsAround;
    358. 

  358.       const u1 = (across + 1) / segmentsAround;
    359. 

  359.       const long0 = u0 * Math.PI * 2;
    360. 

  360.       const long1 = u1 * Math.PI * 2;
    361. 

  361. 

  362.       positions.set(getPoint(lat0, long0), posNdx);  posNdx += numComponents;
    363. 

  363.       positions.set(getPoint(lat1, long0), posNdx);  posNdx += numComponents;
    364. 

  364.       positions.set(getPoint(lat0, long1), posNdx);  posNdx += numComponents;
    365. 

  365.       positions.set(getPoint(lat1, long1), posNdx);  posNdx += numComponents;
    366. 

  366. 

  367.       indices.push(
    368. 

  368.         ndx, ndx + 1, ndx + 2,
    369. 

  369.         ndx + 2, ndx + 1, ndx + 3,
    370. 

  370.       );
    371. 

  371.       ndx += 4;
    372. 

  372.     }
    373. 

  373.   }
    374. 

  374.   return {positions, indices};
    375. 

  375. }
    376. 

  376. </pre>
    377. 

  377. <p>Nous pouvons ensuite l'appeler comme ceci</p>
    378. 

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

  379. const segmentsDown = 16;
    380. 

  380. const {positions, indices} = makeSpherePositions(segmentsAround, segmentsDown);
    381. 

  381. </pre>
    382. 

  382. <p>Comme les positions retournées sont des positions de sphère unitaire, ce sont exactement les mêmes
    383. 

  383. valeurs dont nous avons besoin pour les normales, nous pouvons donc simplement les dupliquer pour les normales.</p>
    384. 

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

  385. </pre>
    386. 

  386. <p>Et ensuite nous configurons les attributs comme auparavant</p>
    387. 

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

  388. const positionNumComponents = 3;
    389. 

  389. const normalNumComponents = 3;
    390. 

  390. 

  391. +const positionAttribute = new THREE.BufferAttribute(positions, positionNumComponents);
    392. 

  392. +positionAttribute.setUsage(THREE.DynamicDrawUsage);
    393. 

  393. geometry.setAttribute(
    394. 

  394.     'position',
    395. 

  395. +    positionAttribute);
    396. 

  396. geometry.setAttribute(
    397. 

  397.     'normal',
    398. 

  398.     new THREE.BufferAttribute(normals, normalNumComponents));
    399. 

  399. geometry.setIndex(indices);
    400. 

  400. </pre>
    401. 

  401. <p>J'ai mis en évidence quelques différences. Nous sauvegardons une référence à l'attribut de position.
    402. 

  402. Nous le marquons également comme dynamique. C'est une indication pour THREE.js que nous allons modifier
    403. 

  403. souvent le contenu de l'attribut.</p>
    404. 

  404. <p>Dans notre boucle de rendu, nous mettons à jour les positions en fonction de leurs normales à chaque image.</p>
    405. 

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

  406. 

  407. ...
    408. 

  408. 

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

  410.   const quad = (i / 12 | 0);
    411. 

  411.   const ringId = quad / segmentsAround | 0;
    412. 

  412.   const ringQuadId = quad % segmentsAround;
    413. 

  413.   const ringU = ringQuadId / segmentsAround;
    414. 

  414.   const angle = ringU * Math.PI * 2;
    415. 

  415.   temp.fromArray(normals, i);
    416. 

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

  417.   temp.toArray(positions, i);
    418. 

  418. }
    419. 

  419. positionAttribute.needsUpdate = true;
    420. 

  420. </pre>
    421. 

  421. <p>Et nous réglons <code class="notranslate" translate="no">positionAttribute.needsUpdate</code> à true pour dire à THREE.js d'utiliser nos changements.</p>
    422. 

  422. <p></p><div translate="no" class="threejs_example_container notranslate">
    423. 

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

  424.   <a class="threejs_center" href="/manual/examples/custom-buffergeometry-dynamic.html" target="_blank">cliquez ici pour ouvrir dans une fenêtre séparée</a>
    425. 

  425. </div>
    426. 

  426. 

  427. <p></p>
    428. 

  428. <p>J'espère que ces exemples vous ont été utiles pour comprendre comment utiliser <a href="/docs/#api/en/core/BufferGeometry"><code class="notranslate" translate="no">BufferGeometry</code></a> directement pour
    429. 

  429. créer votre propre géométrie et comment mettre à jour dynamiquement le contenu d'un
    430. 

  430. <a href="/docs/#api/en/core/BufferAttribute"><code class="notranslate" translate="no">BufferAttribute</code></a>.</p>
    431. 

  431. <!-- needed in English only to prevent warning from outdated translations -->
    432. 

  432. <p><a href="resources/threejs-geometry.svg"></a></p>
    433. 

  433. <p><canvas id="c"></canvas></p>
    434. 

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

  435. 

  436. 

  437.         </div>
    438. 

  438.       </div>
    439. 

  439.     </div>
    440. 

  440. 

  441.   <script src="../resources/prettify.js"></script>
    442. 

  442.   <script src="../resources/lesson.js"></script>
    443. 

  443. 

  444. 

  445. 

  446. 

  447. </body></html>
    448.
粤ICP备19079148号