Browse Source

remove references to XXXBufferGeometry

Gregg Tavares 4 years ago
parent
commit
fbac88d731

+ 35 - 64
threejs/lessons/fr/threejs-primitives.md

@@ -26,26 +26,26 @@ La plupart des primitives ci-dessous ont des valeurs par défaut
 pour certains ou tous leurs paramètres. Vous pouvez donc les
 utiliser en fonction de vos besoins.
 
-<div id="Diagram-BoxBufferGeometry" data-primitive="BoxBufferGeometry">Une Boîte</div>
-<div id="Diagram-CircleBufferGeometry" data-primitive="CircleBufferGeometry">Un Cercle plat</div>
-<div id="Diagram-ConeBufferGeometry" data-primitive="ConeBufferGeometry">Un Cône</div>
-<div id="Diagram-CylinderBufferGeometry" data-primitive="CylinderBufferGeometry">Un Cylindre</div>
-<div id="Diagram-DodecahedronBufferGeometry" data-primitive="DodecahedronBufferGeometry">Un Dodécaèdre (12 côtés)</div>
-<div id="Diagram-ExtrudeBufferGeometry" data-primitive="ExtrudeBufferGeometry">Une forme 2D extrudée avec un biseautage optionnel. Ici, nous extrudons une forme de cœur. Notez qu'il s'agit du principe de fonctionnement pour les <code>TextBufferGeometry</code> et les <code>TextGeometry</code>.</div>
-<div id="Diagram-IcosahedronBufferGeometry" data-primitive="IcosahedronBufferGeometry">Un Icosaèdre (20 côtés)</div>
-<div id="Diagram-LatheBufferGeometry" data-primitive="LatheBufferGeometry">Une forme généré par la rotation d'une ligne pour, par exemple, dessiner une lampe, une quille, bougies, bougeoirs, verres à vin, verres à boire, etc. Vous fournissez une silhouette en deux dimensions comme une série de points et vous indiquez ensuite à three.js combien de subdivisions sont nécessaires en faisant tourner la silhouette autour d'un axe.</div>
-<div id="Diagram-OctahedronBufferGeometry" data-primitive="OctahedronBufferGeometry">Un Octaèdre (8 côtés)</div>
-<div id="Diagram-ParametricBufferGeometry" data-primitive="ParametricBufferGeometry">Une surface générée en fournissant à la fonction un point 2D d'une grille et retourne le point 3D correspondant.</div>
-<div id="Diagram-PlaneBufferGeometry" data-primitive="PlaneBufferGeometry">Un plan 2D</div>
-<div id="Diagram-PolyhedronBufferGeometry" data-primitive="PolyhedronBufferGeometry">Prend un ensemble de triangles centrés autour d'un point et les projette sur une sphère</div>
-<div id="Diagram-RingBufferGeometry" data-primitive="RingBufferGeometry">Un disque 2D avec un trou au centre</div>
-<div id="Diagram-ShapeBufferGeometry" data-primitive="ShapeBufferGeometry">Un tracé 2D qui se triangule</div>
-<div id="Diagram-SphereBufferGeometry" data-primitive="SphereBufferGeometry">une sphère</div>
-<div id="Diagram-TetrahedronBufferGeometry" data-primitive="TetrahedronBufferGeometry">Un tétraèdre (4 côtés)</div>
-<div id="Diagram-TextBufferGeometry" data-primitive="TextBufferGeometry">Texte 3D généré à partir d'une police 3D et d'une chaîne de caractères</div>
-<div id="Diagram-TorusBufferGeometry" data-primitive="TorusBufferGeometry">Un tore (donut)</div>
-<div id="Diagram-TorusKnotBufferGeometry" data-primitive="TorusKnotBufferGeometry">Un nœud torique</div>
-<div id="Diagram-TubeBufferGeometry" data-primitive="TubeBufferGeometry">Extrusion contrôlée d'un cercle le long d'un tracé</div>
+<div id="Diagram-BoxGeometry" data-primitive="BoxGeometry">Une Boîte</div>
+<div id="Diagram-CircleGeometry" data-primitive="CircleGeometry">Un Cercle plat</div>
+<div id="Diagram-ConeGeometry" data-primitive="ConeGeometry">Un Cône</div>
+<div id="Diagram-CylinderGeometry" data-primitive="CylinderGeometry">Un Cylindre</div>
+<div id="Diagram-DodecahedronGeometry" data-primitive="DodecahedronGeometry">Un Dodécaèdre (12 côtés)</div>
+<div id="Diagram-ExtrudeGeometry" data-primitive="ExtrudeGeometry">Une forme 2D extrudée avec un biseautage optionnel. Ici, nous extrudons une forme de cœur. Notez qu'il s'agit du principe de fonctionnement pour les <code>TextGeometry</code> et les <code>TextGeometry</code>.</div>
+<div id="Diagram-IcosahedronGeometry" data-primitive="IcosahedronGeometry">Un Icosaèdre (20 côtés)</div>
+<div id="Diagram-LatheGeometry" data-primitive="LatheGeometry">Une forme généré par la rotation d'une ligne pour, par exemple, dessiner une lampe, une quille, bougies, bougeoirs, verres à vin, verres à boire, etc. Vous fournissez une silhouette en deux dimensions comme une série de points et vous indiquez ensuite à three.js combien de subdivisions sont nécessaires en faisant tourner la silhouette autour d'un axe.</div>
+<div id="Diagram-OctahedronGeometry" data-primitive="OctahedronGeometry">Un Octaèdre (8 côtés)</div>
+<div id="Diagram-ParametricGeometry" data-primitive="ParametricGeometry">Une surface générée en fournissant à la fonction un point 2D d'une grille et retourne le point 3D correspondant.</div>
+<div id="Diagram-PlaneGeometry" data-primitive="PlaneGeometry">Un plan 2D</div>
+<div id="Diagram-PolyhedronGeometry" data-primitive="PolyhedronGeometry">Prend un ensemble de triangles centrés autour d'un point et les projette sur une sphère</div>
+<div id="Diagram-RingGeometry" data-primitive="RingGeometry">Un disque 2D avec un trou au centre</div>
+<div id="Diagram-ShapeGeometry" data-primitive="ShapeGeometry">Un tracé 2D qui se triangule</div>
+<div id="Diagram-SphereGeometry" data-primitive="SphereGeometry">une sphère</div>
+<div id="Diagram-TetrahedronGeometry" data-primitive="TetrahedronGeometry">Un tétraèdre (4 côtés)</div>
+<div id="Diagram-TextGeometry" data-primitive="TextGeometry">Texte 3D généré à partir d'une police 3D et d'une chaîne de caractères</div>
+<div id="Diagram-TorusGeometry" data-primitive="TorusGeometry">Un tore (donut)</div>
+<div id="Diagram-TorusKnotGeometry" data-primitive="TorusKnotGeometry">Un nœud torique</div>
+<div id="Diagram-TubeGeometry" data-primitive="TubeGeometry">Extrusion contrôlée d'un cercle le long d'un tracé</div>
 <div id="Diagram-EdgesGeometry" data-primitive="EdgesGeometry">Un objet d'aide qui prend une autre
 géométrie en entrée et génère des arêtes que si l'angle entre les faces est supérieur à un certain
 seuil. Par exemple, si vous regardez en haut de la boîte, elle montre une ligne passant par chaque
@@ -61,36 +61,8 @@ n'y aurait que 3 points. Si vous essayez de le dessiner en utilisant un matéria
 triangulaire à un <code>WireframeGeometry</code> vous obtenez une nouvelle géométrie qui comporte
 3 segments de lignes utilisant 6 points.</div>
 
-Vous remarquerez que la plupart d'entre eux proviennent soit du type `Geometry` soit
-du type `BufferGeometry`. Le choix entre ces deux types est question de compromis entre flexibilité et performance.
-
-Le choix des primitives basées sur le type `BufferGeometry` s'oriente sur le critère de la performance. Les
-sommets de la géométrie sont générés directement dans un format de tableau typé efficace, prêt à
-être envoyé au GPU pour le rendu. Cela signifie qu'ils sont plus rapides à démarrer et prennent
-moins de mémoire, mais si vous voulez modifier leurs données, ils nécessitent ce qui est souvent
-considéré comme une programmation plus ardue.
-
-Le choix des primitives basées sur le type `Geometry` s'oriente sur le critère de la flexiblité car elles sont les plus faciles à manipuler.
-Elles sont construites à partir de classes JavaScript comme `Vector3` pour les points 3D et `Face3`
-pour les triangles.
-Elles demandent beaucoup de mémoire et avant de pouvoir être rendues à l'écran, three.js devra les convertir
-en une représentation correspondante à `BufferGeometry`.
-
-Si vous savez que vous n'allez pas manipuler une primitive
-ou si vous êtes à l'aise pour appliquer des calculs modifiant
-leurs données internes, alors il est préférable d'opter pour les primitives
-basées sur `BufferGeometry`. Si, par contre, vous
-souhaitez modifier certaines choses avant le rendu, vous trouverez
-peut-être les primitives basées sur la `Geometry` plus faciles à manipuler.
-
-Pour prendre un exemple simple, une `BufferGeometry` ne peut pas facilement
-avoir de nouveaux sommets ajoutés. Le nombre de sommets utilisés
-est décidé au moment de la création, le stockage est créé, puis les données
-relatives aux sommets sont fournies. Alors que pour `Geometry`, vous
-pouvez ajouter des sommets au fur et à mesure.
-
 Nous reviendrons sur la création de géométrie personnalisée dans
-[un autre article](threejs-custom-geometry.html). Pour l'instant,
+[un autre article](threejs-custom-buffer-geometry.html). Pour l'instant,
 faisons un exemple en créant chaque type de primitive. Nous
 commencerons par les [exemples vus dans l'article précédent](threejs-responsive.html).
 
@@ -167,7 +139,7 @@ qui constituent une forme. Pour un solide comme une sphère
 ou un cube, il n'y a généralement pas de raison de dessiner les
 côtés arrières des triangles car ils sont tous tournés ver l'intérieur
 de la forme. Dans notre cas, cependant, nous dessinons des objets
-comme la `PlaneBufferGeometry` ou la `ShapeBufferGeometry`
+comme la `PlaneGeometry` ou la `ShapeGeometry`
 qui sont bidimensionnnels et n'ont donc pas d'intérieur.
 Sans le paramètre `side: THREE.DoubleSide` elle disparaîtraient
 quand on regarderait leur dos.
@@ -197,7 +169,7 @@ Par exemple, la création d'une boîte :
   const width = 8; // largeur
   const height = 8; // hauteur
   const depth = 8; // profondeur
-  addSolidGeometry(-2, -2, new THREE.BoxBufferGeometry(width, height, depth));
+  addSolidGeometry(-2, -2, new THREE.BoxGeometry(width, height, depth));
 }
 ```
 
@@ -208,7 +180,7 @@ Voici le résultat :
 {{{example url="../threejs-primitives.html" }}}
 
 Il y a quelques exceptions notables au modèle ci-dessus.
-La plus grande est probablement le `TextBufferGeometry`. Il doit charger
+La plus grande est probablement le `TextGeometry`. Il doit charger
 des données de police en 3D avant de pouvoir générer un maillage pour le texte.
 Ces données se chargent de manière asynchrone, nous devons donc attendre
 qu'elles soient chargées avant d'essayer de créer la géométrie. En "promettant"
@@ -230,7 +202,7 @@ Et enfin, nous créons la géométrie et appelons `addObject` pour l'ajouter à
 
   async function doit() {
     const font = await loadFont('../resources/threejs/fonts/helvetiker_regular.typeface.json');  /* threejsfundamentals: url */
-    const geometry = new THREE.TextBufferGeometry('three.js', {
+    const geometry = new THREE.TextGeometry('three.js', {
       font: font,
       size: 3.0,
       height: .2,
@@ -317,7 +289,7 @@ prend une taille ([`size`](PointsMaterial.size)) pour la grosseur des points.
 const radius = 7; // rayon
 const widthSegments = 12;
 const heightSegments = 8;
-const geometry = new THREE.SphereBufferGeometry(radius, widthSegments, heightSegments);
+const geometry = new THREE.SphereGeometry(radius, widthSegments, heightSegments);
 const material = new THREE.PointsMaterial({
     color: 'red',
     size: 0.2, // en unités du monde
@@ -354,9 +326,9 @@ géométries des sphères prennant en paramètres le nombre de divisions à fair
 haut en bas. Par exemple :
 
 <div class="spread">
-<div data-diagram="SphereBufferGeometryLow"></div>
-<div data-diagram="SphereBufferGeometryMedium"></div>
-<div data-diagram="SphereBufferGeometryHigh"></div>
+<div data-diagram="SphereGeometryLow"></div>
+<div data-diagram="SphereGeometryMedium"></div>
+<div data-diagram="SphereGeometryHigh"></div>
 </div>
 
 La première sphère a un tour de 5 segments et 3 de haut, soit 15 segments ou 30 triangles.
@@ -368,9 +340,9 @@ ayez besoin d'un grand nombre de segments, mais si vous enlevez les lignes et le
 nous obtenons ceci :
 
 <div class="spread">
-<div data-diagram="SphereBufferGeometryLowSmooth"></div>
-<div data-diagram="SphereBufferGeometryMediumSmooth"></div>
-<div data-diagram="SphereBufferGeometryHighSmooth"></div>
+<div data-diagram="SphereGeometryLowSmooth"></div>
+<div data-diagram="SphereGeometryMediumSmooth"></div>
+<div data-diagram="SphereGeometryHighSmooth"></div>
 </div>
 
 Il est moins perceptible que celle de droite avec 5000 triangles est meilleure que celle avec
@@ -385,8 +357,8 @@ Parfois, il est facile de choisir. Par exemple, vous pouvez aussi choisir
 de subdiviser un plan.
 
 <div class="spread">
-<div data-diagram="PlaneBufferGeometryLow"></div>
-<div data-diagram="PlaneBufferGeometryHigh"></div>
+<div data-diagram="PlaneGeometryLow"></div>
+<div data-diagram="PlaneGeometryHigh"></div>
 </div>
 
 Le plan à gauche est composé de 2 triangles. Le plan de droite est composé de 200 triangles.
@@ -401,8 +373,7 @@ Vous devrez décider vous-même du compromis qui convient le mieux à cas d'util
 Si aucune des formes ci-dessus ne correspond à votre cas d'utilisation, vous pouvez
 charger la géométrie par exemple à partir d'un [fichier .obj](threejs-load-obj.html)
 ou d'un [fichier .gltf](threejs-load-gltf.html).
-Vous pouvez également créer votre [Geometry](threejs-custom-geometry.html)
-ou votre [BufferGeometry](threejs-custom-buffergeometry.html).
+Vous pouvez également créer votre [BufferGeometry](threejs-custom-buffergeometry.html).
 
 Voyons maintenant l'article traitant sur [comment fonctionne un graphe de scène three.js et comment l'utiliser](threejs-scenegraph.html).
 

+ 36 - 56
threejs/lessons/ja/threejs-primitives.md

@@ -25,51 +25,32 @@ Three.jsは多くのプリミティブがあります。
 そのため、必要に応じて、上手く使い分けることができます。
 
 
-<div id="Diagram-BoxBufferGeometry" data-primitive="BoxBufferGeometry">立方体</div>
-<div id="Diagram-CircleBufferGeometry" data-primitive="CircleBufferGeometry">2次元の円</div>
-<div id="Diagram-ConeBufferGeometry" data-primitive="ConeBufferGeometry">円錐</div>
-<div id="Diagram-CylinderBufferGeometry" data-primitive="CylinderBufferGeometry">円筒</div>
-<div id="Diagram-DodecahedronBufferGeometry" data-primitive="DodecahedronBufferGeometry">十二面体(12面のもの)</div>
-<div id="Diagram-ExtrudeBufferGeometry" data-primitive="ExtrudeBufferGeometry">
+<div id="Diagram-BoxGeometry" data-primitive="BoxGeometry">立方体</div>
+<div id="Diagram-CircleGeometry" data-primitive="CircleGeometry">2次元の円</div>
+<div id="Diagram-ConeGeometry" data-primitive="ConeGeometry">円錐</div>
+<div id="Diagram-CylinderGeometry" data-primitive="CylinderGeometry">円筒</div>
+<div id="Diagram-DodecahedronGeometry" data-primitive="DodecahedronGeometry">十二面体(12面のもの)</div>
+<div id="Diagram-ExtrudeGeometry" data-primitive="ExtrudeGeometry">
 押し出しでできた2次元形状、ベベルオプション付き。
-これは<code>TextBufferGeometry</code>と<code>TextGeometry</code>のそれぞれの基礎になることに注意してください。</div>
-<div id="Diagram-IcosahedronBufferGeometry" data-primitive="IcosahedronBufferGeometry">二十面体(20面のもの)</div>
-<div id="Diagram-LatheBufferGeometry" data-primitive="LatheBufferGeometry">線を回転させてできる形状。例としてはこんなところでしょうか:ランプやボーリングのピン、ろうそく、ろうそく立て、ワイングラス、ドリンクグラス、などなど...。点の連続として2次元の輪郭を与え、その輪郭を軸の周りで回転させる際に、どのくらい細分化するかthree.jsに指示することができます。</div>
-<div id="Diagram-OctahedronBufferGeometry" data-primitive="OctahedronBufferGeometry">八面体(8面)</div>
-<div id="Diagram-ParametricBufferGeometry" data-primitive="ParametricBufferGeometry">関数を与えることでできる表面。この関数は、グリッド上2次元の点を引数に取り、対応する3次元の点を返す。</div>
-<div id="Diagram-PlaneBufferGeometry" data-primitive="PlaneBufferGeometry">2次元の四角形</div>
-<div id="Diagram-PolyhedronBufferGeometry" data-primitive="PolyhedronBufferGeometry">三角形を点の周りに集めて球体にする</div>
-<div id="Diagram-RingBufferGeometry" data-primitive="RingBufferGeometry">真ん中に穴のあいた円盤</div>
-<div id="Diagram-ShapeBufferGeometry" data-primitive="ShapeBufferGeometry">三角形分割された2次元の輪郭</div>
-<div id="Diagram-SphereBufferGeometry" data-primitive="SphereBufferGeometry">球体</div>
-<div id="Diagram-TetrahedronBufferGeometry" data-primitive="TetrahedronBufferGeometry">四面体(4面のもの)</div>
-<div id="Diagram-TextBufferGeometry" data-primitive="TextBufferGeometry">3Dフォントと文字列からできた、3Dテキスト</div>
-<div id="Diagram-TorusBufferGeometry" data-primitive="TorusBufferGeometry">円環(ドーナツ)</div>
-<div id="Diagram-TorusKnotBufferGeometry" data-primitive="TorusKnotBufferGeometry">円環(結び目)</div>
-<div id="Diagram-TubeBufferGeometry" data-primitive="TubeBufferGeometry">経路をなぞらせた管</div>
+これは<code>TextGeometry</code>と<code>TextGeometry</code>のそれぞれの基礎になることに注意してください。</div>
+<div id="Diagram-IcosahedronGeometry" data-primitive="IcosahedronGeometry">二十面体(20面のもの)</div>
+<div id="Diagram-LatheGeometry" data-primitive="LatheGeometry">線を回転させてできる形状。例としてはこんなところでしょうか:ランプやボーリングのピン、ろうそく、ろうそく立て、ワイングラス、ドリンクグラス、などなど...。点の連続として2次元の輪郭を与え、その輪郭を軸の周りで回転させる際に、どのくらい細分化するかthree.jsに指示することができます。</div>
+<div id="Diagram-OctahedronGeometry" data-primitive="OctahedronGeometry">八面体(8面)</div>
+<div id="Diagram-ParametricGeometry" data-primitive="ParametricGeometry">関数を与えることでできる表面。この関数は、グリッド上2次元の点を引数に取り、対応する3次元の点を返す。</div>
+<div id="Diagram-PlaneGeometry" data-primitive="PlaneGeometry">2次元の四角形</div>
+<div id="Diagram-PolyhedronGeometry" data-primitive="PolyhedronGeometry">三角形を点の周りに集めて球体にする</div>
+<div id="Diagram-RingGeometry" data-primitive="RingGeometry">真ん中に穴のあいた円盤</div>
+<div id="Diagram-ShapeGeometry" data-primitive="ShapeGeometry">三角形分割された2次元の輪郭</div>
+<div id="Diagram-SphereGeometry" data-primitive="SphereGeometry">球体</div>
+<div id="Diagram-TetrahedronGeometry" data-primitive="TetrahedronGeometry">四面体(4面のもの)</div>
+<div id="Diagram-TextGeometry" data-primitive="TextGeometry">3Dフォントと文字列からできた、3Dテキスト</div>
+<div id="Diagram-TorusGeometry" data-primitive="TorusGeometry">円環(ドーナツ)</div>
+<div id="Diagram-TorusKnotGeometry" data-primitive="TorusKnotGeometry">円環(結び目)</div>
+<div id="Diagram-TubeGeometry" data-primitive="TubeGeometry">経路をなぞらせた管</div>
 <div id="Diagram-EdgesGeometry" data-primitive="EdgesGeometry">異なるジオメトリを入力として、その面同士の角度が閾値以上なら角を作り出す、補助オブジェクト。例えば、記事の最初の方で紹介した立方体を見てみると、それぞれの面に、立方体を作っている全ての三角形の線が表示されています。<code>EdgesGeometry</code>を代わりに使うことで、面内の線は全て除去されます。下記のthresholdAngleを調整してみてください。閾値以下の角が消えて見えるでしょう。</div>
 <div id="Diagram-WireframeGeometry" data-primitive="WireframeGeometry">1つの角ごとに1つの線分(2点)を持つジオメトリを生成する。WebGLは線分を作るのに2点が必要なので、この機能がないと、しばしば角を忘れたり、余分な角を作ってしまうでしょう。例えば、たった3点しかない1つの三角形あるとします。<code>wireframe: true</code>のマテリアルを使ってそれを描こうとした場合、1本の線分しか得られません。<code>WireframeGeometry</code>にその三角形のジオメトリを渡すと、6点からなる3つの線分を持った新しいジオメトリを生成します。</div>
 
-ほとんどのプリミティブは`Geometry`か`BufferGeometry`の2つの種類があることに気づいたかもしれません。
-この2つの違いは、高い柔軟性とパフォーマンスです。
-
-`BufferGeometry`に基づいたプリミティブはパフォーマンス志向の種類です。
-ジオメトリの頂点は、GPUにアップロードして描画するのに適した配列形式へ、直接変換されます。
-これは、起動が速く省メモリであることを意味しますが、データの修正により複雑なプログラミングが必要になることが多いです。
-
-`Geometry`に基づいたプリミティブは柔軟で、操作しやすい種類です。
-これらは、3次元の点のための`Vector3`、三角形のための`Face3`のようなJavaScriptに基づくクラスからできています。結構メモリを必要としますし、three.jsにレンダリングされる前に、対応する`BufferGeometry`表現に似たものに変換する必要があります。
-
-プリミティブを操作しないことが分かっているか、計算をして内部を操作することに抵抗がないなら、
-`BufferGeometry`に基づいたプリミティブを使うのがベストです。
-一方で、描画前に多少の変更をしたいなら、`Geometry`に基づいたプリミティブを使うと、
-より簡単に扱うことができます。
-
-単純な例だと、`BufferGeometry`は新しい頂点群を簡単に追加できません。
-使う頂点の数は作成時に宣言され、記憶領域が確保され、データが書き込まれます。
-一方、`Geometry`は、みなさんがしたいように頂点群を追加できます。
-
-[別の記事](threejs-custom-geometry.html)で、カスタムジオメトリの作成について説明します。
+[別の記事](threejs-custom-buffergeometry.html)で、カスタムジオメトリの作成について説明します。
 今はそれぞれの種類のプリミティブを作成する例を作ってみます。
 [以前の記事](threejs-responsive.html)を例に始めましょう。
 
@@ -139,7 +120,7 @@ function createMaterial() {
 これはthreeに形状を作るときに三角形の両面を描くように指示します。
 球体や立方体のような立体形状には、形状の内側を向いている裏側を描く
 理由はありません。
-しかしこの例だと、2次元で裏側が存在しない`PlaneBufferGeometry`や`ShapeBufferGeometry`のようなものも描こうとしています。
+しかしこの例だと、2次元で裏側が存在しない`PlaneGeometry`や`ShapeGeometry`のようなものも描こうとしています。
 `side: THREE.DoubleSide`を設定しないと、裏側を見たときに消えてしまうことでしょう。
 
 `side: THREE.DoubleSide`に**not**が設定された方が、描画が速くなります。
@@ -163,7 +144,7 @@ function addSolidGeometry(x, y, geometry) {
   const width = 8;
   const height = 8;
   const depth = 8;
-  addSolidGeometry(-2, -2, new THREE.BoxBufferGeometry(width, height, depth));
+  addSolidGeometry(-2, -2, new THREE.BoxGeometry(width, height, depth));
 }
 ```
 
@@ -174,7 +155,7 @@ function addSolidGeometry(x, y, geometry) {
 {{{example url="../threejs-primitives.html" }}}
 
 上記のパターンには、2つの特筆すべき例外があります。
-一番大きなものは、たぶん`TextBufferGeometry`です。テキストのメッシュを作るときは、事前に3Dフォントデータを読み込む必要があります。このデータの読み込みは非同期的に行われるので、ジオメトリを作ろうとする前に、読み込みを待つ必要があります。フォントの読み込みにpromiseを使うと、もっと速く読み込むことができます。
+一番大きなものは、たぶん`TextGeometry`です。テキストのメッシュを作るときは、事前に3Dフォントデータを読み込む必要があります。このデータの読み込みは非同期的に行われるので、ジオメトリを作ろうとする前に、読み込みを待つ必要があります。フォントの読み込みにpromiseを使うと、もっと速く読み込むことができます。
 `FontLoader`を作成し、読み込みが完了するとフォントを提供してくれるpromiseを返す`loadFont`関数を作ります。
 次に、`doit` と呼ばれる`async`関数を作り、`await`を使ってフォントを読み込みます。
 最後に、ジオメトリを作り、`addObject`を呼んでシーンに追加します。
@@ -191,7 +172,7 @@ function addSolidGeometry(x, y, geometry) {
 
   async function doit() {
     const font = await loadFont('resources/threejs/fonts/helvetiker_regular.typeface.json');  /* threejsfundamentals: url */
-    const geometry = new THREE.TextBufferGeometry('three.js', {
+    const geometry = new THREE.TextGeometry('three.js', {
       font: font,
       size: 3.0,
       height: .2,
@@ -265,7 +246,7 @@ threeが知る手助けをします。
 const radius = 7;
 const widthSegments = 12;
 const heightSegments = 8;
-const geometry = new THREE.SphereBufferGeometry(radius, widthSegments, heightSegments);
+const geometry = new THREE.SphereGeometry(radius, widthSegments, heightSegments);
 const material = new THREE.PointsMaterial({
     color: 'red',
     size: 0.2,     // in world units
@@ -301,9 +282,9 @@ const material = new THREE.PointsMaterial({
 例えば、
 
 <div class="spread">
-<div data-diagram="SphereBufferGeometryLow"></div>
-<div data-diagram="SphereBufferGeometryMedium"></div>
-<div data-diagram="SphereBufferGeometryHigh"></div>
+<div data-diagram="SphereGeometryLow"></div>
+<div data-diagram="SphereGeometryMedium"></div>
+<div data-diagram="SphereGeometryHigh"></div>
 </div>
 
 最初の球体は、15セグメントまたは30個の三角形になる、周囲に5セグメント、高さ3です。
@@ -315,9 +296,9 @@ const material = new THREE.PointsMaterial({
 影をならすことで、このようになります。
 
 <div class="spread">
-<div data-diagram="SphereBufferGeometryLowSmooth"></div>
-<div data-diagram="SphereBufferGeometryMediumSmooth"></div>
-<div data-diagram="SphereBufferGeometryHighSmooth"></div>
+<div data-diagram="SphereGeometryLowSmooth"></div>
+<div data-diagram="SphereGeometryMediumSmooth"></div>
+<div data-diagram="SphereGeometryHighSmooth"></div>
 </div>
 
 5000個の三角形からできる右側の球体が、たった480個の三角形からできる真ん中の球体よりも良いかは、明らかではありません。
@@ -332,8 +313,8 @@ const material = new THREE.PointsMaterial({
 選ぶのが簡単なときもあります。例えば、平面の細分化を選ぶこともできます。
 
 <div class="spread">
-<div data-diagram="PlaneBufferGeometryLow"></div>
-<div data-diagram="PlaneBufferGeometryHigh"></div>
+<div data-diagram="PlaneGeometryLow"></div>
+<div data-diagram="PlaneGeometryHigh"></div>
 </div>
 
 左側の四角形は2個の三角形からできています。右側の四角形は200個の三角形からできています。
@@ -347,8 +328,7 @@ const material = new THREE.PointsMaterial({
 
 みなさんの用途に適した形状がないなら、例えば、[.obj file](threejs-load-obj.html)
 や[.gltf file](threejs-load-gltf.html)からジオメトリを読み込むことができます。
-[カスタムジオメトリ](threejs-custom-geometry.html) 
-や[カスタムBufferGeometry](threejs-custom-buffergeometry.html)を作ることもできます。
+[カスタムBufferGeometry](threejs-custom-buffergeometry.html)を作ることもできます。
 
 次は、[threeのシーングラフの動き方と使い方](threejs-scenegraph.html)を説明します。
 

+ 39 - 66
threejs/lessons/kr/threejs-primitives.md

@@ -22,59 +22,32 @@ Three.js에는 다양한 원시 모델이 있습니다. 먼저 Three.js의 원
 앞으로 소개할 원시 모델들은 대부분 기본값이 있으므로 필요에 따라
 인자를 넣어주면 됩니다.
 
-<div id="Diagram-BoxBufferGeometry" data-primitive="BoxBufferGeometry">육면체(Box)</div>
-<div id="Diagram-CircleBufferGeometry" data-primitive="CircleBufferGeometry">원(flat circle)</div>
-<div id="Diagram-ConeBufferGeometry" data-primitive="ConeBufferGeometry">원뿔(Cone)</div>
-<div id="Diagram-CylinderBufferGeometry" data-primitive="CylinderBufferGeometry">원통(Cylinder)</div>
-<div id="Diagram-DodecahedronBufferGeometry" data-primitive="DodecahedronBufferGeometry">십이면체(Dodecahedron)</div>
-<div id="Diagram-ExtrudeBufferGeometry" data-primitive="ExtrudeBufferGeometry">사각(bevel)을 주어 깍아낸(extruded) 2D 모양입니다.
-아래에서는 하트 모양으로 깍아냈죠. <code>ExtrudedBufferGeometry</code>는 나중에 설명할
-<code>TextBufferGeometry</code>과 <code>TextGeometry</code>의 기초 모델입니다.</div>
-<div id="Diagram-IcosahedronBufferGeometry" data-primitive="IcosahedronBufferGeometry">이십면체(Icosahedron)</div>
-<div id="Diagram-LatheBufferGeometry" data-primitive="LatheBufferGeometry">선(line)을 회전시켜 만든 모양입니다. 램프, 볼링핀, 초, 초 받침, 와인잔, 유리잔 등이 있죠(물레로 도자기를 만드는 것처럼. 역주). 2D 형태를 점(point, Vector2 클래스를 말함. 역주)을 사용해 지정하고, Three.js에게 축을 따라 세분값(아래 예제의 <code>segments</code> 값. 역주)과 회전값(아래 예제의 <code>phiLength</code> 값. 역주)을 지정해주면 됩니다.</div>
-<div id="Diagram-OctahedronBufferGeometry" data-primitive="OctahedronBufferGeometry">팔면체(Octahedron)</div>
-<div id="Diagram-ParametricBufferGeometry" data-primitive="ParametricBufferGeometry">2D 격자값(격자 하나의 벡터값)을 받아 3D 값을 반환하는 함수를 인자로 전달하여 면을 만듭니다.</div>
-<div id="Diagram-PlaneBufferGeometry" data-primitive="PlaneBufferGeometry">2D 평면(2D plane)</div>
-<div id="Diagram-PolyhedronBufferGeometry" data-primitive="PolyhedronBufferGeometry">다면체입니다. 주어진 3D 점들(아래 <code>verticesOfCube</code>. 역주)을 중심으로 삼각형(아래 <code>indicesOfFaces</code>. 역주)을 구 형태로 잇습니다.</div>
-<div id="Diagram-RingBufferGeometry" data-primitive="RingBufferGeometry">중앙이 빈 2D 디스크(disc)입니다.</div>
-<div id="Diagram-ShapeBufferGeometry" data-primitive="ShapeBufferGeometry">삼각형으로 이루어진 2D 윤곽선입니다.</div>
-<div id="Diagram-SphereBufferGeometry" data-primitive="SphereBufferGeometry">구(Sphere)</div>
-<div id="Diagram-TetrahedronBufferGeometry" data-primitive="TetrahedronBufferGeometry">사면체(tetrahedron)</div>
-<div id="Diagram-TextBufferGeometry" data-primitive="TextBufferGeometry">3D 폰트와 문자열로 만든 3D 텍스트입니다.</div>
-<div id="Diagram-TorusBufferGeometry" data-primitive="TorusBufferGeometry">원환체(torus), 도넛(donut)</div>
-<div id="Diagram-TorusKnotBufferGeometry" data-primitive="TorusKnotBufferGeometry">원환체 매듭(torus knot)</div>
-<div id="Diagram-TubeBufferGeometry" data-primitive="TubeBufferGeometry">패스를 따라 이어진 원입니다.</div>
+<div id="Diagram-BoxGeometry" data-primitive="BoxGeometry">육면체(Box)</div>
+<div id="Diagram-CircleGeometry" data-primitive="CircleGeometry">원(flat circle)</div>
+<div id="Diagram-ConeGeometry" data-primitive="ConeGeometry">원뿔(Cone)</div>
+<div id="Diagram-CylinderGeometry" data-primitive="CylinderGeometry">원통(Cylinder)</div>
+<div id="Diagram-DodecahedronGeometry" data-primitive="DodecahedronGeometry">십이면체(Dodecahedron)</div>
+<div id="Diagram-ExtrudeGeometry" data-primitive="ExtrudeGeometry">사각(bevel)을 주어 깍아낸(extruded) 2D 모양입니다.
+아래에서는 하트 모양으로 깍아냈죠. <code>ExtrudedGeometry</code>는 나중에 설명할
+<code>TextGeometry</code>과 <code>TextGeometry</code>의 기초 모델입니다.</div>
+<div id="Diagram-IcosahedronGeometry" data-primitive="IcosahedronGeometry">이십면체(Icosahedron)</div>
+<div id="Diagram-LatheGeometry" data-primitive="LatheGeometry">선(line)을 회전시켜 만든 모양입니다. 램프, 볼링핀, 초, 초 받침, 와인잔, 유리잔 등이 있죠(물레로 도자기를 만드는 것처럼. 역주). 2D 형태를 점(point, Vector2 클래스를 말함. 역주)을 사용해 지정하고, Three.js에게 축을 따라 세분값(아래 예제의 <code>segments</code> 값. 역주)과 회전값(아래 예제의 <code>phiLength</code> 값. 역주)을 지정해주면 됩니다.</div>
+<div id="Diagram-OctahedronGeometry" data-primitive="OctahedronGeometry">팔면체(Octahedron)</div>
+<div id="Diagram-ParametricGeometry" data-primitive="ParametricGeometry">2D 격자값(격자 하나의 벡터값)을 받아 3D 값을 반환하는 함수를 인자로 전달하여 면을 만듭니다.</div>
+<div id="Diagram-PlaneGeometry" data-primitive="PlaneGeometry">2D 평면(2D plane)</div>
+<div id="Diagram-PolyhedronGeometry" data-primitive="PolyhedronGeometry">다면체입니다. 주어진 3D 점들(아래 <code>verticesOfCube</code>. 역주)을 중심으로 삼각형(아래 <code>indicesOfFaces</code>. 역주)을 구 형태로 잇습니다.</div>
+<div id="Diagram-RingGeometry" data-primitive="RingGeometry">중앙이 빈 2D 디스크(disc)입니다.</div>
+<div id="Diagram-ShapeGeometry" data-primitive="ShapeGeometry">삼각형으로 이루어진 2D 윤곽선입니다.</div>
+<div id="Diagram-SphereGeometry" data-primitive="SphereGeometry">구(Sphere)</div>
+<div id="Diagram-TetrahedronGeometry" data-primitive="TetrahedronGeometry">사면체(tetrahedron)</div>
+<div id="Diagram-TextGeometry" data-primitive="TextGeometry">3D 폰트와 문자열로 만든 3D 텍스트입니다.</div>
+<div id="Diagram-TorusGeometry" data-primitive="TorusGeometry">원환체(torus), 도넛(donut)</div>
+<div id="Diagram-TorusKnotGeometry" data-primitive="TorusKnotGeometry">원환체 매듭(torus knot)</div>
+<div id="Diagram-TubeGeometry" data-primitive="TubeGeometry">패스를 따라 이어진 원입니다.</div>
 <div id="Diagram-EdgesGeometry" data-primitive="EdgesGeometry">다른 <code>geometry</code>를 받는 헬퍼 객체로, 각 면 사이의 각이 일정 값 이상일 때만 모서리를 표시합니다. 상단의 육면체 예제를 보면 육면체를 만드는 삼각형이 표면에 전부 표시된 것을 확인할 수 있는데, <code>EdgesGeometry</code>를 사용할 경우 표면에 있던 선들이 전부 사라집니다. 아래 예제의 <code>thresholdAngle</code> 값을 조정해 해당 값 이하인 모서리가 전부 사라지는 것을 확인해보세요.</div>
 <div id="Diagram-WireframeGeometry" data-primitive="WireframeGeometry">매개변수로 받은 <code>geometry</code>의 모서리 하나당 하나의 선분(2개의 점)을 가진 <code>geometry</code>를 생성합니다. WebGl은 보통 선분 하나당 2개의 점을 필요로 합니다. 때문에 이 모델을 사용하지 않는 경우, 모서리가 없어지거나 추가되는 현상이 발생할 수 있습니다. 예를 들어 2D 삼각형을 만드는 경우, 대부분 3개의 점을 이용해 삼각형을 만들려고 할 겁니다. <code>wireframe: true</code>라는 옵션이 있기는 하나, 이를 이용해 삼각형을 만들면 (WebGl은 삼각형을 만들 때 6개의 점을 요구하므로. 역주) 출력되는 건 선 하나 뿐일 겁니다. 삼각형 <code>geometry</code>를 <code>WireframeGeometry</code>에 넘겨주면 6개의 점과 3개의 선분을 가진 새 <code>geometry</code>를 생성합니다.</div>
 
-눈치채셨겠지만 대부분의 원시 모델은 `Geometry`와 `BufferGeometry`가
-짝을 이룹니다. 다른 차이점들도 있지만 둘의 가장 큰 차이점은 성능과
-확장성입니다.
-
-`BufferGeometry` 기반의 원시 모델은 성능에 최적화된 모델입니다.
-`geometry`의 정점들은 바로 렌더링 시 GPU에서 불러오기 좋은 배열
-형태로 최적화됩니다. 때문에 초기화 속도도 빠르고 메모리 점유율도
-낮지만, 이 `geometry`의 데이터를 수정하려면 복잡한 프로그래밍 과정을
-거쳐야 합니다.
-
-이에 반해 `Geometry` 기반의 원시 모델은 훨씬 다루기 쉽습니다.
-3D 정점을 만드는 데는 `Vector3` 클래스, 삼각형을 만드는 데는
-`Face3` 클래스 등 자바스크립트 기반 클래스로 이루어져 있죠.
-다만 `BufferGeometry`에 비해 약간 많은 메모리를 더 차지하고,
-렌더링을 위해 Three.js가 이 모델과 유사한 `BufferGeometry`로
-변형시키는 과정이 들어간다는 것이 단점입니다.
-
-원시 모델을 사용하지 않을 계획이거나, 기하학 모델을 수학적으로
-계산하는 데 익숙하다면, `BufferGeometry` 기반의 원시 모델을
-사용하는 것이 좋습니다. 렌더링 전에 어떤 값을 수정해야 한다면
-`Geometry`가 훨씬 다루기 쉽겠죠.
-
-하나 예를 들면, `BufferGeometry`는 정점을 추가하는 것이 어렵습니다.
-`BufferGeometry`는 생성 시에 정점의 수가 정해지며, 메모리에 할당되고,
-그 다음 정점 데이터를 채워 넣습니다. 반면에 `Geometry`는 생성 후에도
-얼마든지 정점을 추가할 수 있죠.
-
-[커스텀 geometry를 만드는 법](threejs-custom-geometry.html)에 대해서는
+[커스텀 geometry를 만드는 법](threejs-custom-buffergeometry.html)에 대해서는
 나중에 자세히 다룰 것이므로, 지금은 각 원시 모델로 예제를 만들어 보겠습니다.
 예제 코드는 [지난 글](threejs-responsive.html)에서 썼던 예제를 쓸 거에요.
 
@@ -146,8 +119,8 @@ function createMaterial() {
 위 예제에서는 `material`에 `side: THREE.DoubleSide` 옵션을
 지정했습니다. 이는 Three.js에게 삼각형의 양면 모두를 렌더링하라고
 알려주는 것이죠. 구나 정육면체 같은 물체는 보이지 않는 안쪽 면을
-굳이 렌더링할 이유가 없지만, 예제의 경우 `PlaneBufferGeometry`나
-`ShapeBufferGeometry` 등 안쪽 면이 없는 물체를 만들 것이므로
+굳이 렌더링할 이유가 없지만, 예제의 경우 `PlaneGeometry`나
+`ShapeGeometry` 등 안쪽 면이 없는 물체를 만들 것이므로
 `side: THREE.DoubleSide` 옵션을 설정하지 않으면 반대편에서 봤을 때
 물체가 사라진 것처럼 보일 겁니다.
 
@@ -174,7 +147,7 @@ function addSolidGeometry(x, y, geometry) {
   const width = 8;
   const height = 8;
   const depth = 8;
-  addSolidGeometry(-2, -2, new THREE.BoxBufferGeometry(width, height, depth));
+  addSolidGeometry(-2, -2, new THREE.BoxGeometry(width, height, depth));
 }
 ```
 
@@ -182,8 +155,8 @@ function addSolidGeometry(x, y, geometry) {
 
 {{{example url="../threejs-primitives.html" }}}
 
-몇몇 예외가 보일 텐데, 가장 크게 두드러진 것은 아마 `TextBufferGeometry`일 겁니다.
-`TextBufferGeometry`는 텍스트의 `mesh`를 생성하기 위해 3D 폰트 데이터를 필요로 합니다.
+몇몇 예외가 보일 텐데, 가장 크게 두드러진 것은 아마 `TextGeometry`일 겁니다.
+`TextGeometry`는 텍스트의 `mesh`를 생성하기 위해 3D 폰트 데이터를 필요로 합니다.
 이 데이터는 비동기로 로드되므로, 객체를 생성하기 전에 3D 폰트 데이터가 로드되기를 기다려야
 하죠. 폰트 로드 과정을 프로미스화 하면 이 과정를 더 쉽게 만들 수 있습니다. 먼저 `FontLoader`를
 생성하고, Promise를 반환하는 `loadFont` 함수를 만들어 요청을 Promise로 감쌉니다.
@@ -202,7 +175,7 @@ function addSolidGeometry(x, y, geometry) {
 
   async function doit() {
     const font = await loadFont('resources/threejs/fonts/helvetiker_regular.typeface.json');  /* threejsfundamentals: url */
-    const geometry = new THREE.TextBufferGeometry('three.js', {
+    const geometry = new THREE.TextGeometry('three.js', {
       font: font,
       size: 3.0,
       height: .2,
@@ -278,7 +251,7 @@ function addLineGeometry(x, y, geometry) {
 const radius = 7;
 const widthSegments = 12;
 const heightSegments = 8;
-const geometry = new THREE.SphereBufferGeometry(radius, widthSegments, heightSegments);
+const geometry = new THREE.SphereGeometry(radius, widthSegments, heightSegments);
 const material = new THREE.PointsMaterial({
     color: 'red',
     size: 0.2,     // 글로벌 단위
@@ -314,9 +287,9 @@ const material = new THREE.PointsMaterial({
 받습니다.
 
 <div class="spread">
-<div data-diagram="SphereBufferGeometryLow"></div>
-<div data-diagram="SphereBufferGeometryMedium"></div>
-<div data-diagram="SphereBufferGeometryHigh"></div>
+<div data-diagram="SphereGeometryLow"></div>
+<div data-diagram="SphereGeometryMedium"></div>
+<div data-diagram="SphereGeometryHigh"></div>
 </div>
 
 위 그림에서 첫 번째 구체는 둘레로 5개, 높이로 3개의 면으로 분할되었습니다.
@@ -329,9 +302,9 @@ const material = new THREE.PointsMaterial({
 아래와 같은 결과가 나옵니다.
 
 <div class="spread">
-<div data-diagram="SphereBufferGeometryLowSmooth"></div>
-<div data-diagram="SphereBufferGeometryMediumSmooth"></div>
-<div data-diagram="SphereBufferGeometryHighSmooth"></div>
+<div data-diagram="SphereGeometryLowSmooth"></div>
+<div data-diagram="SphereGeometryMediumSmooth"></div>
+<div data-diagram="SphereGeometryHighSmooth"></div>
 </div>
 
 5000 삼각형인 오른쪽 구체가 480 삼각형인 중간 구체보다 훨씬 좋다고
@@ -345,8 +318,8 @@ const material = new THREE.PointsMaterial({
 물론 선택이 쉬운 경우도 있습니다. 예를 들어 평면을 분할한다고 해보죠.
 
 <div class="spread">
-<div data-diagram="PlaneBufferGeometryLow"></div>
-<div data-diagram="PlaneBufferGeometryHigh"></div>
+<div data-diagram="PlaneGeometryLow"></div>
+<div data-diagram="PlaneGeometryHigh"></div>
 </div>
 
 왼쪽의 평면은 2 삼각형입니다. 오른쪽 평면은 200 삼각형이죠.
@@ -360,7 +333,7 @@ const material = new THREE.PointsMaterial({
 
 원시 모델 중 어떤 것도 실제 프로젝트에 적용하기가 어렵다면,
 [.obj 파일](threejs-load-obj.html) 또는 [.gltf 파일](threejs-load-gltf.html)을
-로드하여 사용할 수 있습니다. 또는 [커스텀 Geometry](threejs-custom-geometry.html)나
+로드하여 사용할 수 있습니다. 또는
 [커스텀 BufferGeometry](threejs-custom-buffergeometry.html)를 생성할 수도 있죠.
 
 다음 장에서는 [씬 그래프와 그 사용법](threejs-scenegraph.html)에 대해

+ 81 - 87
threejs/lessons/resources/threejs-primitives.js

@@ -19,7 +19,7 @@ import {threejsLessonUtils} from './threejs-lesson-utils.js';
   });
 
   const diagrams = {
-    BoxBufferGeometry: {
+    BoxGeometry: {
       ui: {
         width: { type: 'range', min: 1, max: 10, precision: 1, },
         height: { type: 'range', min: 1, max: 10, precision: 1, },
@@ -29,15 +29,15 @@ import {threejsLessonUtils} from './threejs-lesson-utils.js';
         depthSegments: { type: 'range', min: 1, max: 10, },
       },
       create(width = 8, height = 8, depth = 8) {
-        return new THREE.BoxBufferGeometry(width, height, depth);
+        return new THREE.BoxGeometry(width, height, depth);
       },
       create2(width = 8, height = 8, depth = 8, widthSegments = 4, heightSegments = 4, depthSegments = 4) {
-        return new THREE.BoxBufferGeometry(
+        return new THREE.BoxGeometry(
             width, height, depth,
             widthSegments, heightSegments, depthSegments);
       },
     },
-    CircleBufferGeometry: {
+    CircleGeometry: {
       ui: {
         radius: { type: 'range', min: 1, max: 10, precision: 1, },
         segments: { type: 'range', min: 1, max: 50, },
@@ -45,14 +45,14 @@ import {threejsLessonUtils} from './threejs-lesson-utils.js';
         thetaLength: { type: 'range', min: 0, max: 2, mult: Math.PI },
       },
       create(radius = 7, segments = 24) {
-        return new THREE.CircleBufferGeometry(radius, segments);
+        return new THREE.CircleGeometry(radius, segments);
       },
       create2(radius = 7, segments = 24, thetaStart = Math.PI * 0.25, thetaLength = Math.PI * 1.5) {
-        return new THREE.CircleBufferGeometry(
+        return new THREE.CircleGeometry(
             radius, segments, thetaStart, thetaLength);
       },
     },
-    ConeBufferGeometry: {
+    ConeGeometry: {
       ui: {
         radius: { type: 'range', min: 1, max: 10, precision: 1, },
         height: { type: 'range', min: 1, max: 10, precision: 1, },
@@ -63,17 +63,17 @@ import {threejsLessonUtils} from './threejs-lesson-utils.js';
         thetaLength: { type: 'range', min: 0, max: 2, mult: Math.PI },
       },
       create(radius = 6, height = 8, radialSegments = 16) {
-        return new THREE.ConeBufferGeometry(radius, height, radialSegments);
+        return new THREE.ConeGeometry(radius, height, radialSegments);
       },
       create2(radius = 6, height = 8, radialSegments = 16, heightSegments = 2, openEnded = true, thetaStart = Math.PI * 0.25, thetaLength = Math.PI * 1.5) {
-        return new THREE.ConeBufferGeometry(
+        return new THREE.ConeGeometry(
             radius, height,
             radialSegments, heightSegments,
             openEnded,
             thetaStart, thetaLength);
       },
     },
-    CylinderBufferGeometry: {
+    CylinderGeometry: {
       ui: {
         radiusTop: { type: 'range', min: 0, max: 10, precision: 1, },
         radiusBottom: { type: 'range', min: 0, max: 10, precision: 1, },
@@ -85,30 +85,30 @@ import {threejsLessonUtils} from './threejs-lesson-utils.js';
         thetaLength: { type: 'range', min: 0, max: 2, mult: Math.PI },
       },
       create(radiusTop = 4, radiusBottom = 4, height = 8, radialSegments = 12) {
-        return new THREE.CylinderBufferGeometry(
+        return new THREE.CylinderGeometry(
             radiusTop, radiusBottom, height, radialSegments);
       },
       create2(radiusTop = 4, radiusBottom = 4, height = 8, radialSegments = 12, heightSegments = 2, openEnded = false, thetaStart = Math.PI * 0.25, thetaLength = Math.PI * 1.5) {
-        return new THREE.CylinderBufferGeometry(
+        return new THREE.CylinderGeometry(
             radiusTop, radiusBottom, height,
             radialSegments, heightSegments,
             openEnded,
             thetaStart, thetaLength);
       },
     },
-    DodecahedronBufferGeometry: {
+    DodecahedronGeometry: {
       ui: {
         radius: { type: 'range', min: 1, max: 10, precision: 1, },
         detail: { type: 'range', min: 0, max: 5, precision: 0, },
       },
       create(radius = 7) {
-        return new THREE.DodecahedronBufferGeometry(radius);
+        return new THREE.DodecahedronGeometry(radius);
       },
       create2(radius = 7, detail = 2) {
-        return new THREE.DodecahedronBufferGeometry(radius, detail);
+        return new THREE.DodecahedronGeometry(radius, detail);
       },
     },
-    ExtrudeBufferGeometry: {
+    ExtrudeGeometry: {
       ui: {
         steps: { type: 'range', min: 1, max: 100, },
         depth: { type: 'range', min: 1, max: 20, precision: 1, },
@@ -139,7 +139,7 @@ import {threejsLessonUtils} from './threejs-lesson-utils.js';
           bevelSegments,
         };
 
-        const geometry = new THREE.ExtrudeBufferGeometry(shape, extrudeSettings);
+        const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
         return geometry;
       },
       src: `
@@ -163,7 +163,7 @@ const extrudeSettings = {
   bevelSegments: 2,  // ui: bevelSegments
 };
 
-const geometry = THREE.ExtrudeBufferGeometry(shape, extrudeSettings);
+const geometry = THREE.ExtrudeGeometry(shape, extrudeSettings);
 `,
       create2(steps = 100) {
     const outline = new THREE.Shape([
@@ -193,7 +193,7 @@ const geometry = THREE.ExtrudeBufferGeometry(shape, extrudeSettings);
       extrudePath: shape,
     };
 
-    const geometry =  new THREE.ExtrudeBufferGeometry(outline, extrudeSettings);
+    const geometry =  new THREE.ExtrudeGeometry(outline, extrudeSettings);
     return geometry;
       },
       src2: `
@@ -224,23 +224,23 @@ const extrudeSettings = {
   extrudePath: shape,
 };
 
-const geometry =  new THREE.ExtrudeBufferGeometry(outline, extrudeSettings);
+const geometry =  new THREE.ExtrudeGeometry(outline, extrudeSettings);
 return geometry;
       `,
     },
-    IcosahedronBufferGeometry: {
+    IcosahedronGeometry: {
       ui: {
         radius: { type: 'range', min: 1, max: 10, precision: 1, },
         detail: { type: 'range', min: 0, max: 5, precision: 0, },
       },
       create(radius = 7) {
-        return new THREE.IcosahedronBufferGeometry(radius);
+        return new THREE.IcosahedronGeometry(radius);
       },
       create2(radius = 7, detail = 2) {
-        return new THREE.IcosahedronBufferGeometry(radius, detail);
+        return new THREE.IcosahedronGeometry(radius, detail);
       },
     },
-    LatheBufferGeometry: {
+    LatheGeometry: {
       ui: {
         segments: { type: 'range', min: 1, max: 50, },
         phiStart: { type: 'range', min: 0, max: 2, mult: Math.PI },
@@ -251,30 +251,30 @@ return geometry;
         for (let i = 0; i < 10; ++i) {
           points.push(new THREE.Vector2(Math.sin(i * 0.2) * 3 + 3, (i - 5) * .8));
         }
-        return new THREE.LatheBufferGeometry(points);
+        return new THREE.LatheGeometry(points);
       },
       create2(segments = 12, phiStart = Math.PI * 0.25, phiLength = Math.PI * 1.5) {
         const points = [];
         for (let i = 0; i < 10; ++i) {
           points.push(new THREE.Vector2(Math.sin(i * 0.2) * 3 + 3, (i - 5) * .8));
         }
-        return new THREE.LatheBufferGeometry(
+        return new THREE.LatheGeometry(
             points, segments, phiStart, phiLength);
       },
     },
-    OctahedronBufferGeometry: {
+    OctahedronGeometry: {
       ui: {
         radius: { type: 'range', min: 1, max: 10, precision: 1, },
         detail: { type: 'range', min: 0, max: 5, precision: 0, },
       },
       create(radius = 7) {
-        return new THREE.OctahedronBufferGeometry(radius);
+        return new THREE.OctahedronGeometry(radius);
       },
       create2(radius = 7, detail = 2) {
-        return new THREE.OctahedronBufferGeometry(radius, detail);
+        return new THREE.OctahedronGeometry(radius, detail);
       },
     },
-    ParametricBufferGeometry: {
+    ParametricGeometry: {
       ui: {
         stacks: { type: 'range', min: 1, max: 50, },
         slices: { type: 'range', min: 1, max: 50, },
@@ -328,11 +328,11 @@ return geometry;
           target.set(x, y, z).multiplyScalar(0.75);
         }
 
-        return new THREE.ParametricBufferGeometry(
+        return new THREE.ParametricGeometry(
             klein, slices, stacks);
       },
     },
-    PlaneBufferGeometry: {
+    PlaneGeometry: {
       ui: {
         width: { type: 'range', min: 1, max: 10, precision: 1, },
         height: { type: 'range', min: 1, max: 10, precision: 1, },
@@ -340,15 +340,15 @@ return geometry;
         heightSegments: { type: 'range', min: 1, max: 10, },
       },
       create(width = 9, height = 9) {
-        return new THREE.PlaneBufferGeometry(width, height);
+        return new THREE.PlaneGeometry(width, height);
       },
       create2(width = 9, height = 9, widthSegments = 2, heightSegments = 2) {
-        return new THREE.PlaneBufferGeometry(
+        return new THREE.PlaneGeometry(
             width, height,
             widthSegments, heightSegments);
       },
     },
-    PolyhedronBufferGeometry: {
+    PolyhedronGeometry: {
       ui: {
         radius: { type: 'range', min: 1, max: 10, precision: 1, },
         detail: { type: 'range', min: 0, max: 5, precision: 0, },
@@ -366,11 +366,11 @@ return geometry;
             2, 3, 7,    7, 6, 2,
             4, 5, 6,    6, 7, 4,
         ];
-        return new THREE.PolyhedronBufferGeometry(
+        return new THREE.PolyhedronGeometry(
             verticesOfCube, indicesOfFaces, radius, detail);
       },
     },
-    RingBufferGeometry: {
+    RingGeometry: {
       ui: {
         innerRadius: { type: 'range', min: 1, max: 10, precision: 1, },
         outerRadius: { type: 'range', min: 1, max: 10, precision: 1, },
@@ -380,17 +380,17 @@ return geometry;
         thetaLength: { type: 'range', min: 0, max: 2, mult: Math.PI },
       },
       create(innerRadius = 2, outerRadius = 7, thetaSegments = 18) {
-        return new THREE.RingBufferGeometry(
+        return new THREE.RingGeometry(
             innerRadius, outerRadius, thetaSegments);
       },
       create2(innerRadius = 2, outerRadius = 7, thetaSegments = 18, phiSegments = 2, thetaStart = Math.PI * 0.25, thetaLength = Math.PI * 1.5) {
-        return new THREE.RingBufferGeometry(
+        return new THREE.RingGeometry(
             innerRadius, outerRadius,
             thetaSegments, phiSegments,
             thetaStart, thetaLength);
       },
     },
-    ShapeBufferGeometry: {
+    ShapeGeometry: {
       ui: {
         curveSegments: { type: 'range', min: 1, max: 30, },
       },
@@ -405,7 +405,7 @@ return geometry;
         shape.bezierCurveTo(x + 6, y + 7.7, x + 8, y + 4.5, x + 8, y + 3.5);
         shape.bezierCurveTo(x + 8, y + 3.5, x + 8, y, x + 5, y);
         shape.bezierCurveTo(x + 3.5, y, x + 2.5, y + 2.5, x + 2.5, y + 2.5);
-        return new THREE.ShapeBufferGeometry(shape);
+        return new THREE.ShapeGeometry(shape);
       },
       create2(curveSegments = 5) {
         const shape = new THREE.Shape();
@@ -418,10 +418,10 @@ return geometry;
         shape.bezierCurveTo(x + 6, y + 7.7, x + 8, y + 4.5, x + 8, y + 3.5);
         shape.bezierCurveTo(x + 8, y + 3.5, x + 8, y, x + 5, y);
         shape.bezierCurveTo(x + 3.5, y, x + 2.5, y + 2.5, x + 2.5, y + 2.5);
-        return new THREE.ShapeBufferGeometry(shape, curveSegments);
+        return new THREE.ShapeGeometry(shape, curveSegments);
       },
     },
-    SphereBufferGeometry: {
+    SphereGeometry: {
       ui: {
         radius: { type: 'range', min: 1, max: 10, precision: 1, },
         widthSegments: { type: 'range', min: 1, max: 30, },
@@ -432,29 +432,29 @@ return geometry;
         thetaLength: { type: 'range', min: 0, max: 1, mult: Math.PI },
       },
       create(radius = 7, widthSegments = 12, heightSegments = 8) {
-        return new THREE.SphereBufferGeometry(radius, widthSegments, heightSegments);
+        return new THREE.SphereGeometry(radius, widthSegments, heightSegments);
       },
       create2(radius = 7, widthSegments = 12, heightSegments = 8, phiStart = Math.PI * 0.25, phiLength = Math.PI * 1.5, thetaStart = Math.PI * 0.25, thetaLength = Math.PI * 0.5) {
-        return new THREE.SphereBufferGeometry(
+        return new THREE.SphereGeometry(
             radius,
             widthSegments, heightSegments,
             phiStart, phiLength,
             thetaStart, thetaLength);
       },
     },
-    TetrahedronBufferGeometry: {
+    TetrahedronGeometry: {
       ui: {
         radius: { type: 'range', min: 1, max: 10, precision: 1, },
         detail: { type: 'range', min: 0, max: 5, precision: 0, },
       },
       create(radius = 7) {
-        return new THREE.TetrahedronBufferGeometry(radius);
+        return new THREE.TetrahedronGeometry(radius);
       },
       create2(radius = 7, detail = 2) {
-        return new THREE.TetrahedronBufferGeometry(radius, detail);
+        return new THREE.TetrahedronGeometry(radius, detail);
       },
     },
-    TextBufferGeometry: {
+    TextGeometry: {
       ui: {
         text: { type: 'text', maxLength: 30, },
         size: { type: 'range', min: 1, max: 10, precision: 1, },
@@ -471,7 +471,7 @@ return geometry;
       create(text = 'three.js', size = 3, height = 0.2, curveSegments = 12, bevelEnabled = true, bevelThickness = 0.15, bevelSize = 0.3, bevelSegments = 5) {
         return new Promise((resolve) => {
           fontPromise.then((font) => {
-            resolve(new THREE.TextBufferGeometry(text, {
+            resolve(new THREE.TextGeometry(text, {
               font: font,
               size,
               height,
@@ -489,7 +489,7 @@ const loader = new THREE.FontLoader();
 
 loader.load('../resources/threejs/fonts/helvetiker_regular.typeface.json', (font) => {
   const text = 'three.js';  // ui: text
-  const geometry = new THREE.TextBufferGeometry(text, {
+  const geometry = new THREE.TextGeometry(text, {
     font: font,
     size: 3,  // ui: size
     height: 0.2,  // ui: height
@@ -503,7 +503,7 @@ loader.load('../resources/threejs/fonts/helvetiker_regular.typeface.json', (font
 });
       `,
     },
-    TorusBufferGeometry: {
+    TorusGeometry: {
       ui: {
         radius: { type: 'range', min: 1, max: 10, precision: 1, },
         tubeRadius: { type: 'range', min: 1, max: 10, precision: 1, },
@@ -511,12 +511,12 @@ loader.load('../resources/threejs/fonts/helvetiker_regular.typeface.json', (font
         tubularSegments: { type: 'range', min: 1, max: 100, },
       },
       create(radius = 5, tubeRadius = 2, radialSegments = 8, tubularSegments = 24) {
-        return new THREE.TorusBufferGeometry(
+        return new THREE.TorusGeometry(
             radius, tubeRadius,
             radialSegments, tubularSegments);
       },
     },
-    TorusKnotBufferGeometry: {
+    TorusKnotGeometry: {
       ui: {
         radius: { type: 'range', min: 1, max: 10, precision: 1, },
         tubeRadius: { type: 'range', min: 1, max: 10, precision: 1, },
@@ -526,11 +526,11 @@ loader.load('../resources/threejs/fonts/helvetiker_regular.typeface.json', (font
         q: { type: 'range', min: 1, max: 20, },
       },
       create(radius = 3.5, tubeRadius = 1.5, radialSegments = 8, tubularSegments = 64, p = 2, q = 3) {
-        return new THREE.TorusKnotBufferGeometry(
+        return new THREE.TorusKnotGeometry(
             radius, tubeRadius, tubularSegments, radialSegments, p, q);
       },
     },
-    TubeBufferGeometry: {
+    TubeGeometry: {
       ui: {
         tubularSegments: { type: 'range', min: 1, max: 100, },
         radius: { type: 'range', min: 1, max: 10, precision: 1, },
@@ -552,7 +552,7 @@ loader.load('../resources/threejs/fonts/helvetiker_regular.typeface.json', (font
         }
 
         const path = new CustomSinCurve(4);
-        return new THREE.TubeBufferGeometry(
+        return new THREE.TubeGeometry(
             path, tubularSegments, radius, radialSegments, closed);
       },
     },
@@ -563,23 +563,22 @@ loader.load('../resources/threejs/fonts/helvetiker_regular.typeface.json', (font
       create() {
         return {
           lineGeometry: new THREE.EdgesGeometry(
-            new THREE.BoxBufferGeometry(8, 8, 8)),
+            new THREE.BoxGeometry(8, 8, 8)),
         };
       },
       create2(thresholdAngle = 1) {
         return {
           lineGeometry: new THREE.EdgesGeometry(
-            new THREE.SphereBufferGeometry(7, 6, 3), thresholdAngle),
+            new THREE.SphereGeometry(7, 6, 3), thresholdAngle),
         };
       },
-      nonBuffer: false,
       addConstCode: false,
       src: `
 const size = 8;
 const widthSegments = 2;
 const heightSegments = 2;
 const depthSegments = 2;
-const boxGeometry = new THREE.BoxBufferGeometry(
+const boxGeometry = new THREE.BoxGeometry(
     size, size, size,
     widthSegments, heightSegments, depthSegments);
 const geometry = new THREE.EdgesGeometry(boxGeometry);
@@ -588,7 +587,7 @@ const geometry = new THREE.EdgesGeometry(boxGeometry);
 const radius = 7;
 const widthSegments = 6;
 const heightSegments = 3;
-const sphereGeometry = new THREE.SphereBufferGeometry(
+const sphereGeometry = new THREE.SphereGeometry(
     radius, widthSegments, heightSegments);
 const thresholdAngle = 1;  // ui: thresholdAngle
 const geometry = new THREE.EdgesGeometry(sphereGeometry, thresholdAngle);
@@ -603,12 +602,11 @@ const geometry = new THREE.EdgesGeometry(sphereGeometry, thresholdAngle);
       create(widthSegments = 2, heightSegments = 2, depthSegments = 2) {
         const size = 8;
         return {
-          lineGeometry: new THREE.WireframeGeometry(new THREE.BoxBufferGeometry(
+          lineGeometry: new THREE.WireframeGeometry(new THREE.BoxGeometry(
             size, size, size,
             widthSegments, heightSegments, depthSegments)),
         };
       },
-      nonBuffer: false,
       addConstCode: false,
       src: `
 const size = 8;
@@ -616,7 +614,7 @@ const widthSegments = 2;  // ui: widthSegments
 const heightSegments = 2;  // ui: heightSegments
 const depthSegments = 2;  // ui: depthSegments
 const geometry = new THREE.WireframeGeometry(
-    new THREE.BoxBufferGeometry(
+    new THREE.BoxGeometry(
       size, size, size,
       widthSegments, heightSegments, depthSegments));
 `,
@@ -626,7 +624,7 @@ const geometry = new THREE.WireframeGeometry(
         const radius = 7;
         const widthSegments = 12;
         const heightSegments = 8;
-        const geometry = new THREE.SphereBufferGeometry(radius, widthSegments, heightSegments);
+        const geometry = new THREE.SphereGeometry(radius, widthSegments, heightSegments);
         const material = new THREE.PointsMaterial({
             color: 'red',
             size: 0.2,
@@ -643,7 +641,7 @@ const geometry = new THREE.WireframeGeometry(
         const radius = 7;
         const widthSegments = 12;
         const heightSegments = 8;
-        const geometry = new THREE.SphereBufferGeometry(radius, widthSegments, heightSegments);
+        const geometry = new THREE.SphereGeometry(radius, widthSegments, heightSegments);
         const material = new THREE.PointsMaterial({
             color: 'red',
             size: 3 * window.devicePixelRatio,
@@ -656,50 +654,50 @@ const geometry = new THREE.WireframeGeometry(
         };
       },
     },
-    SphereBufferGeometryLow: {
+    SphereGeometryLow: {
       create(radius = 7, widthSegments = 5, heightSegments = 3) {
-        return new THREE.SphereBufferGeometry(radius, widthSegments, heightSegments);
+        return new THREE.SphereGeometry(radius, widthSegments, heightSegments);
       },
     },
-    SphereBufferGeometryMedium: {
+    SphereGeometryMedium: {
       create(radius = 7, widthSegments = 24, heightSegments = 10) {
-        return new THREE.SphereBufferGeometry(radius, widthSegments, heightSegments);
+        return new THREE.SphereGeometry(radius, widthSegments, heightSegments);
       },
     },
-    SphereBufferGeometryHigh: {
+    SphereGeometryHigh: {
       create(radius = 7, widthSegments = 50, heightSegments = 50) {
-        return new THREE.SphereBufferGeometry(radius, widthSegments, heightSegments);
+        return new THREE.SphereGeometry(radius, widthSegments, heightSegments);
       },
     },
-    SphereBufferGeometryLowSmooth: {
+    SphereGeometryLowSmooth: {
       create(radius = 7, widthSegments = 5, heightSegments = 3) {
-        return new THREE.SphereBufferGeometry(radius, widthSegments, heightSegments);
+        return new THREE.SphereGeometry(radius, widthSegments, heightSegments);
       },
       showLines: false,
       flatShading: false,
     },
-    SphereBufferGeometryMediumSmooth: {
+    SphereGeometryMediumSmooth: {
       create(radius = 7, widthSegments = 24, heightSegments = 10) {
-        return new THREE.SphereBufferGeometry(radius, widthSegments, heightSegments);
+        return new THREE.SphereGeometry(radius, widthSegments, heightSegments);
       },
       showLines: false,
       flatShading: false,
     },
-    SphereBufferGeometryHighSmooth: {
+    SphereGeometryHighSmooth: {
       create(radius = 7, widthSegments = 50, heightSegments = 50) {
-        return new THREE.SphereBufferGeometry(radius, widthSegments, heightSegments);
+        return new THREE.SphereGeometry(radius, widthSegments, heightSegments);
       },
       showLines: false,
       flatShading: false,
     },
-    PlaneBufferGeometryLow: {
+    PlaneGeometryLow: {
       create(width = 9, height = 9, widthSegments = 1, heightSegments = 1) {
-        return new THREE.PlaneBufferGeometry(width, height, widthSegments, heightSegments);
+        return new THREE.PlaneGeometry(width, height, widthSegments, heightSegments);
       },
     },
-    PlaneBufferGeometryHigh: {
+    PlaneGeometryHigh: {
       create(width = 9, height = 9, widthSegments = 10, heightSegments = 10) {
-        return new THREE.PlaneBufferGeometry(width, height, widthSegments, heightSegments);
+        return new THREE.PlaneGeometry(width, height, widthSegments, heightSegments);
       },
     },
   };
@@ -753,10 +751,6 @@ const geometry = new THREE.WireframeGeometry(
     const right = addDiv(pair, 'desc');
     addDeepLink(right, '#', `#${base.id}`);
     addLink(right, name);
-    if (info.nonBuffer !== false) {
-      addElem(right, 'span', '', ', ');
-      addLink(right, name.replace('Buffer', ''));
-    }
     addDiv(right, '.note').innerHTML = text;
 
     // I get that this is super brittle. I think I'd have to

+ 33 - 61
threejs/lessons/ru/threejs-primitives.md

@@ -18,59 +18,31 @@ Three.js имеет большое количество примитивов. П
 создание и загрузку данных из нескольких программ 3D-моделирования. 
 А сейчас давайте рассмотрим некоторые из доступных примитивов.
 
-<div id="Diagram-BoxBufferGeometry" data-primitive="BoxBufferGeometry">Прямоугольный параллелепипед</div>
-<div id="Diagram-CircleBufferGeometry" data-primitive="CircleBufferGeometry">Круг</div>
-<div id="Diagram-ConeBufferGeometry" data-primitive="ConeBufferGeometry">Конус</div>
-<div id="Diagram-CylinderBufferGeometry" data-primitive="CylinderBufferGeometry">Цилиндр</div>
-<div id="Diagram-DodecahedronBufferGeometry" data-primitive="DodecahedronBufferGeometry">Додекаэдр (12 граней)</div>
-<div id="Diagram-ExtrudeBufferGeometry" data-primitive="ExtrudeBufferGeometry">Выдавленная 2d фигура с скругленными краями.
+<div id="Diagram-BoxGeometry" data-primitive="BoxGeometry">Прямоугольный параллелепипед</div>
+<div id="Diagram-CircleGeometry" data-primitive="CircleGeometry">Круг</div>
+<div id="Diagram-ConeGeometry" data-primitive="ConeGeometry">Конус</div>
+<div id="Diagram-CylinderGeometry" data-primitive="CylinderGeometry">Цилиндр</div>
+<div id="Diagram-DodecahedronGeometry" data-primitive="DodecahedronGeometry">Додекаэдр (12 граней)</div>
+<div id="Diagram-ExtrudeGeometry" data-primitive="ExtrudeGeometry">Выдавленная 2d фигура с скругленными краями.
 Здесь мы выдавливаем форму сердца. Обратите внимание, это основа 
-для <code>TextBufferGeometry</code> и <code>TextGeometry</code> соответственно.</div>
-<div id="Diagram-IcosahedronBufferGeometry" data-primitive="IcosahedronBufferGeometry">Икосаэдр (20 граней)</div>
-<div id="Diagram-LatheBufferGeometry" data-primitive="LatheBufferGeometry">Форма, созданная вращением линии. Например, лампы, кегли для боулинга, свечи, подсвечники, бокалы для вина, стаканы для питья и т. Д. Вы указываете 2-мерный силуэт в виде серии точек, а затем указываете three.js , сколько секций нужно сделать, когда он вращает силуэт вокруг оси.</div>
-<div id="Diagram-OctahedronBufferGeometry" data-primitive="OctahedronBufferGeometry">Октаэдр (8 граней)</div>
-<div id="Diagram-ParametricBufferGeometry" data-primitive="ParametricBufferGeometry">Поверхность, созданная путем предоставления функции, которая берет 2d точку из сетки и возвращает соответствующую 3d точку.</div>
-<div id="Diagram-PlaneBufferGeometry" data-primitive="PlaneBufferGeometry">2D плоскость</div>
-<div id="Diagram-PolyhedronBufferGeometry" data-primitive="PolyhedronBufferGeometry">Берет набор треугольников с центром вокруг точки и проецирует их на сферу</div>
-<div id="Diagram-RingBufferGeometry" data-primitive="RingBufferGeometry">2D диск с отверстием в центре</div>
-<div id="Diagram-ShapeBufferGeometry" data-primitive="ShapeBufferGeometry">2D контур, который строится из треугольников</div>
-<div id="Diagram-SphereBufferGeometry" data-primitive="SphereBufferGeometry">Сфера</div>
-<div id="Diagram-TetrahedronBufferGeometry" data-primitive="TetrahedronBufferGeometry">Тераэдр (4 грани)</div>
-<div id="Diagram-TextBufferGeometry" data-primitive="TextBufferGeometry">3D-текст, сгенерированный из 3D-шрифта и строки</div>
-<div id="Diagram-TorusBufferGeometry" data-primitive="TorusBufferGeometry">Тор (пончик)</div>
-<div id="Diagram-TorusKnotBufferGeometry" data-primitive="TorusKnotBufferGeometry">Торический узел</div>
-<div id="Diagram-TubeBufferGeometry" data-primitive="TubeBufferGeometry">Труба - круг проходящий путь</div>
+для <code>TextGeometry</code> и <code>TextGeometry</code> соответственно.</div>
+<div id="Diagram-IcosahedronGeometry" data-primitive="IcosahedronGeometry">Икосаэдр (20 граней)</div>
+<div id="Diagram-LatheGeometry" data-primitive="LatheGeometry">Форма, созданная вращением линии. Например, лампы, кегли для боулинга, свечи, подсвечники, бокалы для вина, стаканы для питья и т. Д. Вы указываете 2-мерный силуэт в виде серии точек, а затем указываете three.js , сколько секций нужно сделать, когда он вращает силуэт вокруг оси.</div>
+<div id="Diagram-OctahedronGeometry" data-primitive="OctahedronGeometry">Октаэдр (8 граней)</div>
+<div id="Diagram-ParametricGeometry" data-primitive="ParametricGeometry">Поверхность, созданная путем предоставления функции, которая берет 2d точку из сетки и возвращает соответствующую 3d точку.</div>
+<div id="Diagram-PlaneGeometry" data-primitive="PlaneGeometry">2D плоскость</div>
+<div id="Diagram-PolyhedronGeometry" data-primitive="PolyhedronGeometry">Берет набор треугольников с центром вокруг точки и проецирует их на сферу</div>
+<div id="Diagram-RingGeometry" data-primitive="RingGeometry">2D диск с отверстием в центре</div>
+<div id="Diagram-ShapeGeometry" data-primitive="ShapeGeometry">2D контур, который строится из треугольников</div>
+<div id="Diagram-SphereGeometry" data-primitive="SphereGeometry">Сфера</div>
+<div id="Diagram-TetrahedronGeometry" data-primitive="TetrahedronGeometry">Тераэдр (4 грани)</div>
+<div id="Diagram-TextGeometry" data-primitive="TextGeometry">3D-текст, сгенерированный из 3D-шрифта и строки</div>
+<div id="Diagram-TorusGeometry" data-primitive="TorusGeometry">Тор (пончик)</div>
+<div id="Diagram-TorusKnotGeometry" data-primitive="TorusKnotGeometry">Торический узел</div>
+<div id="Diagram-TubeGeometry" data-primitive="TubeGeometry">Труба - круг проходящий путь</div>
 <div id="Diagram-EdgesGeometry" data-primitive="EdgesGeometry">Вспомогательный объект, который принимает другую геометрию в качестве входных данных и генерирует ребра, только если угол между гранями больше некоторого порога. Например, если вы посмотрите на прямоугольник сверху, он показывает линию, проходящую через каждую грань, показывая каждый треугольник, из которого состоит прямоугольник. Используя EdgesGeometry, вместо этого удаляются средние линии.</div>
 <div id="Diagram-WireframeGeometry" data-primitive="WireframeGeometry">Создает геометрию, которая содержит один отрезок (2 точки) на ребро в заданной геометрии. Без этого вы часто теряете ребра или получаете дополнительные ребра, поскольку WebGL обычно требует 2 точки на отрезок. Например, если бы у вас был только один треугольник, было бы только 3 очка. Если вы попытаетесь нарисовать его, используя материал с <code>wireframe: true</code> вы получите только одну линию. А передача этой triangle geometry в <code>WireframeGeometry</code> создаст новую геометрию, которая имеет 3 отрезка линий, используя 6 точек..</div>
 
-Вы можете заметить, что большинство из них приходят парами `Geometry` 
-или `BufferGeometry`. Разница между этими двумя типами заключается 
-в гибкости и производительности.
-
-`BufferGeometry` основанные на примитивах типы ориентированы на производительность. 
-Вершины для геометрии генерируются непосредственно в эффективный формат 
-типизированного массива, готовый для загрузки в графический процессор 
-для рендеринга. Это означает, что они быстрее запускаются и занимают 
-меньше памяти, но если вы хотите изменить их данные, они берут то, 
-что часто считается более сложным программированием для манипулирования.
-
-`Geometry` основанные на примитивах являются более гибкими, легче манипулировать типом. 
-Они построены на основе классов JavaScript, таких как `Vector3` для 3D-точки, `Face3` 
-для треугольников. Они занимают немного памяти, и прежде чем их можно будет отобразить, 
-нужно будет преобразовать их во что-то похожее на соответствующее 
-`BufferGeometry` представление.
-
-Если вы знаете, что не собираетесь манипулировать примитивом или если вам удобно 
-выполнять математику на прямую, чтобы манипулировать их внутренностями, то лучше 
-использовать основанные на `BufferGeometry` примитивы. 
-Если, с другой стороны, вы хотите изменить некоторые вещи перед рендерингом, 
-вам может быть проще работать с примитивами основанными на `Geometry`.
-
-В качестве простого примера в `BufferGeometry` не могут быть легко добавлены новые вершины.
-Количество используемых вершин определяется во время создания, создается 
-хранилище, а затем заполняются данные для вершин. В то время как с `Geometry` 
-вы можете добавлять вершины по мере необходимости.
-
 Мы рассмотрим создание пользовательской геометрии в другой статье. 
 А пока давайте создадим пример создания каждого типа примитива. 
 Начнем с [примеров из предыдущей статьи](threejs-responsive.html).
@@ -145,7 +117,7 @@ function createMaterial() {
 такой как сфера или куб, обычно нет причин рисовать 
 задние стороны треугольников, поскольку все они обращены 
 внутрь фигуры. В нашем случае мы рисуем несколько вещей, 
-таких как  `PlaneBufferGeometry` и `ShapeBufferGeometry`
+таких как  `PlaneGeometry` и `ShapeGeometry`
 которые являются двухмерными и поэтому не имеют внутренней 
 части. Без установки `side: THREE.DoubleSide` они исчезнут,
 при взгляде на их задние стороны.
@@ -175,7 +147,7 @@ function addSolidGeometry(x, y, geometry) {
   const width = 8;
   const height = 8;
   const depth = 8;
-  addSolidGeometry(-2, -2, new THREE.BoxBufferGeometry(width, height, depth));
+  addSolidGeometry(-2, -2, new THREE.BoxGeometry(width, height, depth));
 }
 ```
 
@@ -187,7 +159,7 @@ function addSolidGeometry(x, y, geometry) {
 {{{example url="../threejs-primitives.html" }}}
 
 Есть несколько заметных исключений из шаблона выше. 
-Самым большим, вероятно, является `TextBufferGeometry`. Он должен 
+Самым большим, вероятно, является `TextGeometry`. Он должен 
 загрузить данные 3D шрифта, прежде чем он сможет сгенерировать 
 сетку для текста. Эти данные загружаются асинхронно, поэтому 
 нам нужно дождаться их загрузки, прежде чем пытаться создать 
@@ -201,7 +173,7 @@ function addSolidGeometry(x, y, geometry) {
 {
   const loader = new THREE.FontLoader();
   loader.load('../resources/threejs/fonts/helvetiker_regular.typeface.json', (font) => {
-    const geometry = new THREE.TextBufferGeometry('three.js', {
+    const geometry = new THREE.TextGeometry('three.js', {
       font: font,
       size: 3.0,
       height: .2,
@@ -279,9 +251,9 @@ function addLineGeometry(x, y, geometry) {
 Например
 
 <div class="spread">
-<div data-diagram="SphereBufferGeometryLow"></div>
-<div data-diagram="SphereBufferGeometryMedium"></div>
-<div data-diagram="SphereBufferGeometryHigh"></div>
+<div data-diagram="SphereGeometryLow"></div>
+<div data-diagram="SphereGeometryMedium"></div>
+<div data-diagram="SphereGeometryHigh"></div>
 </div>
 
 Первая сфера имеет 5 сегментов вокруг и 3 высоты, что составляет 15 сегментов 
@@ -294,9 +266,9 @@ function addLineGeometry(x, y, geometry) {
 и мы получим это
 
 <div class="spread">
-<div data-diagram="SphereBufferGeometryLowSmooth"></div>
-<div data-diagram="SphereBufferGeometryMediumSmooth"></div>
-<div data-diagram="SphereBufferGeometryHighSmooth"></div>
+<div data-diagram="SphereGeometryLowSmooth"></div>
+<div data-diagram="SphereGeometryMediumSmooth"></div>
+<div data-diagram="SphereGeometryHighSmooth"></div>
 </div>
 
 Сейчас не очень понятно, что тот, который справа с 5000 треугольниками, 
@@ -312,8 +284,8 @@ function addLineGeometry(x, y, geometry) {
 Иногда выбрать легко. Например, вы можете выбрать разделение для плоскости.
 
 <div class="spread">
-<div data-diagram="PlaneBufferGeometryLow"></div>
-<div data-diagram="PlaneBufferGeometryHigh"></div>
+<div data-diagram="PlaneGeometryLow"></div>
+<div data-diagram="PlaneGeometryHigh"></div>
 </div>
 
 Плоскость слева - это 2 треугольника. Плоскость справа - это 200 треугольников. 

+ 37 - 68
threejs/lessons/threejs-primitives.md

@@ -24,62 +24,32 @@ primitives.
 Many of the primitives below have defaults for some or all of their
 parameters so you can use more or less depending on your needs.
 
-<div id="Diagram-BoxBufferGeometry" data-primitive="BoxBufferGeometry">A Box</div>
-<div id="Diagram-CircleBufferGeometry" data-primitive="CircleBufferGeometry">A flat circle</div>
-<div id="Diagram-ConeBufferGeometry" data-primitive="ConeBufferGeometry">A Cone</div>
-<div id="Diagram-CylinderBufferGeometry" data-primitive="CylinderBufferGeometry">A Cylinder</div>
-<div id="Diagram-DodecahedronBufferGeometry" data-primitive="DodecahedronBufferGeometry">A dodecahedron (12 sides)</div>
-<div id="Diagram-ExtrudeBufferGeometry" data-primitive="ExtrudeBufferGeometry">An extruded 2d shape with optional bevelling.
+<div id="Diagram-BoxGeometry" data-primitive="BoxGeometry">A Box</div>
+<div id="Diagram-CircleGeometry" data-primitive="CircleGeometry">A flat circle</div>
+<div id="Diagram-ConeGeometry" data-primitive="ConeGeometry">A Cone</div>
+<div id="Diagram-CylinderGeometry" data-primitive="CylinderGeometry">A Cylinder</div>
+<div id="Diagram-DodecahedronGeometry" data-primitive="DodecahedronGeometry">A dodecahedron (12 sides)</div>
+<div id="Diagram-ExtrudeGeometry" data-primitive="ExtrudeGeometry">An extruded 2d shape with optional bevelling.
 Here we are extruding a heart shape. Note this is the basis
-for <code>TextBufferGeometry</code> and <code>TextGeometry</code> respectively.</div>
-<div id="Diagram-IcosahedronBufferGeometry" data-primitive="IcosahedronBufferGeometry">An icosahedron (20 sides)</div>
-<div id="Diagram-LatheBufferGeometry" data-primitive="LatheBufferGeometry">A shape generated by spinning a line. Examples would be: lamps, bowling pins, candles, candle holders, wine glasses, drinking glasses, etc... You provide the 2d silhouette as series of points and then tell three.js how many subdivisions to make as it spins the silhouette around an axis.</div>
-<div id="Diagram-OctahedronBufferGeometry" data-primitive="OctahedronBufferGeometry">An Octahedron (8 sides)</div>
-<div id="Diagram-ParametricBufferGeometry" data-primitive="ParametricBufferGeometry">A surface generated by providing a function that takes a 2D point from a grid and returns the corresponding 3d point.</div>
-<div id="Diagram-PlaneBufferGeometry" data-primitive="PlaneBufferGeometry">A 2D plane</div>
-<div id="Diagram-PolyhedronBufferGeometry" data-primitive="PolyhedronBufferGeometry">Takes a set of triangles centered around a point and projects them onto a sphere</div>
-<div id="Diagram-RingBufferGeometry" data-primitive="RingBufferGeometry">A 2D disc with a hole in the center</div>
-<div id="Diagram-ShapeBufferGeometry" data-primitive="ShapeBufferGeometry">A 2D outline that gets triangulated</div>
-<div id="Diagram-SphereBufferGeometry" data-primitive="SphereBufferGeometry">A sphere</div>
-<div id="Diagram-TetrahedronBufferGeometry" data-primitive="TetrahedronBufferGeometry">A tetrahedron (4 sides)</div>
-<div id="Diagram-TextBufferGeometry" data-primitive="TextBufferGeometry">3D text generated from a 3D font and a string</div>
-<div id="Diagram-TorusBufferGeometry" data-primitive="TorusBufferGeometry">A torus (donut)</div>
-<div id="Diagram-TorusKnotBufferGeometry" data-primitive="TorusKnotBufferGeometry">A torus knot</div>
-<div id="Diagram-TubeBufferGeometry" data-primitive="TubeBufferGeometry">A circle traced down a path</div>
+for <code>TextGeometry</code> and <code>TextGeometry</code> respectively.</div>
+<div id="Diagram-IcosahedronGeometry" data-primitive="IcosahedronGeometry">An icosahedron (20 sides)</div>
+<div id="Diagram-LatheGeometry" data-primitive="LatheGeometry">A shape generated by spinning a line. Examples would be: lamps, bowling pins, candles, candle holders, wine glasses, drinking glasses, etc... You provide the 2d silhouette as series of points and then tell three.js how many subdivisions to make as it spins the silhouette around an axis.</div>
+<div id="Diagram-OctahedronGeometry" data-primitive="OctahedronGeometry">An Octahedron (8 sides)</div>
+<div id="Diagram-ParametricGeometry" data-primitive="ParametricGeometry">A surface generated by providing a function that takes a 2D point from a grid and returns the corresponding 3d point.</div>
+<div id="Diagram-PlaneGeometry" data-primitive="PlaneGeometry">A 2D plane</div>
+<div id="Diagram-PolyhedronGeometry" data-primitive="PolyhedronGeometry">Takes a set of triangles centered around a point and projects them onto a sphere</div>
+<div id="Diagram-RingGeometry" data-primitive="RingGeometry">A 2D disc with a hole in the center</div>
+<div id="Diagram-ShapeGeometry" data-primitive="ShapeGeometry">A 2D outline that gets triangulated</div>
+<div id="Diagram-SphereGeometry" data-primitive="SphereGeometry">A sphere</div>
+<div id="Diagram-TetrahedronGeometry" data-primitive="TetrahedronGeometry">A tetrahedron (4 sides)</div>
+<div id="Diagram-TextGeometry" data-primitive="TextGeometry">3D text generated from a 3D font and a string</div>
+<div id="Diagram-TorusGeometry" data-primitive="TorusGeometry">A torus (donut)</div>
+<div id="Diagram-TorusKnotGeometry" data-primitive="TorusKnotGeometry">A torus knot</div>
+<div id="Diagram-TubeGeometry" data-primitive="TubeGeometry">A circle traced down a path</div>
 <div id="Diagram-EdgesGeometry" data-primitive="EdgesGeometry">A helper object that takes another geometry as input and generates edges only if the angle between faces is greater than some threshold. For example if you look at the box at the top it shows a line going through each face showing every triangle that makes the box. Using an <code>EdgesGeometry</code> instead the middle lines are removed. Adjust the thresholdAngle below and you'll see the edges below that threshold disappear.</div>
 <div id="Diagram-WireframeGeometry" data-primitive="WireframeGeometry">Generates geometry that contains one line segment (2 points) per edge in the given geometry. Without this you'd often be missing edges or get extra edges since WebGL generally requires 2 points per line segment. For example if all you had was a single triangle there would only be 3 points. If you tried to draw it using a material with <code>wireframe: true</code> you would only get a single line. Passing that triangle geometry to a <code>WireframeGeometry</code> will generate a new geometry that has 3 lines segments using 6 points..</div>
 
-You might notice of most of them come in pairs of `Geometry`
-or `BufferGeometry`. The difference between the 2 types is effectively flexibility
-vs performance.
-
-`BufferGeometry` based primitives are the performance oriented
-types. The vertices for the geometry are generated directly
-into an efficient typed array format ready to be uploaded to the GPU
-for rendering. This means they are faster to start up
-and take less memory but if you want to modify their
-data they take what is often considered more complex
-programming to manipulate.
-
-`Geometry` based primitives are the more flexible, easier to manipulate
-type. They are built from JavaScript based classes like `Vector3` for
-3D points, `Face3` for triangles.
-They take quite a bit of memory and before they can be rendered three.js will need to
-convert them to something similar to the corresponding `BufferGeometry` representation.
-
-If you know you are not going to manipulate a primitive or
-if you're comfortable doing the math to manipulate their
-internals then it's best to go with the `BufferGeometry`
-based primitives. If on the other hand you want to change
-a few things before rendering you might find the `Geometry`
-based primitives easier to deal with.
-
-As an simple example a `BufferGeometry`
-can not have new vertices easily added. The number of vertices used is
-decided at creation time, storage is created, and then data for vertices
-are filled in. Whereas for `Geometry` you can add vertices as you go.
-
-We'll go over creating custom geometry in [another article](threejs-custom-geometry.html). For now
+We'll go over creating custom geometry in [another article](threejs-custom-buffergeometry.html). For now
 let's make an example creating each type of primitive. We'll start
 with the [examples from the previous article](threejs-responsive.html).
 
@@ -158,7 +128,7 @@ that make up a shape. For a solid shape like a sphere
 or a cube there's usually no reason to draw the
 back sides of triangles as they all face inside the
 shape. In our case though we are drawing a few things
-like the `PlaneBufferGeometry` and the `ShapeBufferGeometry`
+like the `PlaneGeometry` and the `ShapeGeometry`
 which are 2 dimensional and so have no inside. Without
 setting `side: THREE.DoubleSide` they would disappear
 when looking at their back sides.
@@ -189,7 +159,7 @@ For example creating a box
   const width = 8;
   const height = 8;
   const depth = 8;
-  addSolidGeometry(-2, -2, new THREE.BoxBufferGeometry(width, height, depth));
+  addSolidGeometry(-2, -2, new THREE.BoxGeometry(width, height, depth));
 }
 ```
 
@@ -200,7 +170,7 @@ Here's the result:
 {{{example url="../threejs-primitives.html" }}}
 
 There are a couple of notable exceptions to the pattern above.
-The biggest is probably the `TextBufferGeometry`. It needs to load
+The biggest is probably the `TextGeometry`. It needs to load
 3D font data before it can generate a mesh for the text.
 That data loads asynchronously so we need to wait for it
 to load before trying to create the geometry. By promisifiying 
@@ -222,7 +192,7 @@ And finally create the geometry and call `addObject` to add it the scene.
 
   async function doit() {
     const font = await loadFont('resources/threejs/fonts/helvetiker_regular.typeface.json');  /* threejsfundamentals: url */
-    const geometry = new THREE.TextBufferGeometry('three.js', {
+    const geometry = new THREE.TextGeometry('three.js', {
       font: font,
       size: 3.0,
       height: .2,
@@ -297,7 +267,7 @@ to take you directly to the docs for that shape.
 
 There is one other pair of classes that doesn't really fit the patterns above. Those are
 the `PointsMaterial` and the `Points` class. `Points` is like `LineSegments` above in that it takes a
-a `Geometry` or `BufferGeometry` but draws points at each vertex instead of lines.
+a `BufferGeometry` but draws points at each vertex instead of lines.
 To use it you also need to pass it a `PointsMaterial` which
 take a [`size`](PointsMaterial.size) for how large to make the points.
 
@@ -305,7 +275,7 @@ take a [`size`](PointsMaterial.size) for how large to make the points.
 const radius = 7;
 const widthSegments = 12;
 const heightSegments = 8;
-const geometry = new THREE.SphereBufferGeometry(radius, widthSegments, heightSegments);
+const geometry = new THREE.SphereGeometry(radius, widthSegments, heightSegments);
 const material = new THREE.PointsMaterial({
     color: 'red',
     size: 0.2,     // in world units
@@ -341,9 +311,9 @@ might be the sphere geometries. Spheres take parameters for
 how many divisions to make around and how many top to bottom. For example
 
 <div class="spread">
-<div data-diagram="SphereBufferGeometryLow"></div>
-<div data-diagram="SphereBufferGeometryMedium"></div>
-<div data-diagram="SphereBufferGeometryHigh"></div>
+<div data-diagram="SphereGeometryLow"></div>
+<div data-diagram="SphereGeometryMedium"></div>
+<div data-diagram="SphereGeometryHigh"></div>
 </div>
 
 The first sphere has 5 segments around and 3 high which is 15 segments
@@ -355,9 +325,9 @@ look like you need a high number of segments but remove the lines
 and the flat shading and we get this
 
 <div class="spread">
-<div data-diagram="SphereBufferGeometryLowSmooth"></div>
-<div data-diagram="SphereBufferGeometryMediumSmooth"></div>
-<div data-diagram="SphereBufferGeometryHighSmooth"></div>
+<div data-diagram="SphereGeometryLowSmooth"></div>
+<div data-diagram="SphereGeometryMediumSmooth"></div>
+<div data-diagram="SphereGeometryHighSmooth"></div>
 </div>
 
 It's now not so clear that the one on the right with 5000 triangles
@@ -374,8 +344,8 @@ Sometimes it's easy to choose. For example you can also choose
 to subdivide a plane.
 
 <div class="spread">
-<div data-diagram="PlaneBufferGeometryLow"></div>
-<div data-diagram="PlaneBufferGeometryHigh"></div>
+<div data-diagram="PlaneGeometryLow"></div>
+<div data-diagram="PlaneGeometryHigh"></div>
 </div>
 
 The plane on the left is 2 triangles. The plane on the right
@@ -392,8 +362,7 @@ tradeoff is for your particular situation.
 If none of the shapes above fit your use case you can load
 geometry for example from a [.obj file](threejs-load-obj.html)
 or a [.gltf file](threejs-load-gltf.html). 
-You can also create your own [custom Geometry](threejs-custom-geometry.html) 
-or [custom BufferGeometry](threejs-custom-buffergeometry.html).
+You can also create your own [custom BufferGeometry](threejs-custom-buffergeometry.html).
 
 Next up let's go over [how three's scene graph works and how
 to use it](threejs-scenegraph.html).

+ 36 - 36
threejs/lessons/zh_cn/threejs-primitives.md

@@ -18,27 +18,27 @@ Three.js 有很多图元。图元就是一些 3D 的形状,在运行时根据
 下面的很多图元都有默认的部分或者全部参数,所以可以根据你的需要选择使用。
 
 
-<div id="Diagram-BoxBufferGeometry" data-primitive="BoxBufferGeometry">盒子</div>
-<div id="Diagram-CircleBufferGeometry" data-primitive="CircleBufferGeometry">平面圆</div>
-<div id="Diagram-ConeBufferGeometry" data-primitive="ConeBufferGeometry">锥形</div>
-<div id="Diagram-CylinderBufferGeometry" data-primitive="CylinderBufferGeometry">圆柱</div>
-<div id="Diagram-DodecahedronBufferGeometry" data-primitive="DodecahedronBufferGeometry">十二面体</div>
-<div id="Diagram-ExtrudeBufferGeometry" data-primitive="ExtrudeBufferGeometry">受挤压的 2D 形状,及可选的斜切。
-这里我们挤压了一个心型。注意,这分别是 <code>TextBufferGeometry</code> 和 <code>TextGeometry</code> 的基础。<div>
-<div id="Diagram-IcosahedronBufferGeometry" data-primitive="IcosahedronBufferGeometry">二十面体</div>
-<div id="Diagram-LatheBufferGeometry" data-primitive="LatheBufferGeometry">绕着一条线旋转形成的形状。例如:灯泡、保龄球瓶、蜡烛、蜡烛台、酒瓶、玻璃杯等。你提供一系列点作为 2D 轮廓,并告诉 Three.js 沿着某条轴旋转时需要将侧面分成多少块。</div>
-<div id="Diagram-OctahedronBufferGeometry" data-primitive="OctahedronBufferGeometry">八面体</div>
-<div id="Diagram-ParametricBufferGeometry" data-primitive="ParametricBufferGeometry">通过提供一个函数(将网格中 2D 的点转成对应的 3D 点)生成的表面。</div>
-<div id="Diagram-PlaneBufferGeometry" data-primitive="PlaneBufferGeometry">2D 平面</div>
-<div id="Diagram-PolyhedronBufferGeometry" data-primitive="PolyhedronBufferGeometry">将一些环绕着中心点的三角形投影到球体上</div>
-<div id="Diagram-RingBufferGeometry" data-primitive="RingBufferGeometry">中间有洞的 2D 圆盘</div>
-<div id="Diagram-ShapeBufferGeometry" data-primitive="ShapeBufferGeometry">2D 的三角轮廓</div>
-<div id="Diagram-SphereBufferGeometry" data-primitive="SphereBufferGeometry">球体</div>
-<div id="Diagram-TetrahedronBufferGeometry" data-primitive="TetrahedronBufferGeometry">四面体</div>
-<div id="Diagram-TextBufferGeometry" data-primitive="TextBufferGeometry">根据 3D 字体和字符串生成的 3D 文字</div>
-<div id="Diagram-TorusBufferGeometry" data-primitive="TorusBufferGeometry">圆环体(甜甜圈)</div>
-<div id="Diagram-TorusKnotBufferGeometry" data-primitive="TorusKnotBufferGeometry">环形节</div>
-<div id="Diagram-TubeBufferGeometry" data-primitive="TubeBufferGeometry">圆环沿着路径</div>
+<div id="Diagram-BoxGeometry" data-primitive="BoxGeometry">盒子</div>
+<div id="Diagram-CircleGeometry" data-primitive="CircleGeometry">平面圆</div>
+<div id="Diagram-ConeGeometry" data-primitive="ConeGeometry">锥形</div>
+<div id="Diagram-CylinderGeometry" data-primitive="CylinderGeometry">圆柱</div>
+<div id="Diagram-DodecahedronGeometry" data-primitive="DodecahedronGeometry">十二面体</div>
+<div id="Diagram-ExtrudeGeometry" data-primitive="ExtrudeGeometry">受挤压的 2D 形状,及可选的斜切。
+这里我们挤压了一个心型。注意,这分别是 <code>TextGeometry</code> 和 <code>TextGeometry</code> 的基础。<div>
+<div id="Diagram-IcosahedronGeometry" data-primitive="IcosahedronGeometry">二十面体</div>
+<div id="Diagram-LatheGeometry" data-primitive="LatheGeometry">绕着一条线旋转形成的形状。例如:灯泡、保龄球瓶、蜡烛、蜡烛台、酒瓶、玻璃杯等。你提供一系列点作为 2D 轮廓,并告诉 Three.js 沿着某条轴旋转时需要将侧面分成多少块。</div>
+<div id="Diagram-OctahedronGeometry" data-primitive="OctahedronGeometry">八面体</div>
+<div id="Diagram-ParametricGeometry" data-primitive="ParametricGeometry">通过提供一个函数(将网格中 2D 的点转成对应的 3D 点)生成的表面。</div>
+<div id="Diagram-PlaneGeometry" data-primitive="PlaneGeometry">2D 平面</div>
+<div id="Diagram-PolyhedronGeometry" data-primitive="PolyhedronGeometry">将一些环绕着中心点的三角形投影到球体上</div>
+<div id="Diagram-RingGeometry" data-primitive="RingGeometry">中间有洞的 2D 圆盘</div>
+<div id="Diagram-ShapeGeometry" data-primitive="ShapeGeometry">2D 的三角轮廓</div>
+<div id="Diagram-SphereGeometry" data-primitive="SphereGeometry">球体</div>
+<div id="Diagram-TetrahedronGeometry" data-primitive="TetrahedronGeometry">四面体</div>
+<div id="Diagram-TextGeometry" data-primitive="TextGeometry">根据 3D 字体和字符串生成的 3D 文字</div>
+<div id="Diagram-TorusGeometry" data-primitive="TorusGeometry">圆环体(甜甜圈)</div>
+<div id="Diagram-TorusKnotGeometry" data-primitive="TorusKnotGeometry">环形节</div>
+<div id="Diagram-TubeGeometry" data-primitive="TubeGeometry">圆环沿着路径</div>
 <div id="Diagram-EdgesGeometry" data-primitive="EdgesGeometry">一个工具对象,将一个几何体作为输入,生成面夹角大于某个阈值的那条边。例如,你从顶上看一个盒子,你会看到有一条线穿过这个面,因为每个组成这个盒子的三角形都显示出来了。而如果使用 <code>EdgesGeometry</code> 中间的线就会被移除。调整下面的 thresholdAngle,你就会看到夹角小于这个值的边消失了。</div>
 <div id="Diagram-WireframeGeometry" data-primitive="WireframeGeometry">对于给定的几何体,生成每个边包含一个线段(2 个点)的几何体。如果不这样,通常缺边或者多边,因为 WebGL 中每条边通常需要 2 个点。例如,如果你只有一个三角形,就只有 3 个点 。如果你用 <code>wireframe: true</code> 的材质来绘制它,你只能得到一条线。将这个三角形几何体传给 <code>WireframeGeometry</code> 就能生成一个新的几何体,这个几何体用 6 个点组成 3 条线段。</div>
 
@@ -60,7 +60,7 @@ Three.js 有很多图元。图元就是一些 3D 的形状,在运行时根据
 使用顶点的数量在创建时就定好了,相应的创建存储,填充顶点数据。
 但用 `Geometry` 你就能随时添加顶点。
 
-我们会在 [另一篇文章](threejs-custom-geometry.html) 中来讲创建自定义几何体。
+我们会在 [另一篇文章](threejs-custom-buffergeometry.html) 中来讲创建自定义几何体。
 现在,我们来为创建每一个图元作为例子。
 我们从 [上一篇文章的例子](threejs-responsive.html) 开始。
 
@@ -127,7 +127,7 @@ function createMaterial() {
 
 同时,我们将 `side: THREE.DoubleSide` 传给材质。这告诉 Three.js 绘制组成形状的三角形的两个面。
 对于实心的形状,像球体或立方体,通常不需要绘制三角形的背面,因为它们全部朝向内部。
-对于我们的情况,我们会绘制一些像 `PlaneBufferGeometry` 和 `ShapeBufferGeometry` 这样的二维图形,没有内部,
+对于我们的情况,我们会绘制一些像 `PlaneGeometry` 和 `ShapeGeometry` 这样的二维图形,没有内部,
 如果不设置 `side: THREE.DoubleSide`,当从反面看时它们会消失。
 
 需要注意的是,如果 **不** 设置 `side: THREE.DoubleSide` 绘制会更快,所以最好只在需要的时候设置它。
@@ -151,7 +151,7 @@ function addSolidGeometry(x, y, geometry) {
   const width = 8;
   const height = 8;
   const depth = 8;
-  addSolidGeometry(-2, -2, new THREE.BoxBufferGeometry(width, height, depth));
+  addSolidGeometry(-2, -2, new THREE.BoxGeometry(width, height, depth));
 }
 ```
 
@@ -161,7 +161,7 @@ function addSolidGeometry(x, y, geometry) {
 
 {{{example url="../threejs-primitives.html" }}}
 
-上面的模式有一些值得注意的例外。最大的可能就是 `TextBufferGeometry`。在为文字生成网格前需要先加载 3D 字体数据。
+上面的模式有一些值得注意的例外。最大的可能就是 `TextGeometry`。在为文字生成网格前需要先加载 3D 字体数据。
 数据的加载是异步的,所以在尝试创建几何体前需要等待。通过将字体加载 Promise 化,我们可以让这个过程更简单。
 我们创建一个 `FontLoader`,然后 `loadFont` 函数返回一个 `promise`,`promise` 的 `resolve` 会给我们字体。
 接着我们创建一个 `async` 函数 `doit`,使用 `await` 加载字体。最后创建几何体,调用 `addOjbect` 将它添加到场景中。
@@ -178,7 +178,7 @@ function addSolidGeometry(x, y, geometry) {
 
   async function doit() {
     const font = await loadFont('resources/threejs/fonts/helvetiker_regular.typeface.json');  /* threejsfundamentals: url */
-    const geometry = new THREE.TextBufferGeometry('three.js', {
+    const geometry = new THREE.TextGeometry('three.js', {
       font: font,
       size: 3.0,
       height: .2,
@@ -243,7 +243,7 @@ function addLineGeometry(x, y, geometry) {
 const radius = 7;
 const widthSegments = 12;
 const heightSegments = 8;
-const geometry = new THREE.SphereBufferGeometry(radius, widthSegments, heightSegments);
+const geometry = new THREE.SphereGeometry(radius, widthSegments, heightSegments);
 const material = new THREE.PointsMaterial({
     color: 'red',
     size: 0.2,     // in world units
@@ -276,9 +276,9 @@ const material = new THREE.PointsMaterial({
 一个很好的例子就是球形几何体。它可以这些参数:一圈组成的片数、从上到下的数量等。例如:
 
 <div class="spread">
-<div data-diagram="SphereBufferGeometryLow"></div>
-<div data-diagram="SphereBufferGeometryMedium"></div>
-<div data-diagram="SphereBufferGeometryHigh"></div>
+<div data-diagram="SphereGeometryLow"></div>
+<div data-diagram="SphereGeometryMedium"></div>
+<div data-diagram="SphereGeometryHigh"></div>
 </div>
 
 第一个球体一圈有 5 分片,高度为 3,一共 15 片,或者 30 个三角形。
@@ -288,9 +288,9 @@ const material = new THREE.PointsMaterial({
 由你决定需要细分成多少。看起来你可能需要较多数量的分片,但去除线,设置平面着色,我们就得到了:
 
 <div class="spread">
-<div data-diagram="SphereBufferGeometryLowSmooth"></div>
-<div data-diagram="SphereBufferGeometryMediumSmooth"></div>
-<div data-diagram="SphereBufferGeometryHighSmooth"></div>
+<div data-diagram="SphereGeometryLowSmooth"></div>
+<div data-diagram="SphereGeometryMediumSmooth"></div>
+<div data-diagram="SphereGeometryHighSmooth"></div>
 </div>
 
 现在并不明显是否右边有 5000 个三角形的比中间只有 480 个三角形的好更多。
@@ -301,8 +301,8 @@ const material = new THREE.PointsMaterial({
 有时候很容易选择。例如你可以选择将平面细分。
 
 <div class="spread">
-<div data-diagram="PlaneBufferGeometryLow"></div>
-<div data-diagram="PlaneBufferGeometryHigh"></div>
+<div data-diagram="PlaneGeometryLow"></div>
+<div data-diagram="PlaneGeometryHigh"></div>
 </div>
 
 左边的平面有 2 个三角形,右边的平面有 200 个三角形。不像球体,在多数平面的应用场景中,并没有什么折中的方法。
@@ -312,7 +312,7 @@ const material = new THREE.PointsMaterial({
 你需要根据你的具体情况选择合适的方案。
 
 如果上面的形状不符合你的使用需求,你可以从 [.obj 文件](threejs-load-obj.html) 或 [.gltf 文件](threejs-load-gltf.html) 加载几何体。
-你也可以创建 [自定义 Geometry](threejs-custom-geometry.html) 或 [自定义 BufferGeometry](threejs-custom-buffergeometry.html)。
+你也可以创建 [自定义 Geometry](threejs-custom-buffergeometry.html)。
 
 接下来是 [Three.js 的场景图是如何工作的及如何使用它](threejs-scenegraph.html)。