Change all XXXBufferGeometry to XXXGeometry

threejs/background-v01.html

@@ -135,7 +135,7 @@ function main() {
     uniforms.topColor.value.copy(hemiLight.color);
     scene.fog = new THREE.Fog(scene.background, fogNear, fogFar);
     scene.fog.color.copy(uniforms.bottomColor.value);
-    const skyGeo = new THREE.SphereBufferGeometry(4000, 32, 15);
+    const skyGeo = new THREE.SphereGeometry(4000, 32, 15);
     const skyMat = new THREE.ShaderMaterial( { vertexShader: vertexShader, fragmentShader: fragmentShader, uniforms: uniforms, side: THREE.BackSide } );
     const sky = new THREE.Mesh( skyGeo, skyMat );
     scene.add(sky);

threejs/background.html

@@ -164,7 +164,7 @@ function main() {
     uniforms.topColor.value.copy(hemiLight.color);
     scene.fog = new THREE.Fog(scene.background, fogNear, fogFar);
     scene.fog.color.copy(uniforms.bottomColor.value);
-    const skyGeo = new THREE.SphereBufferGeometry(3000, 32, 15);
+    const skyGeo = new THREE.SphereGeometry(3000, 32, 15);
     const skyMat = new THREE.ShaderMaterial( { vertexShader: vertexShader, fragmentShader: fragmentShader, uniforms: uniforms, side: THREE.BackSide } );
     const sky = new THREE.Mesh( skyGeo, skyMat );
     scene.add(sky);

threejs/lessons/ja/threejs-align-html-elements-to-3d.md

@@ -11,7 +11,7 @@ TOC: HTML要素を3Dに揃える
 
 * 3Dテキストを使用する
 
-  [プリミティブの記事](threejs-primitives.html)を見ると `TextBufferGeometry` があり、3Dテキストが作れます。
+  [プリミティブの記事](threejs-primitives.html)を見ると `TextGeometry` があり、3Dテキストが作れます。
   ロゴを飛ばすには便利ですが、統計や情報、ラベル付けなどにはあまり便利でないかもしれません。
 
 * テキストが描かれたテクスチャを使用する
@@ -406,7 +406,7 @@ min、max、lat、lon、これは全て緯度と経度です。
 {
   const loader = new THREE.TextureLoader();
   const texture = loader.load('resources/data/world/country-outlines-4k.png', render);
-  const geometry = new THREE.SphereBufferGeometry(1, 64, 32);
+  const geometry = new THREE.SphereGeometry(1, 64, 32);
   const material = new THREE.MeshBasicMaterial({map: texture});
   scene.add(new THREE.Mesh(geometry, material));
 }

threejs/lessons/ja/threejs-billboards.md

@@ -87,13 +87,13 @@ label.scale.y = canvas.height * labelBaseScale;
 const trunkRadius = .2;
 const trunkHeight = 1;
 const trunkRadialSegments = 12;
-const trunkGeometry = new THREE.CylinderBufferGeometry(
+const trunkGeometry = new THREE.CylinderGeometry(
     trunkRadius, trunkRadius, trunkHeight, trunkRadialSegments);
 
 const topRadius = trunkRadius * 4;
 const topHeight = trunkHeight * 2;
 const topSegments = 12;
-const topGeometry = new THREE.ConeBufferGeometry(
+const topGeometry = new THREE.ConeGeometry(
     topRadius, topHeight, topSegments);
 
 const trunkMaterial = new THREE.MeshPhongMaterial({color: 'brown'});
@@ -136,7 +136,7 @@ for (let z = -50; z <= 50; z += 10) {
 // add ground
 {
   const size = 400;
-  const geometry = new THREE.PlaneBufferGeometry(size, size);
+  const geometry = new THREE.PlaneGeometry(size, size);
   const material = new THREE.MeshPhongMaterial({color: 'gray'});
   const mesh = new THREE.Mesh(geometry, material);
   mesh.rotation.x = Math.PI * -0.5;

threejs/lessons/ja/threejs-cameras.md

@@ -301,7 +301,7 @@ const minMaxGUIHelper = new MinMaxGUIHelper(camera, 'near', 'far', 0.1);
   const sphereRadius = 3;
   const sphereWidthDivisions = 32;
   const sphereHeightDivisions = 16;
-  const sphereGeo = new THREE.SphereBufferGeometry(sphereRadius, sphereWidthDivisions, sphereHeightDivisions);
+  const sphereGeo = new THREE.SphereGeometry(sphereRadius, sphereWidthDivisions, sphereHeightDivisions);
   const numSpheres = 20;
   for (let i = 0; i < numSpheres; ++i) {
     const sphereMat = new THREE.MeshPhongMaterial();
@@ -489,7 +489,7 @@ const textures = [
   loader.load('resources/images/flower-6.jpg'),
 ];
 const planeSize = 256;
-const planeGeo = new THREE.PlaneBufferGeometry(planeSize, planeSize);
+const planeGeo = new THREE.PlaneGeometry(planeSize, planeSize);
 const planes = textures.map((texture) => {
   const planePivot = new THREE.Object3D();
   scene.add(planePivot);

threejs/lessons/ja/threejs-canvas-textures.md

@@ -176,16 +176,16 @@ const scene = new THREE.Scene();
 +const bodyRadiusBottom = .2;
 +const bodyHeight = 2;
 +const bodyRadialSegments = 6;
-+const bodyGeometry = new THREE.CylinderBufferGeometry(
++const bodyGeometry = new THREE.CylinderGeometry(
 +    bodyRadiusTop, bodyRadiusBottom, bodyHeight, bodyRadialSegments);
 +
 +const headRadius = bodyRadiusTop * 0.8;
 +const headLonSegments = 12;
 +const headLatSegments = 5;
-+const headGeometry = new THREE.SphereBufferGeometry(
++const headGeometry = new THREE.SphereGeometry(
 +    headRadius, headLonSegments, headLatSegments);
 +
-+const labelGeometry = new THREE.PlaneBufferGeometry(1, 1);
++const labelGeometry = new THREE.PlaneGeometry(1, 1);
 ```
 
 では、これらのパーツからキャラクターを作る機能を作ってみましょう。
@@ -375,7 +375,7 @@ function makeLabelCanvas(baseWidth, size, name) {
 
 +const forceTextureInitialization = function() {
 +  const material = new THREE.MeshBasicMaterial();
-+  const geometry = new THREE.PlaneBufferGeometry();
++  const geometry = new THREE.PlaneGeometry();
 +  const scene = new THREE.Scene();
 +  scene.add(new THREE.Mesh(geometry, material));
 +  const camera = new THREE.Camera();

threejs/lessons/ja/threejs-custom-geometry.md

@@ -17,7 +17,7 @@ TOC: カスタムジオメトリ
 
 ここまで簡単なカスタムジオメトリであれば大袈裟なモデリングツールを使わずにTHREE.jsのコードで作れます。
 
-まずは立方体を作ってみましょう。THREE.jsの`BoxGeometry`や`BoxBufferGeometry`を使えば一発で
+まずは立方体を作ってみましょう。THREE.jsの`BoxGeometry`や`BoxGeometry`を使えば一発で
 立方体を作れますが、簡単な例としてカスタムジオメトリで作ってみましょう。
 
 THREE.jsにはカスタムジオメトリを作る方法が２つあります。１つ目は`Geometry`クラスで２つ目が`BufferGeometry`です。

threejs/lessons/ja/threejs-debugging-javascript.md

@@ -175,7 +175,7 @@ class ClearingLogger {
 マウスをクリックするたびに新しい `Mesh` を追加するコードは以下の通りです。
 
 ```js
-const geometry = new THREE.SphereBufferGeometry();
+const geometry = new THREE.SphereGeometry();
 const material = new THREE.MeshBasicMaterial({color: 'red'});
 
 const things = [];

threejs/lessons/ja/threejs-indexed-textures.md

@@ -66,7 +66,7 @@ pickingScene.background = new THREE.Color(0);
 ```js
 {
   const loader = new THREE.TextureLoader();
-  const geometry = new THREE.SphereBufferGeometry(1, 64, 32);
+  const geometry = new THREE.SphereGeometry(1, 64, 32);
 
 +  const indexTexture = loader.load('resources/data/world/country-index-texture.png', render);
 +  indexTexture.minFilter = THREE.NearestFilter;
@@ -346,7 +346,7 @@ void main() {
 ```js
 {
   const loader = new THREE.TextureLoader();
-  const geometry = new THREE.SphereBufferGeometry(1, 64, 32);
+  const geometry = new THREE.SphereGeometry(1, 64, 32);
 
   const indexTexture = loader.load('resources/data/world/country-index-texture.png', render);
   indexTexture.minFilter = THREE.NearestFilter;
@@ -439,7 +439,7 @@ paletteTexture.needsUpdate = true;
 これはマテリアルのユニフォームに設定する必要があります。
 
 ```js
-const geometry = new THREE.SphereBufferGeometry(1, 64, 32);
+const geometry = new THREE.SphereGeometry(1, 64, 32);
 const material = new THREE.MeshBasicMaterial({map: texture});
 material.onBeforeCompile = function(shader) {
   fragmentShaderReplacements.forEach((rep) => {

threejs/lessons/ja/threejs-lights.md

@@ -72,7 +72,7 @@ texture.repeat.set(repeats, repeats);
 平面のデフォルトは縦向きなので横向きになるように回転します。
 
 ```js
-const planeGeo = new THREE.PlaneBufferGeometry(planeSize, planeSize);
+const planeGeo = new THREE.PlaneGeometry(planeSize, planeSize);
 const planeMat = new THREE.MeshPhongMaterial({
   map: texture,
   side: THREE.DoubleSide,
@@ -87,7 +87,7 @@ scene.add(mesh);
 ```js
 {
   const cubeSize = 4;
-  const cubeGeo = new THREE.BoxBufferGeometry(cubeSize, cubeSize, cubeSize);
+  const cubeGeo = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);
   const cubeMat = new THREE.MeshPhongMaterial({color: '#8AC'});
   const mesh = new THREE.Mesh(cubeGeo, cubeMat);
   mesh.position.set(cubeSize + 1, cubeSize / 2, 0);
@@ -97,7 +97,7 @@ scene.add(mesh);
   const sphereRadius = 3;
   const sphereWidthDivisions = 32;
   const sphereHeightDivisions = 16;
-  const sphereGeo = new THREE.SphereBufferGeometry(sphereRadius, sphereWidthDivisions, sphereHeightDivisions);
+  const sphereGeo = new THREE.SphereGeometry(sphereRadius, sphereWidthDivisions, sphereHeightDivisions);
   const sphereMat = new THREE.MeshPhongMaterial({color: '#CA8'});
   const mesh = new THREE.Mesh(sphereGeo, sphereMat);
   mesh.position.set(-sphereRadius - 1, sphereRadius + 2, 0);
@@ -398,7 +398,7 @@ gui.add(light, 'penumbra', 0, 1, 0.01);
 ```js
   ...
 
-  const planeGeo = new THREE.PlaneBufferGeometry(planeSize, planeSize);
+  const planeGeo = new THREE.PlaneGeometry(planeSize, planeSize);
 -  const planeMat = new THREE.MeshPhongMaterial({
 +  const planeMat = new THREE.MeshStandardMaterial({
     map: texture,
@@ -410,7 +410,7 @@ gui.add(light, 'penumbra', 0, 1, 0.01);
 }
 {
   const cubeSize = 4;
-  const cubeGeo = new THREE.BoxBufferGeometry(cubeSize, cubeSize, cubeSize);
+  const cubeGeo = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);
 - const cubeMat = new THREE.MeshPhongMaterial({color: '#8AC'});
 + const cubeMat = new THREE.MeshStandardMaterial({color: '#8AC'});
   const mesh = new THREE.Mesh(cubeGeo, cubeMat);
@@ -421,7 +421,7 @@ gui.add(light, 'penumbra', 0, 1, 0.01);
   const sphereRadius = 3;
   const sphereWidthDivisions = 32;
   const sphereHeightDivisions = 16;
-  const sphereGeo = new THREE.SphereBufferGeometry(sphereRadius, sphereWidthDivisions, sphereHeightDivisions);
+  const sphereGeo = new THREE.SphereGeometry(sphereRadius, sphereWidthDivisions, sphereHeightDivisions);
 -  const sphereMat = new THREE.MeshPhongMaterial({color: '#CA8'});
 + const sphereMat = new THREE.MeshStandardMaterial({color: '#CA8'});
   const mesh = new THREE.Mesh(sphereGeo, sphereMat);

threejs/lessons/ja/threejs-multiple-scenes.md

@@ -109,7 +109,7 @@ function makeScene(elem) {
 
 function setupScene1() {
   const sceneInfo = makeScene(document.querySelector('#box'));
-  const geometry = new THREE.BoxBufferGeometry(1, 1, 1);
+  const geometry = new THREE.BoxGeometry(1, 1, 1);
   const material = new THREE.MeshPhongMaterial({color: 'red'});
   const mesh = new THREE.Mesh(geometry, material);
   sceneInfo.scene.add(mesh);
@@ -122,7 +122,7 @@ function setupScene2() {
   const radius = .8;
   const widthSegments = 4;
   const heightSegments = 2;
-  const geometry = new THREE.SphereBufferGeometry(radius, widthSegments, heightSegments);
+  const geometry = new THREE.SphereGeometry(radius, widthSegments, heightSegments);
   const material = new THREE.MeshPhongMaterial({
     color: 'blue',
     flatShading: true,
@@ -318,7 +318,7 @@ function render(time) {
 {
   const elem = document.querySelector('#box');
   const {scene, camera} = makeScene();
-  const geometry = new THREE.BoxBufferGeometry(1, 1, 1);
+  const geometry = new THREE.BoxGeometry(1, 1, 1);
   const material = new THREE.MeshPhongMaterial({color: 'red'});
   const mesh = new THREE.Mesh(geometry, material);
   scene.add(mesh);
@@ -336,7 +336,7 @@ function render(time) {
   const radius = .8;
   const widthSegments = 4;
   const heightSegments = 2;
-  const geometry = new THREE.SphereBufferGeometry(radius, widthSegments, heightSegments);
+  const geometry = new THREE.SphereGeometry(radius, widthSegments, heightSegments);
   const material = new THREE.MeshPhongMaterial({
     color: 'blue',
     flatShading: true,
@@ -396,7 +396,7 @@ CSSのセレクタを変更し、それを選択するようにします。
 const sceneInitFunctionsByName = {
   'box': () => {
     const {scene, camera} = makeScene();
-    const geometry = new THREE.BoxBufferGeometry(1, 1, 1);
+    const geometry = new THREE.BoxGeometry(1, 1, 1);
     const material = new THREE.MeshPhongMaterial({color: 'red'});
     const mesh = new THREE.Mesh(geometry, material);
     scene.add(mesh);
@@ -412,7 +412,7 @@ const sceneInitFunctionsByName = {
     const radius = .8;
     const widthSegments = 4;
     const heightSegments = 2;
-    const geometry = new THREE.SphereBufferGeometry(radius, widthSegments, heightSegments);
+    const geometry = new THREE.SphereGeometry(radius, widthSegments, heightSegments);
     const material = new THREE.MeshPhongMaterial({
       color: 'blue',
       flatShading: true,
@@ -500,7 +500,7 @@ const sceneInitFunctionsByName = {
 -    const {scene, camera} = makeScene();
 + 'box': (elem) => {
 +    const {scene, camera, controls} = makeScene(elem);
-    const geometry = new THREE.BoxBufferGeometry(1, 1, 1);
+    const geometry = new THREE.BoxGeometry(1, 1, 1);
     const material = new THREE.MeshPhongMaterial({color: 'red'});
     const mesh = new THREE.Mesh(geometry, material);
     scene.add(mesh);
@@ -520,7 +520,7 @@ const sceneInitFunctionsByName = {
     const radius = .8;
     const widthSegments = 4;
     const heightSegments = 2;
-    const geometry = new THREE.SphereBufferGeometry(radius, widthSegments, heightSegments);
+    const geometry = new THREE.SphereGeometry(radius, widthSegments, heightSegments);
     const material = new THREE.MeshPhongMaterial({
       color: 'blue',
       flatShading: true,

threejs/lessons/ja/threejs-optimize-lots-of-objects.md

@@ -155,7 +155,7 @@ loadFile('resources/data/gpw/gpw_v4_basic_demographic_characteristics_rev10_a000
 {
   const loader = new THREE.TextureLoader();
   const texture = loader.load('resources/images/world.jpg', render);
-  const geometry = new THREE.SphereBufferGeometry(1, 64, 32);
+  const geometry = new THREE.SphereGeometry(1, 64, 32);
   const material = new THREE.MeshBasicMaterial({map: texture});
   scene.add(new THREE.Mesh(geometry, material));
 }
@@ -175,7 +175,7 @@ function addBoxes(file) {
   const boxWidth = 1;
   const boxHeight = 1;
   const boxDepth = 1;
-  const geometry = new THREE.BoxBufferGeometry(boxWidth, boxHeight, boxDepth);
+  const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
   // make it so it scales away from the positive Z axis
   geometry.applyMatrix4(new THREE.Matrix4().makeTranslation(0, 0, 0.5));
 
@@ -306,7 +306,7 @@ function addBoxes(file) {
 -  const boxWidth = 1;
 -  const boxHeight = 1;
 -  const boxDepth = 1;
--  const geometry = new THREE.BoxBufferGeometry(boxWidth, boxHeight, boxDepth);
+-  const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
 -  // make it so it scales away from the positive Z axis
 -  geometry.applyMatrix4(new THREE.Matrix4().makeTranslation(0, 0, 0.5));
 
@@ -347,7 +347,7 @@ function addBoxes(file) {
 +      const boxWidth = 1;
 +      const boxHeight = 1;
 +      const boxDepth = 1;
-+      const geometry = new THREE.BoxBufferGeometry(boxWidth, boxHeight, boxDepth);
++      const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
 
       // adjust the helpers to point to the latitude and longitude
       lonHelper.rotation.y = THREE.MathUtils.degToRad(lonNdx + file.xllcorner) + lonFudge;
@@ -415,7 +415,7 @@ data.forEach((row, latNdx) => {
     const boxWidth = 1;
     const boxHeight = 1;
     const boxDepth = 1;
-    const geometry = new THREE.BoxBufferGeometry(boxWidth, boxHeight, boxDepth);
+    const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
 
     // adjust the helpers to point to the latitude and longitude
     lonHelper.rotation.y = THREE.MathUtils.degToRad(lonNdx + file.xllcorner) + lonFudge;

threejs/lessons/ja/threejs-scenegraph.md

@@ -45,7 +45,7 @@ const objects = [];
 const radius = 1;
 const widthSegments = 6;
 const heightSegments = 6;
-const sphereGeometry = new THREE.SphereBufferGeometry(
+const sphereGeometry = new THREE.SphereGeometry(
     radius, widthSegments, heightSegments);
 
 const sunMaterial = new THREE.MeshPhongMaterial({emissive: 0xFFFF00});

threejs/lessons/ja/threejs-shadertoy.md

@@ -111,7 +111,7 @@ function main() {
      1, // far
   );
   const scene = new THREE.Scene();
-  const plane = new THREE.PlaneBufferGeometry(2, 2);
+  const plane = new THREE.PlaneGeometry(2, 2);
   const material = new THREE.MeshBasicMaterial({
       color: 'red',
   });

threejs/lessons/ja/threejs-shadows.md

@@ -58,7 +58,7 @@ const scene = new THREE.Scene();
   const repeats = planeSize / 2;
   texture.repeat.set(repeats, repeats);
 
-  const planeGeo = new THREE.PlaneBufferGeometry(planeSize, planeSize);
+  const planeGeo = new THREE.PlaneGeometry(planeSize, planeSize);
   const planeMat = new THREE.MeshBasicMaterial({
     map: texture,
     side: THREE.DoubleSide,
@@ -92,14 +92,14 @@ const sphereShadowBases = [];
 const sphereRadius = 1;
 const sphereWidthDivisions = 32;
 const sphereHeightDivisions = 16;
-const sphereGeo = new THREE.SphereBufferGeometry(sphereRadius, sphereWidthDivisions, sphereHeightDivisions);
+const sphereGeo = new THREE.SphereGeometry(sphereRadius, sphereWidthDivisions, sphereHeightDivisions);
 ```
 
 フェイクシャドウのための平面のジオメトリも作ります。
 
 ```js
 const planeSize = 1;
-const shadowGeo = new THREE.PlaneBufferGeometry(planeSize, planeSize);
+const shadowGeo = new THREE.PlaneGeometry(planeSize, planeSize);
 ```
 
 そして、たくさんの球体を作ります。
@@ -432,7 +432,7 @@ also blur the result
 ```js
 {
   const cubeSize = 30;
-  const cubeGeo = new THREE.BoxBufferGeometry(cubeSize, cubeSize, cubeSize);
+  const cubeGeo = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);
   const cubeMat = new THREE.MeshPhongMaterial({
     color: '#CCC',
     side: THREE.BackSide,

threejs/lessons/ja/threejs-textures.md

@@ -95,9 +95,9 @@ const loader = new THREE.TextureLoader();
 {{{example url="../threejs-textured-cube-6-textures.html" }}}
 
 ただし、全ての種類のジオメトリが複数のマテリアルに対応しているわけではないことに注意してください。
-`BoxGeometry`と`BoxBufferGeometry`は、それぞれの面に6つのマテリアルを使えます。
-`ConeGeometry`と`ConeBufferGeometry`は2つのマテリアルを使うことができ、一つは底面、一つは円錐面に適用されます。
-`CylinderGeometry`と`CylinderBufferGeometry`は3つのマテリアルを使うことができ、一つは底面、一つは上面、一つは側面に適用されます。
+`BoxGeometry`と`BoxGeometry`は、それぞれの面に6つのマテリアルを使えます。
+`ConeGeometry`と`ConeGeometry`は2つのマテリアルを使うことができ、一つは底面、一つは円錐面に適用されます。
+`CylinderGeometry`と`CylinderGeometry`は3つのマテリアルを使うことができ、一つは底面、一つは上面、一つは側面に適用されます。
 その他のケースでは、カスタムジオメトリのビルドや読み込み、テクスチャの座標の修正が必要になります。
 
 

threejs/lessons/ja/threejs-transparency.md

@@ -191,7 +191,7 @@ function makeInstance(geometry, color, x, y, z) {
 ```js
 const planeWidth = 1;
 const planeHeight = 1;
-const geometry = new THREE.PlaneBufferGeometry(planeWidth, planeHeight);
+const geometry = new THREE.PlaneGeometry(planeWidth, planeHeight);
 
 const loader = new THREE.TextureLoader();
 
@@ -258,7 +258,7 @@ function makeInstance(geometry, color, rotY, url) {
 
 どうやって達成するかはあなた次第です。
 [Blender](https://blender.org)のようなモデリングツールを使用していた場合は、テクスチャ座標を手動で調整すると思います。
-ここでは `PlaneBufferGeometry` を使用していますが、デフォルトではテクスチャを平面全体に引き伸ばします。
+ここでは `PlaneGeometry` を使用していますが、デフォルトではテクスチャを平面全体に引き伸ばします。
 [テクステャの記事で説明](threejs-textures.html)したように [`texture.repeat`](Texture.repeat) と [`texture.offset`](Texture.offset) を設定し、
 各平面上の表面のテクスチャから正しい半分が得られるようにテクスチャを拡大縮小したり移動させたりできます。
 

threejs/lessons/kr/threejs-align-html-elements-to-3d.md

@@ -9,7 +9,7 @@ TOC: HTML 요소를 3D로 정렬하기
 
 * 3D 텍스트를 쓴다.
 
-    [원시 모델에 관한 글](threejs-primitives.html)을 보면 `TextBufferGeometry`로 3D 텍스트를 만든 예제를 찾을 수 있을 겁니다. 로고에 애니메이션을 준다던가 하는 경우에는 유용하지만 상태, 정보, 이름 등을 붙이는 경우라면 오히려 불편하겠죠.
+    [원시 모델에 관한 글](threejs-primitives.html)을 보면 `TextGeometry`로 3D 텍스트를 만든 예제를 찾을 수 있을 겁니다. 로고에 애니메이션을 준다던가 하는 경우에는 유용하지만 상태, 정보, 이름 등을 붙이는 경우라면 오히려 불편하겠죠.
 
 * 2D 텍스트로 텍스처를 만들어 렌더링한다.
 
@@ -374,7 +374,7 @@ min, max, lat, lon은 나라의 위도(latitude)와 경도(longitude)를 나타
 {
   const loader = new THREE.TextureLoader();
   const texture = loader.load('resources/data/world/country-outlines-4k.png', render);
-  const geometry = new THREE.SphereBufferGeometry(1, 64, 32);
+  const geometry = new THREE.SphereGeometry(1, 64, 32);
   const material = new THREE.MeshBasicMaterial({ map: texture });
   scene.add(new THREE.Mesh(geometry, material));
 }

threejs/lessons/kr/threejs-billboards.md

@@ -83,13 +83,13 @@ label.scale.y = canvas.height * labelBaseScale;
 const trunkRadius = .2;
 const trunkHeight = 1;
 const trunkRadialSegments = 12;
-const trunkGeometry = new THREE.CylinderBufferGeometry(
+const trunkGeometry = new THREE.CylinderGeometry(
     trunkRadius, trunkRadius, trunkHeight, trunkRadialSegments);
 
 const topRadius = trunkRadius * 4;
 const topHeight = trunkHeight * 2;
 const topSegments = 12;
-const topGeometry = new THREE.ConeBufferGeometry(
+const topGeometry = new THREE.ConeGeometry(
     topRadius, topHeight, topSegments);
 
 const trunkMaterial = new THREE.MeshPhongMaterial({ color: 'brown' });
@@ -132,7 +132,7 @@ for (let z = -50; z <= 50; z += 10) {
 // 땅을 추가합니다.
 {
   const size = 400;
-  const geometry = new THREE.PlaneBufferGeometry(size, size);
+  const geometry = new THREE.PlaneGeometry(size, size);
   const material = new THREE.MeshPhongMaterial({ color: 'gray' });
   const mesh = new THREE.Mesh(geometry, material);
   mesh.rotation.x = Math.PI * -0.5;

threejs/lessons/kr/threejs-cameras.md

@@ -303,7 +303,7 @@ const minMaxGUIHelper = new MinMaxGUIHelper(camera, 'near', 'far', 0.1);
   const sphereRadius = 3;
   const sphereWidthDivisions = 32;
   const sphereHeightDivisions = 16;
-  const sphereGeo = new THREE.SphereBufferGeometry(sphereRadius, sphereWidthDivisions, sphereHeightDivisions);
+  const sphereGeo = new THREE.SphereGeometry(sphereRadius, sphereWidthDivisions, sphereHeightDivisions);
   const numSpheres = 20;
   for (let i = 0; i < numSpheres; ++i) {
     const sphereMat = new THREE.MeshPhongMaterial();
@@ -495,7 +495,7 @@ const textures = [
   loader.load('resources/images/flower-6.jpg'),
 ];
 const planeSize = 256;
-const planeGeo = new THREE.PlaneBufferGeometry(planeSize, planeSize);
+const planeGeo = new THREE.PlaneGeometry(planeSize, planeSize);
 const planes = textures.map((texture) => {
   const planePivot = new THREE.Object3D();
   scene.add(planePivot);

threejs/lessons/kr/threejs-canvas-textures.md

@@ -163,16 +163,16 @@ const scene = new THREE.Scene();
 +const bodyRadiusBottom = .2;
 +const bodyHeight = 2;
 +const bodyRadialSegments = 6;
-+const bodyGeometry = new THREE.CylinderBufferGeometry(
++const bodyGeometry = new THREE.CylinderGeometry(
 +    bodyRadiusTop, bodyRadiusBottom, bodyHeight, bodyRadialSegments);
 +
 +const headRadius = bodyRadiusTop * 0.8;
 +const headLonSegments = 12;
 +const headLatSegments = 5;
-+const headGeometry = new THREE.SphereBufferGeometry(
++const headGeometry = new THREE.SphereGeometry(
 +    headRadius, headLonSegments, headLatSegments);
 +
-+const labelGeometry = new THREE.PlaneBufferGeometry(1, 1);
++const labelGeometry = new THREE.PlaneGeometry(1, 1);
 ```
 
 다음으로 이 geometry들을 이용해 사람을 만드는 함수를 만듭니다.
@@ -350,7 +350,7 @@ function makeLabelCanvas(baseWidth, size, name) {
 
 +const forceTextureInitialization = function() {
 +  const material = new THREE.MeshBasicMaterial();
-+  const geometry = new THREE.PlaneBufferGeometry();
++  const geometry = new THREE.PlaneGeometry();
 +  const scene = new THREE.Scene();
 +  scene.add(new THREE.Mesh(geometry, material));
 +  const camera = new THREE.Camera();

threejs/lessons/kr/threejs-cleanup.md

@@ -13,7 +13,7 @@ Three.js에서는 [textures](threejs-textures.html), [geometries](threejs-primit
 가장 간단한 방법은 일일이 호출하는 겁니다. 초기화 시에 아래와 같이 지원을 메모리에 할당하고
 
 ```js
-const boxGeometry = new THREE.BoxBufferGeometry(...);
+const boxGeometry = new THREE.BoxGeometry(...);
 const boxTexture = textureLoader.load(...);
 const boxMaterial = new THREE.MeshPhongMaterial({ map: texture });
 ```

threejs/lessons/kr/threejs-custom-geometry.md

@@ -19,7 +19,7 @@ TOC: 사용자 지정 Geometry
 만드는 게 유리할 수 있을 겁니다.
 
 먼저 정육면체를 하나 만들어보겠습니다. 이미 원시 모델에 `BoxGeometry`와
-`BoxBufferGeometry`가 있긴 하지만, 기본 개념을 이해하는 데는 간단한 게
+`BoxGeometry`가 있긴 하지만, 기본 개념을 이해하는 데는 간단한 게
 훨씬 효과적일 테니까요.
 
 Three.js에서 사용자 지정 geometry는 `Geometry` 또는 `BufferGeometry`,

threejs/lessons/kr/threejs-debugging-javascript.md

@@ -168,7 +168,7 @@ class ClearingLogger {
 아래는 화면을 클릭할 때마다 `Mesh`를 추가하는 코드입니다.
 
 ```js
-const geometry = new THREE.SphereBufferGeometry();
+const geometry = new THREE.SphereGeometry();
 const material = new THREE.MeshBasicMaterial({ color: 'red' });
 
 const things = [];

threejs/lessons/kr/threejs-indexed-textures.md

@@ -45,7 +45,7 @@ pickingScene.background = new THREE.Color(0);
 ```js
 {
   const loader = new THREE.TextureLoader();
-  const geometry = new THREE.SphereBufferGeometry(1, 64, 32);
+  const geometry = new THREE.SphereGeometry(1, 64, 32);
 
 +  const indexTexture = loader.load('resources/data/world/country-index-texture.png', render);
 +  indexTexture.minFilter = THREE.NearestFilter;
@@ -310,7 +310,7 @@ void main() {
 ```js
 {
   const loader = new THREE.TextureLoader();
-  const geometry = new THREE.SphereBufferGeometry(1, 64, 32);
+  const geometry = new THREE.SphereGeometry(1, 64, 32);
 
   const indexTexture = loader.load('resources/data/world/country-index-texture.png', render);
   indexTexture.minFilter = THREE.NearestFilter;
@@ -393,7 +393,7 @@ paletteTexture.needsUpdate = true;
 다음으로 재질에 균등 변수를 설정해줍니다.
 
 ```js
-const geometry = new THREE.SphereBufferGeometry(1, 64, 32);
+const geometry = new THREE.SphereGeometry(1, 64, 32);
 const material = new THREE.MeshBasicMaterial({ map: texture });
 material.onBeforeCompile = function(shader) {
   fragmentShaderReplacements.forEach((rep) => {

threejs/lessons/kr/threejs-lights.md

@@ -73,7 +73,7 @@ texture.repeat.set(repeats, repeats);
 하려면 평면을 회전시켜야 합니다.
 
 ```js
-const planeGeo = new THREE.PlaneBufferGeometry(planeSize, planeSize);
+const planeGeo = new THREE.PlaneGeometry(planeSize, planeSize);
 const planeMat = new THREE.MeshPhongMaterial({
   map: texture,
   side: THREE.DoubleSide,
@@ -88,7 +88,7 @@ scene.add(mesh);
 ```js
 {
   const cubeSize = 4;
-  const cubeGeo = new THREE.BoxBufferGeometry(cubeSize, cubeSize, cubeSize);
+  const cubeGeo = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);
   const cubeMat = new THREE.MeshPhongMaterial({color: '#8AC'});
   const mesh = new THREE.Mesh(cubeGeo, cubeMat);
   mesh.position.set(cubeSize + 1, cubeSize / 2, 0);
@@ -98,7 +98,7 @@ scene.add(mesh);
   const sphereRadius = 3;
   const sphereWidthDivisions = 32;
   const sphereHeightDivisions = 16;
-  const sphereGeo = new THREE.SphereBufferGeometry(sphereRadius, sphereWidthDivisions, sphereHeightDivisions);
+  const sphereGeo = new THREE.SphereGeometry(sphereRadius, sphereWidthDivisions, sphereHeightDivisions);
   const sphereMat = new THREE.MeshPhongMaterial({color: '#CA8'});
   const mesh = new THREE.Mesh(sphereGeo, sphereMat);
   mesh.position.set(-sphereRadius - 1, sphereRadius + 2, 0);
@@ -411,7 +411,7 @@ gui.add(light, 'penumbra', 0, 1, 0.01);
 ```js
   ...
 
-  const planeGeo = new THREE.PlaneBufferGeometry(planeSize, planeSize);
+  const planeGeo = new THREE.PlaneGeometry(planeSize, planeSize);
 -  const planeMat = new THREE.MeshPhongMaterial({
 +  const planeMat = new THREE.MeshStandardMaterial({
     map: texture,
@@ -423,7 +423,7 @@ gui.add(light, 'penumbra', 0, 1, 0.01);
 }
 {
   const cubeSize = 4;
-  const cubeGeo = new THREE.BoxBufferGeometry(cubeSize, cubeSize, cubeSize);
+  const cubeGeo = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);
 - const cubeMat = new THREE.MeshPhongMaterial({color: '#8AC'});
 + const cubeMat = new THREE.MeshStandardMaterial({color: '#8AC'});
   const mesh = new THREE.Mesh(cubeGeo, cubeMat);
@@ -434,7 +434,7 @@ gui.add(light, 'penumbra', 0, 1, 0.01);
   const sphereRadius = 3;
   const sphereWidthDivisions = 32;
   const sphereHeightDivisions = 16;
-  const sphereGeo = new THREE.SphereBufferGeometry(sphereRadius, sphereWidthDivisions, sphereHeightDivisions);
+  const sphereGeo = new THREE.SphereGeometry(sphereRadius, sphereWidthDivisions, sphereHeightDivisions);
 -  const sphereMat = new THREE.MeshPhongMaterial({color: '#CA8'});
 + const sphereMat = new THREE.MeshStandardMaterial({color: '#CA8'});
   const mesh = new THREE.Mesh(sphereGeo, sphereMat);

threejs/lessons/kr/threejs-multiple-scenes.md

@@ -107,7 +107,7 @@ function makeScene(elem) {
 
 function setupScene1() {
   const sceneInfo = makeScene(document.querySelector('#box'));
-  const geometry = new THREE.BoxBufferGeometry(1, 1, 1);
+  const geometry = new THREE.BoxGeometry(1, 1, 1);
   const material = new THREE.MeshPhongMaterial({color: 'red'});
   const mesh = new THREE.Mesh(geometry, material);
   sceneInfo.scene.add(mesh);
@@ -120,7 +120,7 @@ function setupScene2() {
   const radius = .8;
   const widthSegments = 4;
   const heightSegments = 2;
-  const geometry = new THREE.SphereBufferGeometry(radius, widthSegments, heightSegments);
+  const geometry = new THREE.SphereGeometry(radius, widthSegments, heightSegments);
   const material = new THREE.MeshPhongMaterial({
     color: 'blue',
     flatShading: true,
@@ -321,7 +321,7 @@ function render(time) {
 {
   const elem = document.querySelector('#box');
   const { scene, camera } = makeScene();
-  const geometry = new THREE.BoxBufferGeometry(1, 1, 1);
+  const geometry = new THREE.BoxGeometry(1, 1, 1);
   const material = new THREE.MeshPhongMaterial({ color: 'red' });
   const mesh = new THREE.Mesh(geometry, material);
   scene.add(mesh);
@@ -339,7 +339,7 @@ function render(time) {
   const radius = .8;
   const widthSegments = 4;
   const heightSegments = 2;
-  const geometry = new THREE.SphereBufferGeometry(radius, widthSegments, heightSegments);
+  const geometry = new THREE.SphereGeometry(radius, widthSegments, heightSegments);
   const material = new THREE.MeshPhongMaterial({
     color: 'blue',
     flatShading: true,
@@ -400,7 +400,7 @@ HTML의 [dataset](https://developer.mozilla.org/ko/docs/Web/API/HTMLElement/data
 const sceneInitFunctionsByName = {
   'box': () => {
     const { scene, camera } = makeScene();
-    const geometry = new THREE.BoxBufferGeometry(1, 1, 1);
+    const geometry = new THREE.BoxGeometry(1, 1, 1);
     const material = new THREE.MeshPhongMaterial({color: 'red'});
     const mesh = new THREE.Mesh(geometry, material);
     scene.add(mesh);
@@ -416,7 +416,7 @@ const sceneInitFunctionsByName = {
     const radius = .8;
     const widthSegments = 4;
     const heightSegments = 2;
-    const geometry = new THREE.SphereBufferGeometry(radius, widthSegments, heightSegments);
+    const geometry = new THREE.SphereGeometry(radius, widthSegments, heightSegments);
     const material = new THREE.MeshPhongMaterial({
       color: 'blue',
       flatShading: true,
@@ -504,7 +504,7 @@ const sceneInitFunctionsByName = {
 -    const {scene, camera} = makeScene();
 + 'box': (elem) => {
 +    const { scene, camera, controls } = makeScene(elem);
-    const geometry = new THREE.BoxBufferGeometry(1, 1, 1);
+    const geometry = new THREE.BoxGeometry(1, 1, 1);
     const material = new THREE.MeshPhongMaterial({color: 'red'});
     const mesh = new THREE.Mesh(geometry, material);
     scene.add(mesh);
@@ -524,7 +524,7 @@ const sceneInitFunctionsByName = {
     const radius = .8;
     const widthSegments = 4;
     const heightSegments = 2;
-    const geometry = new THREE.SphereBufferGeometry(radius, widthSegments, heightSegments);
+    const geometry = new THREE.SphereGeometry(radius, widthSegments, heightSegments);
     const material = new THREE.MeshPhongMaterial({
       color: 'blue',
       flatShading: true,

threejs/lessons/kr/threejs-optimize-lots-of-objects.md

@@ -159,7 +159,7 @@ loadFile('resources/data/gpw/gpw_v4_basic_demographic_characteristics_rev10_a000
 {
   const loader = new THREE.TextureLoader();
   const texture = loader.load('resources/images/world.jpg', render);
-  const geometry = new THREE.SphereBufferGeometry(1, 64, 32);
+  const geometry = new THREE.SphereGeometry(1, 64, 32);
   const material = new THREE.MeshBasicMaterial({ map: texture });
   scene.add(new THREE.Mesh(geometry, material));
 }
@@ -178,7 +178,7 @@ function addBoxes(file) {
   const boxWidth = 1;
   const boxHeight = 1;
   const boxDepth = 1;
-  const geometry = new THREE.BoxBufferGeometry(boxWidth, boxHeight, boxDepth);
+  const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
   // 중심이 아닌 양의 z축 방향으로 커지게끔 만듭니다.
   geometry.applyMatrix4(new THREE.Matrix4().makeTranslation(0, 0, 0.5));
 
@@ -296,7 +296,7 @@ function addBoxes(file) {
 -  const boxWidth = 1;
 -  const boxHeight = 1;
 -  const boxDepth = 1;
--  const geometry = new THREE.BoxBufferGeometry(boxWidth, boxHeight, boxDepth);
+-  const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
 -  // 중심이 아닌 양의 z축 방향으로 커지게끔 만듭니다.
 -  geometry.applyMatrix4(new THREE.Matrix4().makeTranslation(0, 0, 0.5));
 
@@ -337,7 +337,7 @@ function addBoxes(file) {
 +      const boxWidth = 1;
 +      const boxHeight = 1;
 +      const boxDepth = 1;
-+      const geometry = new THREE.BoxBufferGeometry(boxWidth, boxHeight, boxDepth);
++      const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
 
       // 헬퍼들을 특정 위도와 경도로 이동시킵니다.
       lonHelper.rotation.y = THREE.MathUtils.degToRad(lonNdx + file.xllcorner) + lonFudge;
@@ -402,7 +402,7 @@ data.forEach((row, latNdx) => {
     const boxWidth = 1;
     const boxHeight = 1;
     const boxDepth = 1;
-    const geometry = new THREE.BoxBufferGeometry(boxWidth, boxHeight, boxDepth);
+    const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
 
     // 헬퍼들을 특정 위도와 경도로 이동시킵니다.
     lonHelper.rotation.y = THREE.MathUtils.degToRad(lonNdx + file.xllcorner) + lonFudge;

threejs/lessons/kr/threejs-scenegraph.md

@@ -53,7 +53,7 @@ const objects = [];
 const radius = 1;
 const widthSegments = 6;
 const heightSegments = 6;
-const sphereGeometry = new THREE.SphereBufferGeometry(
+const sphereGeometry = new THREE.SphereGeometry(
     radius, widthSegments, heightSegments);
 
 const sunMaterial = new THREE.MeshPhongMaterial({emissive: 0xFFFF00});

threejs/lessons/kr/threejs-shadertoy.md

@@ -80,7 +80,7 @@ function main() {
      1, // far
   );
   const scene = new THREE.Scene();
-  const plane = new THREE.PlaneBufferGeometry(2, 2);
+  const plane = new THREE.PlaneGeometry(2, 2);
   const material = new THREE.MeshBasicMaterial({
       color: 'red',
   });

threejs/lessons/kr/threejs-shadows.md

@@ -70,7 +70,7 @@ const scene = new THREE.Scene();
   const repeats = planeSize / 2;
   texture.repeat.set(repeats, repeats);
 
-  const planeGeo = new THREE.PlaneBufferGeometry(planeSize, planeSize);
+  const planeGeo = new THREE.PlaneGeometry(planeSize, planeSize);
   const planeMat = new THREE.MeshBasicMaterial({
     map: texture,
     side: THREE.DoubleSide,
@@ -104,14 +104,14 @@ const sphereShadowBases = [];
 const sphereRadius = 1;
 const sphereWidthDivisions = 32;
 const sphereHeightDivisions = 16;
-const sphereGeo = new THREE.SphereBufferGeometry(sphereRadius, sphereWidthDivisions, sphereHeightDivisions);
+const sphereGeo = new THREE.SphereGeometry(sphereRadius, sphereWidthDivisions, sphereHeightDivisions);
 ```
 
 가짜 그림자를 위한 평면 `geometry`도 만듭니다.
 
 ```js
 const planeSize = 1;
-const shadowGeo = new THREE.PlaneBufferGeometry(planeSize, planeSize);
+const shadowGeo = new THREE.PlaneGeometry(planeSize, planeSize);
 ```
 
 이제 구체를 아주 많이 만들겠습니다. 각각 구체마다 `컨테이너` 역할을 할
@@ -433,7 +433,7 @@ updateCamera();
 ```js
 {
   const cubeSize = 30;
-  const cubeGeo = new THREE.BoxBufferGeometry(cubeSize, cubeSize, cubeSize);
+  const cubeGeo = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);
   const cubeMat = new THREE.MeshPhongMaterial({
     color: '#CCC',
     side: THREE.BackSide,

threejs/lessons/kr/threejs-textures.md

@@ -100,9 +100,9 @@ const loader = new THREE.TextureLoader();
 {{{example url="../threejs-textured-cube-6-textures.html" }}}
 
 주의해야할 점은 모든 `geometry`가 재질을 배열로 받진 않는다는 점입니다.
-`BoxGeometry`나 `BoxBufferGeometry`는 최대 6개, `ConeGeometry`와
-`ConeBufferGeometry`는 밑면과 뿔 부분에 하나씩 최대 2개, `CylinderGeometry`와
-`CylinderBufferGeometry`는 아래, 위, 옆면 하나씩 최대 3개를 지정할 수 있죠.
+`BoxGeometry`나 `BoxGeometry`는 최대 6개, `ConeGeometry`와
+`ConeGeometry`는 밑면과 뿔 부분에 하나씩 최대 2개, `CylinderGeometry`와
+`CylinderGeometry`는 아래, 위, 옆면 하나씩 최대 3개를 지정할 수 있죠.
 다른 경우에는 `geometry`를 따로 만들거나, 텍스처의 좌표를 직접 수정해야 합니다.
 
 다른 3D 엔진에서나 Three.js에서나, 하나의 `geometry`에서 여러 텍스처를 쓰고 싶을 때는

threejs/lessons/kr/threejs-transparency.md

@@ -195,7 +195,7 @@ Three.js의 분류 기준은 고정적인 듯합니다. `side: THREE.BackSide` m
 ```js
 const planeWidth = 1;
 const planeHeight = 1;
-const geometry = new THREE.PlaneBufferGeometry(planeWidth, planeHeight);
+const geometry = new THREE.PlaneGeometry(planeWidth, planeHeight);
 
 const loader = new THREE.TextureLoader();
 
@@ -263,7 +263,7 @@ function makeInstance(geometry, color, rotY, url) {
 
 저걸 어떻게 구현할지는 여러분의 선택입니다. [블렌더(Blender)](https://blender.org)
 같은 3D 에디터를 사용했다면 텍스처 좌표를 직접 수정했겠죠. 예제의 경우에는
-`PlaneBufferGeometry`를 썼습니다. [이전에 다뤘듯](threejs-textures.html)
+`PlaneGeometry`를 썼습니다. [이전에 다뤘듯](threejs-textures.html)
 이 geometry는 기본적으로 텍스처를 크기에 맞춰 늘립니다. [`texture.repeat`](Texture.repeat)
 속성과 [`texture.offset`](Texture.offset) 속성을 조정해 각 면에 적절한
 텍스처를 입혀줄 수 있죠.

threejs/lessons/kr/threejs-voxel-geometry.md

@@ -34,7 +34,7 @@ for (let y = 0; y < cellSize; ++y) {
 다음으로 모든 블럭을 돌면서 0이 아닐 경우 정육면체를 새로 만듭니다.
 
 ```js
-const geometry = new THREE.BoxBufferGeometry(1, 1, 1);
+const geometry = new THREE.BoxGeometry(1, 1, 1);
 const material = new THREE.MeshPhongMaterial({ color: 'green' });
 
 for (let y = 0; y < cellSize; ++y) {

threejs/lessons/resources/threejs-cameras.js

@@ -13,7 +13,7 @@ import {threejsLessonUtils} from './threejs-lesson-utils.js';
         const width = 8;
         const height = 8;
         const depth = 8;
-        return addShape('hsl(150,100%,40%)', new THREE.BoxBufferGeometry(width, height, depth));
+        return addShape('hsl(150,100%,40%)', new THREE.BoxGeometry(width, height, depth));
       },
     },
     shapeCone: {
@@ -21,7 +21,7 @@ import {threejsLessonUtils} from './threejs-lesson-utils.js';
         const radius = 6;
         const height = 8;
         const segments = 24;
-        return addShape('hsl(160,100%,40%)', new THREE.ConeBufferGeometry(radius, height, segments));
+        return addShape('hsl(160,100%,40%)', new THREE.ConeGeometry(radius, height, segments));
       },
     },
     shapeCylinder: {
@@ -30,7 +30,7 @@ import {threejsLessonUtils} from './threejs-lesson-utils.js';
         const radiusBottom = 4;
         const height = 8;
         const radialSegments = 24;
-        return addShape('hsl(170,100%,40%)', new THREE.CylinderBufferGeometry(radiusTop, radiusBottom, height, radialSegments));
+        return addShape('hsl(170,100%,40%)', new THREE.CylinderGeometry(radiusTop, radiusBottom, height, radialSegments));
       },
     },
     shapeSphere: {
@@ -38,7 +38,7 @@ import {threejsLessonUtils} from './threejs-lesson-utils.js';
         const radius = 5;
         const widthSegments = 24;
         const heightSegments = 16;
-        return addShape('hsl(180,100%,40%)', new THREE.SphereBufferGeometry(radius, widthSegments, heightSegments));
+        return addShape('hsl(180,100%,40%)', new THREE.SphereGeometry(radius, widthSegments, heightSegments));
       },
     },
     shapeFrustum: {
@@ -46,7 +46,7 @@ import {threejsLessonUtils} from './threejs-lesson-utils.js';
         const width = 8;
         const height = 8;
         const depth = 8;
-        const geometry = new THREE.BoxBufferGeometry(width, height, depth);
+        const geometry = new THREE.BoxGeometry(width, height, depth);
         const perspMat = new THREE.Matrix4();
         perspMat.makePerspective(-3, 3, -3, 3, 4, 12);
         const inMat = new THREE.Matrix4();

threejs/lessons/resources/threejs-fog.js

@@ -16,7 +16,7 @@ import {threejsLessonUtils} from './threejs-lesson-utils.js';
     const width = 4;
     const height = 3;
     const depth = 10;
-    const geometry = new THREE.BoxBufferGeometry(width, height, depth);
+    const geometry = new THREE.BoxGeometry(width, height, depth);
     const material = new THREE.MeshPhongMaterial({color: 'hsl(130,50%,50%)'});
     return {
       obj3D: new THREE.Mesh(geometry, material),
@@ -35,7 +35,7 @@ import {threejsLessonUtils} from './threejs-lesson-utils.js';
       metalness: 0,
     };
     loader.load('/threejs/resources/models/simple_house_scene/scene.gltf', (gltf) => {
-      const hackGeometry = new THREE.CircleBufferGeometry(0.5, 32);
+      const hackGeometry = new THREE.CircleGeometry(0.5, 32);
       const box = new THREE.Box3();
       const size = new THREE.Vector3();
       const center = new THREE.Vector3();

threejs/lessons/resources/threejs-lights.js

@@ -21,17 +21,17 @@ import {threejsLessonUtils} from './threejs-lesson-utils.js';
   const makeScene = function() {
 
     const cubeSize = 4;
-    const cubeGeo = new THREE.BoxBufferGeometry(cubeSize, cubeSize, cubeSize);
+    const cubeGeo = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);
     const cubeMat = new THREE.MeshPhongMaterial({color: '#8AC'});
 
     const sphereRadius = 3;
     const sphereWidthDivisions = 32;
     const sphereHeightDivisions = 16;
-    const sphereGeo = new THREE.SphereBufferGeometry(sphereRadius, sphereWidthDivisions, sphereHeightDivisions);
+    const sphereGeo = new THREE.SphereGeometry(sphereRadius, sphereWidthDivisions, sphereHeightDivisions);
     const sphereMat = new THREE.MeshPhongMaterial({color: '#CA8'});
 
     const planeSize = 40;
-    const planeGeo = new THREE.PlaneBufferGeometry(planeSize, planeSize);
+    const planeGeo = new THREE.PlaneGeometry(planeSize, planeSize);
     const planeMat = new THREE.MeshPhongMaterial({
       map: makeCheckerTexture(planeSize),
       side: THREE.DoubleSide,

threejs/lessons/resources/threejs-lots-of-objects.js

@@ -20,7 +20,7 @@ import {GUI} from '../../../3rdparty/dat.gui.module.js';
     const root = new THREE.Object3D();
 
     const size = 3;
-    const geometry = new THREE.BoxBufferGeometry(size, size, size);
+    const geometry = new THREE.BoxGeometry(size, size, size);
     geometry.applyMatrix4(new THREE.Matrix4().makeTranslation(0, 0, zOffset * size));
     const material = new THREE.MeshBasicMaterial({
       color: 'red',
@@ -68,7 +68,7 @@ import {GUI} from '../../../3rdparty/dat.gui.module.js';
         const gridHelper = new THREE.GridHelper(size, divisions);
         scene.add(gridHelper);
 
-        const geometry = new THREE.BoxBufferGeometry(1, 1, 1);
+        const geometry = new THREE.BoxGeometry(1, 1, 1);
 
         const lonHelper = new THREE.Object3D();
         scene.add(lonHelper);
@@ -88,7 +88,7 @@ import {GUI} from '../../../3rdparty/dat.gui.module.js';
           latHelper.add(latMesh);
         }
         {
-          const geometry = new THREE.SphereBufferGeometry(0.1, 24, 12);
+          const geometry = new THREE.SphereGeometry(0.1, 24, 12);
           const posMesh = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({color: 'red'}));
           posMesh.position.z = 1;
           positionHelper.add(posMesh);

threejs/lessons/resources/threejs-materials.js

@@ -4,7 +4,7 @@ import {threejsLessonUtils} from './threejs-lesson-utils.js';
 {
   function makeSphere(widthDivisions, heightDivisions) {
     const radius = 7;
-    return new THREE.SphereBufferGeometry(radius, widthDivisions, heightDivisions);
+    return new THREE.SphereGeometry(radius, widthDivisions, heightDivisions);
   }
 
   const highPolySphereGeometry = function() {
@@ -22,7 +22,7 @@ import {threejsLessonUtils} from './threejs-lesson-utils.js';
   function smoothOrFlat(flatShading, radius = 7) {
     const widthDivisions = 12;
     const heightDivisions = 9;
-    const geometry = new THREE.SphereBufferGeometry(radius, widthDivisions, heightDivisions);
+    const geometry = new THREE.SphereGeometry(radius, widthDivisions, heightDivisions);
     const material = new THREE.MeshPhongMaterial({
       flatShading,
       color: 'hsl(300,50%,50%)',
@@ -45,7 +45,7 @@ import {threejsLessonUtils} from './threejs-lesson-utils.js';
   function sideExample(side) {
     const base = new THREE.Object3D();
     const size = 6;
-    const geometry = new THREE.PlaneBufferGeometry(size, size);
+    const geometry = new THREE.PlaneGeometry(size, size);
     [
       { position: [ -1, 0, 0], up: [0,  1, 0], },
       { position: [  1, 0, 0], up: [0, -1, 0], },
@@ -303,7 +303,7 @@ import {threejsLessonUtils} from './threejs-lesson-utils.js';
         const tubularSegments = 64;
         const p = 2;
         const q = 3;
-        const geometry = new THREE.TorusKnotBufferGeometry(radius, tube, tubularSegments, radialSegments, p, q);
+        const geometry = new THREE.TorusKnotGeometry(radius, tube, tubularSegments, radialSegments, p, q);
         const material = new THREE.MeshDepthMaterial();
         camera.near = 7;
         camera.far = 20;
@@ -318,7 +318,7 @@ import {threejsLessonUtils} from './threejs-lesson-utils.js';
         const tubularSegments = 64;
         const p = 2;
         const q = 3;
-        const geometry = new THREE.TorusKnotBufferGeometry(radius, tube, tubularSegments, radialSegments, p, q);
+        const geometry = new THREE.TorusKnotGeometry(radius, tube, tubularSegments, radialSegments, p, q);
         const material = new THREE.MeshNormalMaterial();
         return new THREE.Mesh(geometry, material);
       },

threejs/lessons/resources/threejs-textures.js

@@ -24,7 +24,7 @@ import {threejsLessonUtils} from './threejs-lesson-utils.js';
 
   function filterCube(scale, texture) {
     const size = 8;
-    const geometry = new THREE.BoxBufferGeometry(size, size, size);
+    const geometry = new THREE.BoxGeometry(size, size, size);
     const material = new THREE.MeshBasicMaterial({
       map: texture || filterTexture,
     });
@@ -42,7 +42,7 @@ import {threejsLessonUtils} from './threejs-lesson-utils.js';
 
     const planeScene = new THREE.Scene();
 
-    const plane = new THREE.PlaneBufferGeometry(1, 1);
+    const plane = new THREE.PlaneGeometry(1, 1);
     const planeMaterial = new THREE.MeshBasicMaterial({
       map: renderTarget.texture,
     });
@@ -150,7 +150,7 @@ import {threejsLessonUtils} from './threejs-lesson-utils.js';
         const texture = await filterTexturePromise;
         const root = new THREE.Object3D();
         const depth = 50;
-        const plane = new THREE.PlaneBufferGeometry(1, depth);
+        const plane = new THREE.PlaneGeometry(1, depth);
         const mipmap = [];
         const numMips = 7;
         for (let i = 0; i < numMips; ++i) {

threejs/lessons/resources/threejs-voxel-geometry.js

@@ -25,7 +25,7 @@ import {threejsLessonUtils} from './threejs-lesson-utils.js';
         for (let y = 0; y < height; ++y) {
           for (let z = 0; z < depth; ++z) {
             for (let x = 0; x < width; ++x) {
-              const geometry = new THREE.BoxBufferGeometry(1, 1, 1);
+              const geometry = new THREE.BoxGeometry(1, 1, 1);
               geometry.applyMatrix4((new THREE.Matrix4()).makeTranslation(x, y, z));
               geometries.push(geometry);
             }
@@ -49,7 +49,7 @@ import {threejsLessonUtils} from './threejs-lesson-utils.js';
     },
     culledCubes: {
       create() {
-        const geometry = new THREE.BoxBufferGeometry(3, 2, 2, 3, 2, 2);
+        const geometry = new THREE.BoxGeometry(3, 2, 2, 3, 2, 2);
         const material = new THREE.MeshBasicMaterial({
           color: colors.wire,
           wireframe: true,

threejs/lessons/ru/threejs-cameras.md

@@ -313,7 +313,7 @@ const minMaxGUIHelper = new MinMaxGUIHelper(camera, 'near', 'far', 0.1);
   const sphereRadius = 3;
   const sphereWidthDivisions = 32;
   const sphereHeightDivisions = 16;
-  const sphereGeo = new THREE.SphereBufferGeometry(sphereRadius, sphereWidthDivisions, sphereHeightDivisions);
+  const sphereGeo = new THREE.SphereGeometry(sphereRadius, sphereWidthDivisions, sphereHeightDivisions);
   const numSpheres = 20;
   for (let i = 0; i < numSpheres; ++i) {
     const sphereMat = new THREE.MeshPhongMaterial();
@@ -517,7 +517,7 @@ const textures = [
   loader.load('../resources/images/flower-6.jpg'),
 ];
 const planeSize = 256;
-const planeGeo = new THREE.PlaneBufferGeometry(planeSize, planeSize);
+const planeGeo = new THREE.PlaneGeometry(planeSize, planeSize);
 const planes = textures.map((texture) => {
   const planePivot = new THREE.Object3D();
   scene.add(planePivot);

threejs/lessons/ru/threejs-custom-geometry.md

@@ -13,7 +13,7 @@ TOC: Пользовательская Geometry
 
 Тем не менее, бывают случаи, когда мы можем захотеть сгенерировать нашу собственную трехмерную геометрию в коде вместо использования пакета моделирования. 
 
-Сначала давайте просто сделаем куб. Хотя Three.js уже предоставляет нам `BoxGeometry` и `BoxBufferGeometry`, куб легко понять, поэтому давайте начнем с него. 
+Сначала давайте просто сделаем куб. Хотя Three.js уже предоставляет нам `BoxGeometry` и `BoxGeometry`, куб легко понять, поэтому давайте начнем с него. 
 
 Есть два способа сделать пользовательскую геометрию в THREE.js. Один с классом `Geometry`, другой - `BufferGeometry`. У каждого есть свои преимущества. `Geometry`, возможно, проще в использовании, но медленнее и использует больше памяти. Для нескольких тысяч треугольников это отличный выбор, но для десятков тысяч треугольников может быть лучше использовать `BufferGeometry`. 
 

threejs/lessons/ru/threejs-debugging-javascript.md

@@ -193,7 +193,7 @@ class ClearingLogger {
 Вот код, который добавляет новую сетку каждый раз, когда мы щелкаем мышью
 
 ```js
-const geometry = new THREE.SphereBufferGeometry();
+const geometry = new THREE.SphereGeometry();
 const material = new THREE.MeshBasicMaterial({color: 'red'});
 
 const things = [];

threejs/lessons/ru/threejs-lights.md

@@ -80,7 +80,7 @@ texture.repeat.set(repeats, repeats);
 XY, но земля находится в плоскости XZ, поэтому мы вращаем ее.
 
 ```js
-const planeGeo = new THREE.PlaneBufferGeometry(planeSize, planeSize);
+const planeGeo = new THREE.PlaneGeometry(planeSize, planeSize);
 const planeMat = new THREE.MeshPhongMaterial({
   map: texture,
   side: THREE.DoubleSide,
@@ -96,7 +96,7 @@ scene.add(mesh);
 ```js
 {
   const cubeSize = 4;
-  const cubeGeo = new THREE.BoxBufferGeometry(cubeSize, cubeSize, cubeSize);
+  const cubeGeo = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);
   const cubeMat = new THREE.MeshPhongMaterial({color: '#8AC'});
   const mesh = new THREE.Mesh(cubeGeo, cubeMat);
   mesh.position.set(cubeSize + 1, cubeSize / 2, 0);
@@ -106,7 +106,7 @@ scene.add(mesh);
   const sphereRadius = 3;
   const sphereWidthDivisions = 32;
   const sphereHeightDivisions = 16;
-  const sphereGeo = new THREE.SphereBufferGeometry(sphereRadius, sphereWidthDivisions, sphereHeightDivisions);
+  const sphereGeo = new THREE.SphereGeometry(sphereRadius, sphereWidthDivisions, sphereHeightDivisions);
   const sphereMat = new THREE.MeshPhongMaterial({color: '#CA8'});
   const mesh = new THREE.Mesh(sphereGeo, sphereMat);
   mesh.position.set(-sphereRadius - 1, sphereRadius + 2, 0);
@@ -434,7 +434,7 @@ gui.add(light, 'penumbra', 0, 1, 0.01);
 ```js
   ...
 
-  const planeGeo = new THREE.PlaneBufferGeometry(planeSize, planeSize);
+  const planeGeo = new THREE.PlaneGeometry(planeSize, planeSize);
 -  const planeMat = new THREE.MeshPhongMaterial({
 +  const planeMat = new THREE.MeshStandardMaterial({
     map: texture,
@@ -446,7 +446,7 @@ gui.add(light, 'penumbra', 0, 1, 0.01);
 }
 {
   const cubeSize = 4;
-  const cubeGeo = new THREE.BoxBufferGeometry(cubeSize, cubeSize, cubeSize);
+  const cubeGeo = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);
 - const cubeMat = new THREE.MeshPhongMaterial({color: '#8AC'});
 + const cubeMat = new THREE.MeshStandardMaterial({color: '#8AC'});
   const mesh = new THREE.Mesh(cubeGeo, cubeMat);
@@ -457,7 +457,7 @@ gui.add(light, 'penumbra', 0, 1, 0.01);
   const sphereRadius = 3;
   const sphereWidthDivisions = 32;
   const sphereHeightDivisions = 16;
-  const sphereGeo = new THREE.SphereBufferGeometry(sphereRadius, sphereWidthDivisions, sphereHeightDivisions);
+  const sphereGeo = new THREE.SphereGeometry(sphereRadius, sphereWidthDivisions, sphereHeightDivisions);
 -  const sphereMat = new THREE.MeshPhongMaterial({color: '#CA8'});
 + const sphereMat = new THREE.MeshStandardMaterial({color: '#CA8'});
   const mesh = new THREE.Mesh(sphereGeo, sphereMat);

threejs/lessons/ru/threejs-multiple-scenes.md

@@ -114,7 +114,7 @@ function makeScene(elem) {
 
 function setupScene1() {
   const sceneInfo = makeScene(document.querySelector('#box'));
-  const geometry = new THREE.BoxBufferGeometry(1, 1, 1);
+  const geometry = new THREE.BoxGeometry(1, 1, 1);
   const material = new THREE.MeshPhongMaterial({color: 'red'});
   const mesh = new THREE.Mesh(geometry, material);
   sceneInfo.scene.add(mesh);
@@ -127,7 +127,7 @@ function setupScene2() {
   const radius = .8;
   const widthSegments = 4;
   const heightSegments = 2;
-  const geometry = new THREE.SphereBufferGeometry(radius, widthSegments, heightSegments);
+  const geometry = new THREE.SphereGeometry(radius, widthSegments, heightSegments);
   const material = new THREE.MeshPhongMaterial({
     color: 'blue',
     flatShading: true,
@@ -339,7 +339,7 @@ function render(time) {
 {
   const elem = document.querySelector('#box');
   const {scene, camera} = makeScene();
-  const geometry = new THREE.BoxBufferGeometry(1, 1, 1);
+  const geometry = new THREE.BoxGeometry(1, 1, 1);
   const material = new THREE.MeshPhongMaterial({color: 'red'});
   const mesh = new THREE.Mesh(geometry, material);
   scene.add(mesh);
@@ -357,7 +357,7 @@ function render(time) {
   const radius = .8;
   const widthSegments = 4;
   const heightSegments = 2;
-  const geometry = new THREE.SphereBufferGeometry(radius, widthSegments, heightSegments);
+  const geometry = new THREE.SphereGeometry(radius, widthSegments, heightSegments);
   const material = new THREE.MeshPhongMaterial({
     color: 'blue',
     flatShading: true,
@@ -418,7 +418,7 @@ function render(time) {
 const sceneInitFunctionsByName = {
   'box': () => {
     const {scene, camera} = makeScene();
-    const geometry = new THREE.BoxBufferGeometry(1, 1, 1);
+    const geometry = new THREE.BoxGeometry(1, 1, 1);
     const material = new THREE.MeshPhongMaterial({color: 'red'});
     const mesh = new THREE.Mesh(geometry, material);
     scene.add(mesh);
@@ -433,7 +433,7 @@ const sceneInitFunctionsByName = {
     const radius = .8;
     const widthSegments = 4;
     const heightSegments = 2;
-    const geometry = new THREE.SphereBufferGeometry(radius, widthSegments, heightSegments);
+    const geometry = new THREE.SphereGeometry(radius, widthSegments, heightSegments);
     const material = new THREE.MeshPhongMaterial({
       color: 'blue',
       flatShading: true,
@@ -522,7 +522,7 @@ const sceneInitFunctionsByName = {
 -    const {scene, camera} = makeScene();
 + 'box': (elem) => {
 +    const {scene, camera, controls} = makeScene(elem);
-    const geometry = new THREE.BoxBufferGeometry(1, 1, 1);
+    const geometry = new THREE.BoxGeometry(1, 1, 1);
     const material = new THREE.MeshPhongMaterial({color: 'red'});
     const mesh = new THREE.Mesh(geometry, material);
     scene.add(mesh);
@@ -542,7 +542,7 @@ const sceneInitFunctionsByName = {
     const radius = .8;
     const widthSegments = 4;
     const heightSegments = 2;
-    const geometry = new THREE.SphereBufferGeometry(radius, widthSegments, heightSegments);
+    const geometry = new THREE.SphereGeometry(radius, widthSegments, heightSegments);
     const material = new THREE.MeshPhongMaterial({
       color: 'blue',
       flatShading: true,

threejs/lessons/ru/threejs-optimize-lots-of-objects.md

@@ -162,7 +162,7 @@ loadFile('resources/data/gpw/gpw_v4_basic_demographic_characteristics_rev10_a000
 {
   const loader = new THREE.TextureLoader();
   const texture = loader.load('resources/images/world.jpg', render);
-  const geometry = new THREE.SphereBufferGeometry(1, 64, 32);
+  const geometry = new THREE.SphereGeometry(1, 64, 32);
   const material = new THREE.MeshBasicMaterial({map: texture});
   scene.add(new THREE.Mesh(geometry, material));
 }
@@ -182,7 +182,7 @@ function addBoxes(file) {
   const boxWidth = 1;
   const boxHeight = 1;
   const boxDepth = 1;
-  const geometry = new THREE.BoxBufferGeometry(boxWidth, boxHeight, boxDepth);
+  const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
   // make it so it scales away from the positive Z axis
   geometry.applyMatrix4(new THREE.Matrix4().makeTranslation(0, 0, 0.5));
 
@@ -327,7 +327,7 @@ function addBoxes(file) {
 -  const boxWidth = 1;
 -  const boxHeight = 1;
 -  const boxDepth = 1;
--  const geometry = new THREE.BoxBufferGeometry(boxWidth, boxHeight, boxDepth);
+-  const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
 -  // make it so it scales away from the positive Z axis
 -  geometry.applyMatrix4(new THREE.Matrix4().makeTranslation(0, 0, 0.5));
 
@@ -368,7 +368,7 @@ function addBoxes(file) {
 +      const boxWidth = 1;
 +      const boxHeight = 1;
 +      const boxDepth = 1;
-+      const geometry = new THREE.BoxBufferGeometry(boxWidth, boxHeight, boxDepth);
++      const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
 
       // adjust the helpers to point to the latitude and longitude
       lonHelper.rotation.y = THREE.MathUtils.degToRad(lonNdx + file.xllcorner) + lonFudge;
@@ -445,7 +445,7 @@ data.forEach((row, latNdx) => {
     const boxWidth = 1;
     const boxHeight = 1;
     const boxDepth = 1;
-    const geometry = new THREE.BoxBufferGeometry(boxWidth, boxHeight, boxDepth);
+    const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
 
     // adjust the helpers to point to the latitude and longitude
     lonHelper.rotation.y = THREE.MathUtils.degToRad(lonNdx + file.xllcorner) + lonFudge;

threejs/lessons/ru/threejs-scenegraph.md

@@ -51,7 +51,7 @@ const objects = [];
 const radius = 1;
 const widthSegments = 6;
 const heightSegments = 6;
-const sphereGeometry = new THREE.SphereBufferGeometry(
+const sphereGeometry = new THREE.SphereGeometry(
     radius, widthSegments, heightSegments);
 
 const sunMaterial = new THREE.MeshPhongMaterial({emissive: 0xFFFF00});

threejs/lessons/ru/threejs-shadows.md

@@ -59,7 +59,7 @@ const scene = new THREE.Scene();
   const repeats = planeSize / 2;
   texture.repeat.set(repeats, repeats);
 
-  const planeGeo = new THREE.PlaneBufferGeometry(planeSize, planeSize);
+  const planeGeo = new THREE.PlaneGeometry(planeSize, planeSize);
   const planeMat = new THREE.MeshBasicMaterial({
     map: texture,
     side: THREE.DoubleSide,
@@ -92,14 +92,14 @@ const sphereShadowBases = [];
 const sphereRadius = 1;
 const sphereWidthDivisions = 32;
 const sphereHeightDivisions = 16;
-const sphereGeo = new THREE.SphereBufferGeometry(sphereRadius, sphereWidthDivisions, sphereHeightDivisions);
+const sphereGeo = new THREE.SphereGeometry(sphereRadius, sphereWidthDivisions, sphereHeightDivisions);
 ```
 
 И геометрия плоскости для поддельной тени
 
 ```js
 const planeSize = 1;
-const shadowGeo = new THREE.PlaneBufferGeometry(planeSize, planeSize);
+const shadowGeo = new THREE.PlaneGeometry(planeSize, planeSize);
 ```
 
 Теперь мы сделаем кучу сфер. Для каждой сферы мы создадим `base` `THREE.Object3D` и сделаем сетку теневой плоскости и дочернюю сетку базовой сферы.
@@ -421,7 +421,7 @@ also blur the result
 ```js
 {
   const cubeSize = 30;
-  const cubeGeo = new THREE.BoxBufferGeometry(cubeSize, cubeSize, cubeSize);
+  const cubeGeo = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);
   const cubeMat = new THREE.MeshPhongMaterial({
     color: '#CCC',
     side: THREE.BackSide,

threejs/lessons/ru/threejs-textures.md

@@ -96,7 +96,7 @@ const loader = new THREE.TextureLoader();
 {{{example url="../threejs-textured-cube-6-textures.html" }}}
 
 Однако следует отметить, что по умолчанию единственной геометрией, которая поддерживает 
-несколько материалов, является `BoxGeometry` и `BoxBufferGeometry`. В других случаях вам 
+несколько материалов, является `BoxGeometry` и `BoxGeometry`. В других случаях вам 
 нужно будет создать или загрузить пользовательскую геометрию и/или изменить координаты 
 текстуры. Гораздо более распространенным является использование 
 [Текстурного атласа](https://ru.wikipedia.org/wiki/Текстурный_атлас) 

threejs/lessons/threejs-align-html-elements-to-3d.md

@@ -11,7 +11,7 @@ each with pluses and minuses.
 
 * Use 3D text
 
-  If you look at the [primitives article](threejs-primitives.html) you'll see `TextBufferGeometry` which
+  If you look at the [primitives article](threejs-primitives.html) you'll see `TextGeometry` which
   makes 3D text. This might be useful for flying logos but probably not so useful for stats, info,
   or labelling lots of things.
 
@@ -417,7 +417,7 @@ The first thing is to make a sphere and use the outline texture.
 {
   const loader = new THREE.TextureLoader();
   const texture = loader.load('resources/data/world/country-outlines-4k.png', render);
-  const geometry = new THREE.SphereBufferGeometry(1, 64, 32);
+  const geometry = new THREE.SphereGeometry(1, 64, 32);
   const material = new THREE.MeshBasicMaterial({map: texture});
   scene.add(new THREE.Mesh(geometry, material));
 }

threejs/lessons/threejs-billboards.md

@@ -91,13 +91,13 @@ all the trees will share
 const trunkRadius = .2;
 const trunkHeight = 1;
 const trunkRadialSegments = 12;
-const trunkGeometry = new THREE.CylinderBufferGeometry(
+const trunkGeometry = new THREE.CylinderGeometry(
     trunkRadius, trunkRadius, trunkHeight, trunkRadialSegments);
 
 const topRadius = trunkRadius * 4;
 const topHeight = trunkHeight * 2;
 const topSegments = 12;
-const topGeometry = new THREE.ConeBufferGeometry(
+const topGeometry = new THREE.ConeGeometry(
     topRadius, topHeight, topSegments);
 
 const trunkMaterial = new THREE.MeshPhongMaterial({color: 'brown'});
@@ -141,7 +141,7 @@ Let's also add a ground plane while we're at it
 // add ground
 {
   const size = 400;
-  const geometry = new THREE.PlaneBufferGeometry(size, size);
+  const geometry = new THREE.PlaneGeometry(size, size);
   const material = new THREE.MeshPhongMaterial({color: 'gray'});
   const mesh = new THREE.Mesh(geometry, material);
   mesh.rotation.x = Math.PI * -0.5;

threejs/lessons/threejs-cameras.md

@@ -318,7 +318,7 @@ row.
   const sphereRadius = 3;
   const sphereWidthDivisions = 32;
   const sphereHeightDivisions = 16;
-  const sphereGeo = new THREE.SphereBufferGeometry(sphereRadius, sphereWidthDivisions, sphereHeightDivisions);
+  const sphereGeo = new THREE.SphereGeometry(sphereRadius, sphereWidthDivisions, sphereHeightDivisions);
   const numSpheres = 20;
   for (let i = 0; i < numSpheres; ++i) {
     const sphereMat = new THREE.MeshPhongMaterial();
@@ -520,7 +520,7 @@ const textures = [
   loader.load('resources/images/flower-6.jpg'),
 ];
 const planeSize = 256;
-const planeGeo = new THREE.PlaneBufferGeometry(planeSize, planeSize);
+const planeGeo = new THREE.PlaneGeometry(planeSize, planeSize);
 const planes = textures.map((texture) => {
   const planePivot = new THREE.Object3D();
   scene.add(planePivot);

threejs/lessons/threejs-canvas-textures.md

@@ -180,16 +180,16 @@ First let's make the shared geometry.
 +const bodyRadiusBottom = .2;
 +const bodyHeight = 2;
 +const bodyRadialSegments = 6;
-+const bodyGeometry = new THREE.CylinderBufferGeometry(
++const bodyGeometry = new THREE.CylinderGeometry(
 +    bodyRadiusTop, bodyRadiusBottom, bodyHeight, bodyRadialSegments);
 +
 +const headRadius = bodyRadiusTop * 0.8;
 +const headLonSegments = 12;
 +const headLatSegments = 5;
-+const headGeometry = new THREE.SphereBufferGeometry(
++const headGeometry = new THREE.SphereGeometry(
 +    headRadius, headLonSegments, headLatSegments);
 +
-+const labelGeometry = new THREE.PlaneBufferGeometry(1, 1);
++const labelGeometry = new THREE.PlaneGeometry(1, 1);
 ```
 
 Then let's make a function to build a person from these
@@ -387,7 +387,7 @@ function makeLabelCanvas(baseWidth, size, name) {
 
 +const forceTextureInitialization = function() {
 +  const material = new THREE.MeshBasicMaterial();
-+  const geometry = new THREE.PlaneBufferGeometry();
++  const geometry = new THREE.PlaneGeometry();
 +  const scene = new THREE.Scene();
 +  scene.add(new THREE.Mesh(geometry, material));
 +  const camera = new THREE.Camera();

threejs/lessons/threejs-cleanup.md

@@ -30,7 +30,7 @@ You could do this manually. At the start you might create
 some of these resources
 
 ```js
-const boxGeometry = new THREE.BoxBufferGeometry(...);
+const boxGeometry = new THREE.BoxGeometry(...);
 const boxTexture = textureLoader.load(...);
 const boxMaterial = new THREE.MeshPhongMaterial({map: texture});
 ```

threejs/lessons/threejs-custom-geometry.md

@@ -22,7 +22,7 @@ Still, there are times when we might want to generate our own
 3D geometry in code instead of using a modeling package.
 
 First let's just make a cube. Even though three.js already
-provides us with `BoxGeometry` and `BoxBufferGeometry` a
+provides us with `BoxGeometry` and `BoxGeometry` a
 cube is easy to understand so let's start there.
 
 There are 2 ways to make custom geometry in THREE.js. One

threejs/lessons/threejs-debugging-javascript.md

@@ -203,7 +203,7 @@ examples from the article on [making things responsive](threejs-responsive.html)
 Here's the code that adds a new `Mesh` every time we click the mouse
 
 ```js
-const geometry = new THREE.SphereBufferGeometry();
+const geometry = new THREE.SphereGeometry();
 const material = new THREE.MeshBasicMaterial({color: 'red'});
 
 const things = [];

threejs/lessons/threejs-indexed-textures.md

@@ -76,7 +76,7 @@ picking scene.
 ```js
 {
   const loader = new THREE.TextureLoader();
-  const geometry = new THREE.SphereBufferGeometry(1, 64, 32);
+  const geometry = new THREE.SphereGeometry(1, 64, 32);
 
 +  const indexTexture = loader.load('resources/data/world/country-index-texture.png', render);
 +  indexTexture.minFilter = THREE.NearestFilter;
@@ -372,7 +372,7 @@ of search and replacement strings and apply them to the shader in
 ```js
 {
   const loader = new THREE.TextureLoader();
-  const geometry = new THREE.SphereBufferGeometry(1, 64, 32);
+  const geometry = new THREE.SphereGeometry(1, 64, 32);
 
   const indexTexture = loader.load('resources/data/world/country-index-texture.png', render);
   indexTexture.minFilter = THREE.NearestFilter;
@@ -472,7 +472,7 @@ to `true`.
 And then we still need to set the uniforms on the material.
 
 ```js
-const geometry = new THREE.SphereBufferGeometry(1, 64, 32);
+const geometry = new THREE.SphereGeometry(1, 64, 32);
 const material = new THREE.MeshBasicMaterial({map: texture});
 material.onBeforeCompile = function(shader) {
   fragmentShaderReplacements.forEach((rep) => {

threejs/lessons/threejs-lights.md

@@ -80,7 +80,7 @@ to insert it in the scene. Planes default to being in the XY plane
 but the ground is in the XZ plane so we rotate it.
 
 ```js
-const planeGeo = new THREE.PlaneBufferGeometry(planeSize, planeSize);
+const planeGeo = new THREE.PlaneGeometry(planeSize, planeSize);
 const planeMat = new THREE.MeshPhongMaterial({
   map: texture,
   side: THREE.DoubleSide,
@@ -95,7 +95,7 @@ Let's add a cube and a sphere so we have 3 things to light including the plane
 ```js
 {
   const cubeSize = 4;
-  const cubeGeo = new THREE.BoxBufferGeometry(cubeSize, cubeSize, cubeSize);
+  const cubeGeo = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);
   const cubeMat = new THREE.MeshPhongMaterial({color: '#8AC'});
   const mesh = new THREE.Mesh(cubeGeo, cubeMat);
   mesh.position.set(cubeSize + 1, cubeSize / 2, 0);
@@ -105,7 +105,7 @@ Let's add a cube and a sphere so we have 3 things to light including the plane
   const sphereRadius = 3;
   const sphereWidthDivisions = 32;
   const sphereHeightDivisions = 16;
-  const sphereGeo = new THREE.SphereBufferGeometry(sphereRadius, sphereWidthDivisions, sphereHeightDivisions);
+  const sphereGeo = new THREE.SphereGeometry(sphereRadius, sphereWidthDivisions, sphereHeightDivisions);
   const sphereMat = new THREE.MeshPhongMaterial({color: '#CA8'});
   const mesh = new THREE.Mesh(sphereGeo, sphereMat);
   mesh.position.set(-sphereRadius - 1, sphereRadius + 2, 0);
@@ -441,7 +441,7 @@ The `RectAreaLight` only works with the `MeshStandardMaterial` and the
 ```js
   ...
 
-  const planeGeo = new THREE.PlaneBufferGeometry(planeSize, planeSize);
+  const planeGeo = new THREE.PlaneGeometry(planeSize, planeSize);
 -  const planeMat = new THREE.MeshPhongMaterial({
 +  const planeMat = new THREE.MeshStandardMaterial({
     map: texture,
@@ -453,7 +453,7 @@ The `RectAreaLight` only works with the `MeshStandardMaterial` and the
 }
 {
   const cubeSize = 4;
-  const cubeGeo = new THREE.BoxBufferGeometry(cubeSize, cubeSize, cubeSize);
+  const cubeGeo = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);
 - const cubeMat = new THREE.MeshPhongMaterial({color: '#8AC'});
 + const cubeMat = new THREE.MeshStandardMaterial({color: '#8AC'});
   const mesh = new THREE.Mesh(cubeGeo, cubeMat);
@@ -464,7 +464,7 @@ The `RectAreaLight` only works with the `MeshStandardMaterial` and the
   const sphereRadius = 3;
   const sphereWidthDivisions = 32;
   const sphereHeightDivisions = 16;
-  const sphereGeo = new THREE.SphereBufferGeometry(sphereRadius, sphereWidthDivisions, sphereHeightDivisions);
+  const sphereGeo = new THREE.SphereGeometry(sphereRadius, sphereWidthDivisions, sphereHeightDivisions);
 -  const sphereMat = new THREE.MeshPhongMaterial({color: '#CA8'});
 + const sphereMat = new THREE.MeshStandardMaterial({color: '#CA8'});
   const mesh = new THREE.Mesh(sphereGeo, sphereMat);

threejs/lessons/threejs-multiple-scenes.md

@@ -110,7 +110,7 @@ function makeScene(elem) {
 
 function setupScene1() {
   const sceneInfo = makeScene(document.querySelector('#box'));
-  const geometry = new THREE.BoxBufferGeometry(1, 1, 1);
+  const geometry = new THREE.BoxGeometry(1, 1, 1);
   const material = new THREE.MeshPhongMaterial({color: 'red'});
   const mesh = new THREE.Mesh(geometry, material);
   sceneInfo.scene.add(mesh);
@@ -123,7 +123,7 @@ function setupScene2() {
   const radius = .8;
   const widthSegments = 4;
   const heightSegments = 2;
-  const geometry = new THREE.SphereBufferGeometry(radius, widthSegments, heightSegments);
+  const geometry = new THREE.SphereGeometry(radius, widthSegments, heightSegments);
   const material = new THREE.MeshPhongMaterial({
     color: 'blue',
     flatShading: true,
@@ -317,7 +317,7 @@ Now the setup code for each scene just adds itself to the list of scenes
 {
   const elem = document.querySelector('#box');
   const {scene, camera} = makeScene();
-  const geometry = new THREE.BoxBufferGeometry(1, 1, 1);
+  const geometry = new THREE.BoxGeometry(1, 1, 1);
   const material = new THREE.MeshPhongMaterial({color: 'red'});
   const mesh = new THREE.Mesh(geometry, material);
   scene.add(mesh);
@@ -335,7 +335,7 @@ Now the setup code for each scene just adds itself to the list of scenes
   const radius = .8;
   const widthSegments = 4;
   const heightSegments = 2;
-  const geometry = new THREE.SphereBufferGeometry(radius, widthSegments, heightSegments);
+  const geometry = new THREE.SphereGeometry(radius, widthSegments, heightSegments);
   const material = new THREE.MeshPhongMaterial({
     color: 'blue',
     flatShading: true,
@@ -392,7 +392,7 @@ We'll change the scene setup code to just be a map of names to *scene initializa
 const sceneInitFunctionsByName = {
   'box': () => {
     const {scene, camera} = makeScene();
-    const geometry = new THREE.BoxBufferGeometry(1, 1, 1);
+    const geometry = new THREE.BoxGeometry(1, 1, 1);
     const material = new THREE.MeshPhongMaterial({color: 'red'});
     const mesh = new THREE.Mesh(geometry, material);
     scene.add(mesh);
@@ -408,7 +408,7 @@ const sceneInitFunctionsByName = {
     const radius = .8;
     const widthSegments = 4;
     const heightSegments = 2;
-    const geometry = new THREE.SphereBufferGeometry(radius, widthSegments, heightSegments);
+    const geometry = new THREE.SphereGeometry(radius, widthSegments, heightSegments);
     const material = new THREE.MeshPhongMaterial({
       color: 'blue',
       flatShading: true,
@@ -492,7 +492,7 @@ const sceneInitFunctionsByName = {
 -    const {scene, camera} = makeScene();
 + 'box': (elem) => {
 +    const {scene, camera, controls} = makeScene(elem);
-    const geometry = new THREE.BoxBufferGeometry(1, 1, 1);
+    const geometry = new THREE.BoxGeometry(1, 1, 1);
     const material = new THREE.MeshPhongMaterial({color: 'red'});
     const mesh = new THREE.Mesh(geometry, material);
     scene.add(mesh);
@@ -512,7 +512,7 @@ const sceneInitFunctionsByName = {
     const radius = .8;
     const widthSegments = 4;
     const heightSegments = 2;
-    const geometry = new THREE.SphereBufferGeometry(radius, widthSegments, heightSegments);
+    const geometry = new THREE.SphereGeometry(radius, widthSegments, heightSegments);
     const material = new THREE.MeshPhongMaterial({
       color: 'blue',
       flatShading: true,

threejs/lessons/threejs-optimize-lots-of-objects.md

@@ -170,7 +170,7 @@ And the code to set it up.
 {
   const loader = new THREE.TextureLoader();
   const texture = loader.load('resources/images/world.jpg', render);
-  const geometry = new THREE.SphereBufferGeometry(1, 64, 32);
+  const geometry = new THREE.SphereGeometry(1, 64, 32);
   const material = new THREE.MeshBasicMaterial({map: texture});
   scene.add(new THREE.Mesh(geometry, material));
 }
@@ -192,7 +192,7 @@ function addBoxes(file) {
   const boxWidth = 1;
   const boxHeight = 1;
   const boxDepth = 1;
-  const geometry = new THREE.BoxBufferGeometry(boxWidth, boxHeight, boxDepth);
+  const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
   // make it so it scales away from the positive Z axis
   geometry.applyMatrix4(new THREE.Matrix4().makeTranslation(0, 0, 0.5));
 
@@ -343,7 +343,7 @@ function addBoxes(file) {
 -  const boxWidth = 1;
 -  const boxHeight = 1;
 -  const boxDepth = 1;
--  const geometry = new THREE.BoxBufferGeometry(boxWidth, boxHeight, boxDepth);
+-  const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
 -  // make it so it scales away from the positive Z axis
 -  geometry.applyMatrix4(new THREE.Matrix4().makeTranslation(0, 0, 0.5));
 
@@ -384,7 +384,7 @@ function addBoxes(file) {
 +      const boxWidth = 1;
 +      const boxHeight = 1;
 +      const boxDepth = 1;
-+      const geometry = new THREE.BoxBufferGeometry(boxWidth, boxHeight, boxDepth);
++      const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
 
       // adjust the helpers to point to the latitude and longitude
       lonHelper.rotation.y = THREE.MathUtils.degToRad(lonNdx + file.xllcorner) + lonFudge;
@@ -459,7 +459,7 @@ data.forEach((row, latNdx) => {
     const boxWidth = 1;
     const boxHeight = 1;
     const boxDepth = 1;
-    const geometry = new THREE.BoxBufferGeometry(boxWidth, boxHeight, boxDepth);
+    const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
 
     // adjust the helpers to point to the latitude and longitude
     lonHelper.rotation.y = THREE.MathUtils.degToRad(lonNdx + file.xllcorner) + lonFudge;

threejs/lessons/threejs-scenegraph.md

@@ -53,7 +53,7 @@ const objects = [];
 const radius = 1;
 const widthSegments = 6;
 const heightSegments = 6;
-const sphereGeometry = new THREE.SphereBufferGeometry(
+const sphereGeometry = new THREE.SphereGeometry(
     radius, widthSegments, heightSegments);
 
 const sunMaterial = new THREE.MeshPhongMaterial({emissive: 0xFFFF00});

threejs/lessons/threejs-shadertoy.md

@@ -121,7 +121,7 @@ function main() {
      1, // far
   );
   const scene = new THREE.Scene();
-  const plane = new THREE.PlaneBufferGeometry(2, 2);
+  const plane = new THREE.PlaneGeometry(2, 2);
   const material = new THREE.MeshBasicMaterial({
       color: 'red',
   });

threejs/lessons/threejs-shadows.md

@@ -73,7 +73,7 @@ a `MeshBasicMaterial` as we don't need lighting for the ground.
   const repeats = planeSize / 2;
   texture.repeat.set(repeats, repeats);
 
-  const planeGeo = new THREE.PlaneBufferGeometry(planeSize, planeSize);
+  const planeGeo = new THREE.PlaneGeometry(planeSize, planeSize);
   const planeMat = new THREE.MeshBasicMaterial({
     map: texture,
     side: THREE.DoubleSide,
@@ -108,14 +108,14 @@ Then we'll make a sphere geometry
 const sphereRadius = 1;
 const sphereWidthDivisions = 32;
 const sphereHeightDivisions = 16;
-const sphereGeo = new THREE.SphereBufferGeometry(sphereRadius, sphereWidthDivisions, sphereHeightDivisions);
+const sphereGeo = new THREE.SphereGeometry(sphereRadius, sphereWidthDivisions, sphereHeightDivisions);
 ```
 
 And a plane geometry for the fake shadow
 
 ```js
 const planeSize = 1;
-const shadowGeo = new THREE.PlaneBufferGeometry(planeSize, planeSize);
+const shadowGeo = new THREE.PlaneGeometry(planeSize, planeSize);
 ```
 
 Now we'll make a bunch of spheres. For each sphere we'll create a `base`
@@ -464,7 +464,7 @@ of the box don't z-fight.
 ```js
 {
   const cubeSize = 30;
-  const cubeGeo = new THREE.BoxBufferGeometry(cubeSize, cubeSize, cubeSize);
+  const cubeGeo = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);
   const cubeMat = new THREE.MeshPhongMaterial({
     color: '#CCC',
     side: THREE.BackSide,

threejs/lessons/threejs-textures.md

@@ -97,9 +97,9 @@ It works!
 {{{example url="../threejs-textured-cube-6-textures.html" }}}
 
 It should be noted though that not all geometry types supports multiple
-materials. `BoxGeometry` and `BoxBufferGeometry` can use 6 materials one for each face.
-`ConeGeometry` and `ConeBufferGeometry` can use 2 materials, one for the bottom and one for the cone.
-`CylinderGeometry` and `CylinderBufferGeometry` can use 3 materials, bottom, top, and side.
+materials. `BoxGeometry` and `BoxGeometry` can use 6 materials one for each face.
+`ConeGeometry` and `ConeGeometry` can use 2 materials, one for the bottom and one for the cone.
+`CylinderGeometry` and `CylinderGeometry` can use 3 materials, bottom, top, and side.
 For other cases you will need to build or load custom geometry and/or modify texture coordinates.
 
 It's far more common in other 3D engines and far more performant to use a

threejs/lessons/threejs-transparency.md

@@ -203,7 +203,7 @@ We'll [add a texture](threejs-textures.html) to each plane.
 ```js
 const planeWidth = 1;
 const planeHeight = 1;
-const geometry = new THREE.PlaneBufferGeometry(planeWidth, planeHeight);
+const geometry = new THREE.PlaneGeometry(planeWidth, planeHeight);
 
 const loader = new THREE.TextureLoader();
 
@@ -273,7 +273,7 @@ function makeInstance(geometry, color, rotY, url) {
 
 How you accomplish that is up to you. If I was using modeling package like
 [Blender](https://blender.org) I'd probably do this manually by adjusting
-texture coordinates. Here though we're using `PlaneBufferGeometry` which by
+texture coordinates. Here though we're using `PlaneGeometry` which by
 default stretches the texture across the plane. Like we [covered
 before](threejs-textures.html) By setting the [`texture.repeat`](Texture.repeat)
 and [`texture.offset`](Texture.offset) we can scale and move the texture to get

threejs/lessons/threejs-voxel-geometry.md

@@ -38,7 +38,7 @@ I then walked through all the cells and if they were not
 0 I created a mesh with a cube.
 
 ```js
-const geometry = new THREE.BoxBufferGeometry(1, 1, 1);
+const geometry = new THREE.BoxGeometry(1, 1, 1);
 const material = new THREE.MeshPhongMaterial({color: 'green'});
 
 for (let y = 0; y < cellSize; ++y) {

threejs/lessons/threejs-webvr-look-to-select.md

@@ -147,14 +147,14 @@ const cursorColors = new Uint8Array([
 const cursorTexture = makeDataTexture(cursorColors, 2, 1);
 ```
 
-We'll then use that texture on a `TorusBufferGeometry`
+We'll then use that texture on a `TorusGeometry`
 
 ```js
 const ringRadius = 0.4;
 const tubeRadius = 0.1;
 const tubeSegments = 4;
 const ringSegments = 64;
-const cursorGeometry = new THREE.TorusBufferGeometry(
+const cursorGeometry = new THREE.TorusGeometry(
     ringRadius, tubeRadius, tubeSegments, ringSegments);
 
 const cursorMaterial = new THREE.MeshBasicMaterial({
@@ -250,19 +250,19 @@ A few things to notice **and try**.
   the inverse effect is best here as that way we can hopefully
   see the cursor regardless of the colors it is over.
 
-* We use a `TorusBufferGeometry` and not a `RingBufferGeometry`
+* We use a `TorusGeometry` and not a `RingGeometry`
 
-  For whatever reason the `RingBufferGeometry` uses a flat
-  UV mapping scheme. Because of this if we use a `RingBufferGeometry`
+  For whatever reason the `RingGeometry` uses a flat
+  UV mapping scheme. Because of this if we use a `RingGeometry`
   the texture slides horizontally across the ring instead of
   around it like it does above.
 
-  Try it out, change the `TorusBufferGeometry` to a `RingBufferGeometry`
+  Try it out, change the `TorusGeometry` to a `RingGeometry`
   (it's just commented out in the example above) and you'll see what I
   mean.
 
   The *proper* thing to do (for some definition of *proper*) would be
-  to either use the `RingBufferGeometry` but fix the texture coordinates
+  to either use the `RingGeometry` but fix the texture coordinates
   so they go around the ring. Or else, generate our own ring geometry.
   But, the torus works just fine. Placed directly in front of the camera
   with a `MeshBasicMaterial` it will look exactly like a ring and the
@@ -288,7 +288,7 @@ class PickHelper {
 +    const tubeRadius = 0.1;
 +    const tubeSegments = 4;
 +    const ringSegments = 64;
-+    const cursorGeometry = new THREE.TorusBufferGeometry(
++    const cursorGeometry = new THREE.TorusGeometry(
 +        ringRadius, tubeRadius, tubeSegments, ringSegments);
 +
 +    const cursorMaterial = new THREE.MeshBasicMaterial({
@@ -394,11 +394,11 @@ So first we'll make a sphere geometry
 const boxWidth = 1;
 const boxHeight = 1;
 const boxDepth = 1;
--const geometry = new THREE.BoxBufferGeometry(boxWidth, boxHeight, boxDepth);
-+const boxGeometry = new THREE.BoxBufferGeometry(boxWidth, boxHeight, boxDepth);
+-const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
++const boxGeometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
 +
 +const sphereRadius = 0.5;
-+const sphereGeometry = new THREE.SphereBufferGeometry(sphereRadius);
++const sphereGeometry = new THREE.SphereGeometry(sphereRadius);
 ```
 
 Then let's create 3 pairs of box and sphere meshes. We'll

threejs/lessons/zh_cn/threejs-lights.md

@@ -60,7 +60,7 @@ texture.repeat.set(repeats, repeats);
 接着我们创建一个平面几何体，一个材质，再用这两个作为参数，创建一个 `Mesh` 对象并且添加到场景中。因为创建的平面默认是在 XY 平面上（竖直平面），我们希望得到一个 XZ 平面（水平平面），所以我们将他旋转 90°。
 
 ```js
-const planeGeo = new THREE.PlaneBufferGeometry(planeSize, planeSize);
+const planeGeo = new THREE.PlaneGeometry(planeSize, planeSize);
 const planeMat = new THREE.MeshPhongMaterial({
   map: texture,
   side: THREE.DoubleSide,
@@ -75,7 +75,7 @@ scene.add(mesh);
 ```js
 {
   const cubeSize = 4;
-  const cubeGeo = new THREE.BoxBufferGeometry(cubeSize, cubeSize, cubeSize);
+  const cubeGeo = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);
   const cubeMat = new THREE.MeshPhongMaterial({color: '#8AC'});
   const mesh = new THREE.Mesh(cubeGeo, cubeMat);
   mesh.position.set(cubeSize + 1, cubeSize / 2, 0);
@@ -85,7 +85,7 @@ scene.add(mesh);
   const sphereRadius = 3;
   const sphereWidthDivisions = 32;
   const sphereHeightDivisions = 16;
-  const sphereGeo = new THREE.SphereBufferGeometry(sphereRadius, sphereWidthDivisions, sphereHeightDivisions);
+  const sphereGeo = new THREE.SphereGeometry(sphereRadius, sphereWidthDivisions, sphereHeightDivisions);
   const sphereMat = new THREE.MeshPhongMaterial({color: '#CA8'});
   const mesh = new THREE.Mesh(sphereGeo, sphereMat);
   mesh.position.set(-sphereRadius - 1, sphereRadius + 2, 0);
@@ -357,7 +357,7 @@ Three.js 中还有一种类型的光照，矩形区域光（`RectAreaLight`）,
 ```js
   ...
 
-  const planeGeo = new THREE.PlaneBufferGeometry(planeSize, planeSize);
+  const planeGeo = new THREE.PlaneGeometry(planeSize, planeSize);
 -  const planeMat = new THREE.MeshPhongMaterial({
 +  const planeMat = new THREE.MeshStandardMaterial({
     map: texture,
@@ -369,7 +369,7 @@ Three.js 中还有一种类型的光照，矩形区域光（`RectAreaLight`）,
 }
 {
   const cubeSize = 4;
-  const cubeGeo = new THREE.BoxBufferGeometry(cubeSize, cubeSize, cubeSize);
+  const cubeGeo = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);
 - const cubeMat = new THREE.MeshPhongMaterial({color: '#8AC'});
 + const cubeMat = new THREE.MeshStandardMaterial({color: '#8AC'});
   const mesh = new THREE.Mesh(cubeGeo, cubeMat);
@@ -380,7 +380,7 @@ Three.js 中还有一种类型的光照，矩形区域光（`RectAreaLight`）,
   const sphereRadius = 3;
   const sphereWidthDivisions = 32;
   const sphereHeightDivisions = 16;
-  const sphereGeo = new THREE.SphereBufferGeometry(sphereRadius, sphereWidthDivisions, sphereHeightDivisions);
+  const sphereGeo = new THREE.SphereGeometry(sphereRadius, sphereWidthDivisions, sphereHeightDivisions);
 -  const sphereMat = new THREE.MeshPhongMaterial({color: '#CA8'});
 + const sphereMat = new THREE.MeshStandardMaterial({color: '#CA8'});
   const mesh = new THREE.Mesh(sphereGeo, sphereMat);

threejs/lessons/zh_cn/threejs-scenegraph.md

@@ -30,7 +30,7 @@ const objects = [];
 const radius = 1;
 const widthSegments = 6;
 const heightSegments = 6;
-const sphereGeometry = new THREE.SphereBufferGeometry(
+const sphereGeometry = new THREE.SphereGeometry(
   radius,
   widthSegments,
   heightSegments

threejs/lessons/zh_cn/threejs-textures.md

@@ -85,7 +85,7 @@ const loader = new THREE.TextureLoader();
 
 {{{example url="../threejs-textured-cube-6-textures.html" }}}
 
-但需要注意的是，并不是所有的几何体类型都支持多种材质。`BoxGeometry` 和 `BoxBufferGeometry` 可以使用6种材料，每个面一个。`ConeGeometry` 和 `ConeBufferGeometry` 可以使用2种材料，一种用于底部，一种用于侧面。 `CylinderGeometry` 和 `CylinderBufferGeometry` 可以使用3种材料，分别是底部、顶部和侧面。对于其他情况，你需要建立或加载自定义几何体和（或）修改纹理坐标。
+但需要注意的是，并不是所有的几何体类型都支持多种材质。`BoxGeometry` 和 `BoxGeometry` 可以使用6种材料，每个面一个。`ConeGeometry` 和 `ConeGeometry` 可以使用2种材料，一种用于底部，一种用于侧面。 `CylinderGeometry` 和 `CylinderGeometry` 可以使用3种材料，分别是底部、顶部和侧面。对于其他情况，你需要建立或加载自定义几何体和（或）修改纹理坐标。
 
 在其他3D引擎中，如果你想在一个几何体上使用多个图像，使用 [纹理图集（Texture Atlas）](https://en.wikipedia.org/wiki/Texture_atlas) 更为常见，性能也更高。纹理图集是将多个图像放在一个单一的纹理中，然后使用几何体顶点上的纹理坐标来选择在几何体的每个三角形上使用纹理的哪些部分。
 

threejs/threejs-align-html-elements-to-3d-globe-too-many-labels.html

@@ -86,7 +86,7 @@ function main() {
   {
     const loader = new THREE.TextureLoader();
     const texture = loader.load('resources/data/world/country-outlines-4k.png', render);
-    const geometry = new THREE.SphereBufferGeometry(1, 64, 32);
+    const geometry = new THREE.SphereGeometry(1, 64, 32);
     const material = new THREE.MeshBasicMaterial({map: texture});
     scene.add(new THREE.Mesh(geometry, material));
   }

threejs/threejs-align-html-elements-to-3d-globe.html

@@ -87,7 +87,7 @@ function main() {
   {
     const loader = new THREE.TextureLoader();
     const texture = loader.load('resources/data/world/country-outlines-4k.png', render);
-    const geometry = new THREE.SphereBufferGeometry(1, 64, 32);
+    const geometry = new THREE.SphereGeometry(1, 64, 32);
     const material = new THREE.MeshBasicMaterial({map: texture});
     scene.add(new THREE.Mesh(geometry, material));
   }

threejs/threejs-background-separate-scene-bad-aspect.html

@@ -82,7 +82,7 @@ function main() {
   const bgTexture = loader.load('resources/images/daikanyama.jpg');
   let bgMesh;
   {
-    const plane = new THREE.PlaneBufferGeometry(2, 2);
+    const plane = new THREE.PlaneGeometry(2, 2);
     const material = new THREE.MeshBasicMaterial({
       map: bgTexture,
       depthTest: false,

threejs/threejs-background-separate-scene.html

@@ -82,7 +82,7 @@ function main() {
   const bgTexture = loader.load('resources/images/daikanyama.jpg');
   let bgMesh;
   {
-    const plane = new THREE.PlaneBufferGeometry(2, 2);
+    const plane = new THREE.PlaneGeometry(2, 2);
     const material = new THREE.MeshBasicMaterial({
       map: bgTexture,
       depthTest: false,

threejs/threejs-billboard-labels-w-sprites-adjust-height.html

@@ -57,13 +57,13 @@ function main() {
   const bodyRadiusBottom = .2;
   const bodyHeight = 2;
   const bodyRadialSegments = 6;
-  const bodyGeometry = new THREE.CylinderBufferGeometry(
+  const bodyGeometry = new THREE.CylinderGeometry(
       bodyRadiusTop, bodyRadiusBottom, bodyHeight, bodyRadialSegments);
 
   const headRadius = bodyRadiusTop * 0.8;
   const headLonSegments = 12;
   const headLatSegments = 5;
-  const headGeometry = new THREE.SphereBufferGeometry(
+  const headGeometry = new THREE.SphereGeometry(
       headRadius, headLonSegments, headLatSegments);
 
   function makeLabelCanvas(baseWidth, size, name) {

threejs/threejs-billboard-labels-w-sprites.html

@@ -57,13 +57,13 @@ function main() {
   const bodyRadiusBottom = .2;
   const bodyHeight = 2;
   const bodyRadialSegments = 6;
-  const bodyGeometry = new THREE.CylinderBufferGeometry(
+  const bodyGeometry = new THREE.CylinderGeometry(
       bodyRadiusTop, bodyRadiusBottom, bodyHeight, bodyRadialSegments);
 
   const headRadius = bodyRadiusTop * 0.8;
   const headLonSegments = 12;
   const headLatSegments = 5;
-  const headGeometry = new THREE.SphereBufferGeometry(
+  const headGeometry = new THREE.SphereGeometry(
       headRadius, headLonSegments, headLatSegments);
 
   function makeLabelCanvas(baseWidth, size, name) {

threejs/threejs-billboard-trees-no-billboards.html

@@ -58,13 +58,13 @@ function main() {
   const trunkRadius = .2;
   const trunkHeight = 1;
   const trunkRadialSegments = 12;
-  const trunkGeometry = new THREE.CylinderBufferGeometry(
+  const trunkGeometry = new THREE.CylinderGeometry(
       trunkRadius, trunkRadius, trunkHeight, trunkRadialSegments);
 
   const topRadius = trunkRadius * 4;
   const topHeight = trunkHeight * 2;
   const topSegments = 12;
-  const topGeometry = new THREE.ConeBufferGeometry(
+  const topGeometry = new THREE.ConeGeometry(
       topRadius, topHeight, topSegments);
 
   const trunkMaterial = new THREE.MeshPhongMaterial({color: 'brown'});
@@ -95,7 +95,7 @@ function main() {
   // add ground
   {
     const size = 400;
-    const geometry = new THREE.PlaneBufferGeometry(size, size);
+    const geometry = new THREE.PlaneGeometry(size, size);
     const material = new THREE.MeshPhongMaterial({color: 'gray'});
     const mesh = new THREE.Mesh(geometry, material);
     mesh.rotation.x = Math.PI * -0.5;

threejs/threejs-billboard-trees-static-billboards.html

@@ -57,13 +57,13 @@ function main() {
   const trunkRadius = .2;
   const trunkHeight = 1;
   const trunkRadialSegments = 12;
-  const trunkGeometry = new THREE.CylinderBufferGeometry(
+  const trunkGeometry = new THREE.CylinderGeometry(
       trunkRadius, trunkRadius, trunkHeight, trunkRadialSegments);
 
   const topRadius = trunkRadius * 4;
   const topHeight = trunkHeight * 2;
   const topSegments = 12;
-  const topGeometry = new THREE.ConeBufferGeometry(
+  const topGeometry = new THREE.ConeGeometry(
       topRadius, topHeight, topSegments);
 
   const trunkMaterial = new THREE.MeshPhongMaterial({color: 'brown'});
@@ -165,7 +165,7 @@ function main() {
 
   {
     const size = 400;
-    const geometry = new THREE.PlaneBufferGeometry(size, size);
+    const geometry = new THREE.PlaneGeometry(size, size);
     const material = new THREE.MeshPhongMaterial({color: 'gray'});
     const mesh = new THREE.Mesh(geometry, material);
     mesh.rotation.x = Math.PI * -0.5;

threejs/threejs-cameras-logarithmic-depth-buffer.html

@@ -89,7 +89,7 @@ function main() {
     const repeats = planeSize / 2;
     texture.repeat.set(repeats, repeats);
 
-    const planeGeo = new THREE.PlaneBufferGeometry(planeSize, planeSize);
+    const planeGeo = new THREE.PlaneGeometry(planeSize, planeSize);
     const planeMat = new THREE.MeshPhongMaterial({
       map: texture,
       side: THREE.DoubleSide,
@@ -102,7 +102,7 @@ function main() {
     const sphereRadius = 3;
     const sphereWidthDivisions = 32;
     const sphereHeightDivisions = 16;
-    const sphereGeo = new THREE.SphereBufferGeometry(sphereRadius, sphereWidthDivisions, sphereHeightDivisions);
+    const sphereGeo = new THREE.SphereGeometry(sphereRadius, sphereWidthDivisions, sphereHeightDivisions);
     const numSpheres = 20;
     for (let i = 0; i < numSpheres; ++i) {
       const sphereMat = new THREE.MeshPhongMaterial();

threejs/threejs-cameras-orthographic-2-scenes.html

@@ -117,7 +117,7 @@ function main() {
     const repeats = planeSize / 2;
     texture.repeat.set(repeats, repeats);
 
-    const planeGeo = new THREE.PlaneBufferGeometry(planeSize, planeSize);
+    const planeGeo = new THREE.PlaneGeometry(planeSize, planeSize);
     const planeMat = new THREE.MeshPhongMaterial({
       map: texture,
       side: THREE.DoubleSide,
@@ -128,7 +128,7 @@ function main() {
   }
   {
     const cubeSize = 4;
-    const cubeGeo = new THREE.BoxBufferGeometry(cubeSize, cubeSize, cubeSize);
+    const cubeGeo = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);
     const cubeMat = new THREE.MeshPhongMaterial({color: '#8AC'});
     const mesh = new THREE.Mesh(cubeGeo, cubeMat);
     mesh.position.set(cubeSize + 1, cubeSize / 2, 0);
@@ -138,7 +138,7 @@ function main() {
     const sphereRadius = 3;
     const sphereWidthDivisions = 32;
     const sphereHeightDivisions = 16;
-    const sphereGeo = new THREE.SphereBufferGeometry(sphereRadius, sphereWidthDivisions, sphereHeightDivisions);
+    const sphereGeo = new THREE.SphereGeometry(sphereRadius, sphereWidthDivisions, sphereHeightDivisions);
     const sphereMat = new THREE.MeshPhongMaterial({color: '#CA8'});
     const mesh = new THREE.Mesh(sphereGeo, sphereMat);
     mesh.position.set(-sphereRadius - 1, sphereRadius + 2, 0);

threejs/threejs-cameras-orthographic-canvas-top-left-origin.html

@@ -61,7 +61,7 @@ function main() {
     loader.load('resources/images/flower-6.jpg'),
   ];
   const planeSize = 256;
-  const planeGeo = new THREE.PlaneBufferGeometry(planeSize, planeSize);
+  const planeGeo = new THREE.PlaneGeometry(planeSize, planeSize);
   const planes = textures.map((texture) => {
     const planePivot = new THREE.Object3D();
     scene.add(planePivot);

threejs/threejs-cameras-perspective-2-scenes.html

@@ -117,7 +117,7 @@ function main() {
     const repeats = planeSize / 2;
     texture.repeat.set(repeats, repeats);
 
-    const planeGeo = new THREE.PlaneBufferGeometry(planeSize, planeSize);
+    const planeGeo = new THREE.PlaneGeometry(planeSize, planeSize);
     const planeMat = new THREE.MeshPhongMaterial({
       map: texture,
       side: THREE.DoubleSide,
@@ -128,7 +128,7 @@ function main() {
   }
   {
     const cubeSize = 4;
-    const cubeGeo = new THREE.BoxBufferGeometry(cubeSize, cubeSize, cubeSize);
+    const cubeGeo = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);
     const cubeMat = new THREE.MeshPhongMaterial({color: '#8AC'});
     const mesh = new THREE.Mesh(cubeGeo, cubeMat);
     mesh.position.set(cubeSize + 1, cubeSize / 2, 0);
@@ -138,7 +138,7 @@ function main() {
     const sphereRadius = 3;
     const sphereWidthDivisions = 32;
     const sphereHeightDivisions = 16;
-    const sphereGeo = new THREE.SphereBufferGeometry(sphereRadius, sphereWidthDivisions, sphereHeightDivisions);
+    const sphereGeo = new THREE.SphereGeometry(sphereRadius, sphereWidthDivisions, sphereHeightDivisions);
     const sphereMat = new THREE.MeshPhongMaterial({color: '#CA8'});
     const mesh = new THREE.Mesh(sphereGeo, sphereMat);
     mesh.position.set(-sphereRadius - 1, sphereRadius + 2, 0);

threejs/threejs-cameras-perspective.html

@@ -87,7 +87,7 @@ function main() {
     const repeats = planeSize / 2;
     texture.repeat.set(repeats, repeats);
 
-    const planeGeo = new THREE.PlaneBufferGeometry(planeSize, planeSize);
+    const planeGeo = new THREE.PlaneGeometry(planeSize, planeSize);
     const planeMat = new THREE.MeshPhongMaterial({
       map: texture,
       side: THREE.DoubleSide,
@@ -98,7 +98,7 @@ function main() {
   }
   {
     const cubeSize = 4;
-    const cubeGeo = new THREE.BoxBufferGeometry(cubeSize, cubeSize, cubeSize);
+    const cubeGeo = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);
     const cubeMat = new THREE.MeshPhongMaterial({color: '#8AC'});
     const mesh = new THREE.Mesh(cubeGeo, cubeMat);
     mesh.position.set(cubeSize + 1, cubeSize / 2, 0);
@@ -108,7 +108,7 @@ function main() {
     const sphereRadius = 3;
     const sphereWidthDivisions = 32;
     const sphereHeightDivisions = 16;
-    const sphereGeo = new THREE.SphereBufferGeometry(sphereRadius, sphereWidthDivisions, sphereHeightDivisions);
+    const sphereGeo = new THREE.SphereGeometry(sphereRadius, sphereWidthDivisions, sphereHeightDivisions);
     const sphereMat = new THREE.MeshPhongMaterial({color: '#CA8'});
     const mesh = new THREE.Mesh(sphereGeo, sphereMat);
     mesh.position.set(-sphereRadius - 1, sphereRadius + 2, 0);

threejs/threejs-cameras-z-fighting.html

@@ -86,7 +86,7 @@ function main() {
     const repeats = planeSize / 2;
     texture.repeat.set(repeats, repeats);
 
-    const planeGeo = new THREE.PlaneBufferGeometry(planeSize, planeSize);
+    const planeGeo = new THREE.PlaneGeometry(planeSize, planeSize);
     const planeMat = new THREE.MeshPhongMaterial({
       map: texture,
       side: THREE.DoubleSide,
@@ -99,7 +99,7 @@ function main() {
     const sphereRadius = 3;
     const sphereWidthDivisions = 32;
     const sphereHeightDivisions = 16;
-    const sphereGeo = new THREE.SphereBufferGeometry(sphereRadius, sphereWidthDivisions, sphereHeightDivisions);
+    const sphereGeo = new THREE.SphereGeometry(sphereRadius, sphereWidthDivisions, sphereHeightDivisions);
     const numSpheres = 20;
     for (let i = 0; i < numSpheres; ++i) {
       const sphereMat = new THREE.MeshPhongMaterial();

threejs/threejs-canvas-textured-labels-one-canvas.html

@@ -57,16 +57,16 @@ function main() {
   const bodyRadiusBottom = .2;
   const bodyHeight = 2;
   const bodyRadialSegments = 6;
-  const bodyGeometry = new THREE.CylinderBufferGeometry(
+  const bodyGeometry = new THREE.CylinderGeometry(
       bodyRadiusTop, bodyRadiusBottom, bodyHeight, bodyRadialSegments);
 
   const headRadius = bodyRadiusTop * 0.8;
   const headLonSegments = 12;
   const headLatSegments = 5;
-  const headGeometry = new THREE.SphereBufferGeometry(
+  const headGeometry = new THREE.SphereGeometry(
       headRadius, headLonSegments, headLatSegments);
 
-  const labelGeometry = new THREE.PlaneBufferGeometry(1, 1);
+  const labelGeometry = new THREE.PlaneGeometry(1, 1);
 
   const ctx = document.createElement('canvas').getContext('2d');
 
@@ -103,7 +103,7 @@ function main() {
 
   const forceTextureInitialization = function() {
     const material = new THREE.MeshBasicMaterial();
-    const geometry = new THREE.PlaneBufferGeometry();
+    const geometry = new THREE.PlaneGeometry();
     const scene = new THREE.Scene();
     scene.add(new THREE.Mesh(geometry, material));
     const camera = new THREE.Camera();

threejs/threejs-canvas-textured-labels-scale-to-fit.html

@@ -57,16 +57,16 @@ function main() {
   const bodyRadiusBottom = .2;
   const bodyHeight = 2;
   const bodyRadialSegments = 6;
-  const bodyGeometry = new THREE.CylinderBufferGeometry(
+  const bodyGeometry = new THREE.CylinderGeometry(
       bodyRadiusTop, bodyRadiusBottom, bodyHeight, bodyRadialSegments);
 
   const headRadius = bodyRadiusTop * 0.8;
   const headLonSegments = 12;
   const headLatSegments = 5;
-  const headGeometry = new THREE.SphereBufferGeometry(
+  const headGeometry = new THREE.SphereGeometry(
       headRadius, headLonSegments, headLatSegments);
 
-  const labelGeometry = new THREE.PlaneBufferGeometry(1, 1);
+  const labelGeometry = new THREE.PlaneGeometry(1, 1);
 
   function makeLabelCanvas(baseWidth, size, name) {
     const borderSize = 2;

threejs/threejs-canvas-textured-labels.html

@@ -57,16 +57,16 @@ function main() {
   const bodyRadiusBottom = .2;
   const bodyHeight = 2;
   const bodyRadialSegments = 6;
-  const bodyGeometry = new THREE.CylinderBufferGeometry(
+  const bodyGeometry = new THREE.CylinderGeometry(
       bodyRadiusTop, bodyRadiusBottom, bodyHeight, bodyRadialSegments);
 
   const headRadius = bodyRadiusTop * 0.8;
   const headLonSegments = 12;
   const headLatSegments = 5;
-  const headGeometry = new THREE.SphereBufferGeometry(
+  const headGeometry = new THREE.SphereGeometry(
       headRadius, headLonSegments, headLatSegments);
 
-  const labelGeometry = new THREE.PlaneBufferGeometry(1, 1);
+  const labelGeometry = new THREE.PlaneGeometry(1, 1);
 
   function makeLabelCanvas(size, name) {
     const borderSize = 2;

threejs/threejs-debug-js-clearing-logger.html

@@ -64,7 +64,7 @@ function main() {
   const scene = new THREE.Scene();
   scene.background = new THREE.Color('cyan');
 
-  const geometry = new THREE.SphereBufferGeometry();
+  const geometry = new THREE.SphereGeometry();
   const material = new THREE.MeshBasicMaterial({color: 'red'});
 
   const things = [];

threejs/threejs-debug-js-html-elements.html

@@ -51,7 +51,7 @@ function main() {
   const scene = new THREE.Scene();
   scene.background = new THREE.Color('red');
 
-  const geometry = new THREE.SphereBufferGeometry();
+  const geometry = new THREE.SphereGeometry();
   const material = new THREE.MeshBasicMaterial({color: 'yellow'});
 
   const mesh = new THREE.Mesh(geometry, material);

threejs/threejs-debug-js-params.html

@@ -113,7 +113,7 @@ function main() {
   const scene = new THREE.Scene();
   scene.background = new THREE.Color('cyan');
 
-  const geometry = new THREE.SphereBufferGeometry();
+  const geometry = new THREE.SphereGeometry();
   const material = new THREE.MeshBasicMaterial({color: 'red'});
 
   const things = [];

threejs/threejs-debugging-mcve.html

@@ -78,7 +78,7 @@ function main() {
     }
   }
 
-  const geometry = new THREE.BoxBufferGeometry(100, 100, 300);
+  const geometry = new THREE.BoxGeometry(100, 100, 300);
   const material = new THREE.MeshBasicMaterial({color: 'cyan'});
   const cars = [];
   for (let i = 0; i < 10; ++i) {

threejs/threejs-indexed-textures-picking-and-highlighting.html

@@ -123,7 +123,7 @@ function main() {
 
   {
     const loader = new THREE.TextureLoader();
-    const geometry = new THREE.SphereBufferGeometry(1, 64, 32);
+    const geometry = new THREE.SphereGeometry(1, 64, 32);
 
     const indexTexture = loader.load('resources/data/world/country-index-texture.png', render);
     indexTexture.minFilter = THREE.NearestFilter;

threejs/threejs-indexed-textures-picking-debounced.html

@@ -124,7 +124,7 @@ function main() {
 
   {
     const loader = new THREE.TextureLoader();
-    const geometry = new THREE.SphereBufferGeometry(1, 64, 32);
+    const geometry = new THREE.SphereGeometry(1, 64, 32);
 
     const indexTexture = loader.load('resources/data/world/country-index-texture.png', render);
     indexTexture.minFilter = THREE.NearestFilter;

threejs/threejs-indexed-textures-picking.html

@@ -88,7 +88,7 @@ function main() {
 
   {
     const loader = new THREE.TextureLoader();
-    const geometry = new THREE.SphereBufferGeometry(1, 64, 32);
+    const geometry = new THREE.SphereGeometry(1, 64, 32);
 
     const indexTexture = loader.load('resources/data/world/country-index-texture.png', render);
     indexTexture.minFilter = THREE.NearestFilter;

threejs/threejs-indexed-textures-random-colors.html

@@ -103,7 +103,7 @@ function main() {
 
   {
     const loader = new THREE.TextureLoader();
-    const geometry = new THREE.SphereBufferGeometry(1, 64, 32);
+    const geometry = new THREE.SphereGeometry(1, 64, 32);
 
     const indexTexture = loader.load('resources/data/world/country-index-texture.png', render);
     indexTexture.minFilter = THREE.NearestFilter;

threejs/threejs-lights-ambient.html

@@ -54,7 +54,7 @@ function main() {
     const repeats = planeSize / 2;
     texture.repeat.set(repeats, repeats);
 
-    const planeGeo = new THREE.PlaneBufferGeometry(planeSize, planeSize);
+    const planeGeo = new THREE.PlaneGeometry(planeSize, planeSize);
     const planeMat = new THREE.MeshPhongMaterial({
       map: texture,
       side: THREE.DoubleSide,
@@ -65,7 +65,7 @@ function main() {
   }
   {
     const cubeSize = 4;
-    const cubeGeo = new THREE.BoxBufferGeometry(cubeSize, cubeSize, cubeSize);
+    const cubeGeo = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);
     const cubeMat = new THREE.MeshPhongMaterial({color: '#8AC'});
     const mesh = new THREE.Mesh(cubeGeo, cubeMat);
     mesh.position.set(cubeSize + 1, cubeSize / 2, 0);
@@ -75,7 +75,7 @@ function main() {
     const sphereRadius = 3;
     const sphereWidthDivisions = 32;
     const sphereHeightDivisions = 16;
-    const sphereGeo = new THREE.SphereBufferGeometry(sphereRadius, sphereWidthDivisions, sphereHeightDivisions);
+    const sphereGeo = new THREE.SphereGeometry(sphereRadius, sphereWidthDivisions, sphereHeightDivisions);
     const sphereMat = new THREE.MeshPhongMaterial({color: '#CA8'});
     const mesh = new THREE.Mesh(sphereGeo, sphereMat);
     mesh.position.set(-sphereRadius - 1, sphereRadius + 2, 0);

threejs/threejs-lights-directional-w-helper.html

@@ -54,7 +54,7 @@ function main() {
     const repeats = planeSize / 2;
     texture.repeat.set(repeats, repeats);
 
-    const planeGeo = new THREE.PlaneBufferGeometry(planeSize, planeSize);
+    const planeGeo = new THREE.PlaneGeometry(planeSize, planeSize);
     const planeMat = new THREE.MeshPhongMaterial({
       map: texture,
       side: THREE.DoubleSide,
@@ -65,7 +65,7 @@ function main() {
   }
   {
     const cubeSize = 4;
-    const cubeGeo = new THREE.BoxBufferGeometry(cubeSize, cubeSize, cubeSize);
+    const cubeGeo = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);
     const cubeMat = new THREE.MeshPhongMaterial({color: '#8AC'});
     const mesh = new THREE.Mesh(cubeGeo, cubeMat);
     mesh.position.set(cubeSize + 1, cubeSize / 2, 0);
@@ -75,7 +75,7 @@ function main() {
     const sphereRadius = 3;
     const sphereWidthDivisions = 32;
     const sphereHeightDivisions = 16;
-    const sphereGeo = new THREE.SphereBufferGeometry(sphereRadius, sphereWidthDivisions, sphereHeightDivisions);
+    const sphereGeo = new THREE.SphereGeometry(sphereRadius, sphereWidthDivisions, sphereHeightDivisions);
     const sphereMat = new THREE.MeshPhongMaterial({color: '#CA8'});
     const mesh = new THREE.Mesh(sphereGeo, sphereMat);
     mesh.position.set(-sphereRadius - 1, sphereRadius + 2, 0);

threejs/threejs-lights-directional.html

@@ -54,7 +54,7 @@ function main() {
     const repeats = planeSize / 2;
     texture.repeat.set(repeats, repeats);
 
-    const planeGeo = new THREE.PlaneBufferGeometry(planeSize, planeSize);
+    const planeGeo = new THREE.PlaneGeometry(planeSize, planeSize);
     const planeMat = new THREE.MeshPhongMaterial({
       map: texture,
       side: THREE.DoubleSide,
@@ -65,7 +65,7 @@ function main() {
   }
   {
     const cubeSize = 4;
-    const cubeGeo = new THREE.BoxBufferGeometry(cubeSize, cubeSize, cubeSize);
+    const cubeGeo = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);
     const cubeMat = new THREE.MeshPhongMaterial({color: '#8AC'});
     const mesh = new THREE.Mesh(cubeGeo, cubeMat);
     mesh.position.set(cubeSize + 1, cubeSize / 2, 0);
@@ -75,7 +75,7 @@ function main() {
     const sphereRadius = 3;
     const sphereWidthDivisions = 32;
     const sphereHeightDivisions = 16;
-    const sphereGeo = new THREE.SphereBufferGeometry(sphereRadius, sphereWidthDivisions, sphereHeightDivisions);
+    const sphereGeo = new THREE.SphereGeometry(sphereRadius, sphereWidthDivisions, sphereHeightDivisions);
     const sphereMat = new THREE.MeshPhongMaterial({color: '#CA8'});
     const mesh = new THREE.Mesh(sphereGeo, sphereMat);
     mesh.position.set(-sphereRadius - 1, sphereRadius + 2, 0);

threejs/threejs-lights-hemisphere.html

@@ -54,7 +54,7 @@ function main() {
     const repeats = planeSize / 2;
     texture.repeat.set(repeats, repeats);
 
-    const planeGeo = new THREE.PlaneBufferGeometry(planeSize, planeSize);
+    const planeGeo = new THREE.PlaneGeometry(planeSize, planeSize);
     const planeMat = new THREE.MeshPhongMaterial({
       map: texture,
       side: THREE.DoubleSide,
@@ -65,7 +65,7 @@ function main() {
   }
   {
     const cubeSize = 4;
-    const cubeGeo = new THREE.BoxBufferGeometry(cubeSize, cubeSize, cubeSize);
+    const cubeGeo = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);
     const cubeMat = new THREE.MeshPhongMaterial({color: '#8AC'});
     const mesh = new THREE.Mesh(cubeGeo, cubeMat);
     mesh.position.set(cubeSize + 1, cubeSize / 2, 0);
@@ -75,7 +75,7 @@ function main() {
     const sphereRadius = 3;
     const sphereWidthDivisions = 32;
     const sphereHeightDivisions = 16;
-    const sphereGeo = new THREE.SphereBufferGeometry(sphereRadius, sphereWidthDivisions, sphereHeightDivisions);
+    const sphereGeo = new THREE.SphereGeometry(sphereRadius, sphereWidthDivisions, sphereHeightDivisions);
     const sphereMat = new THREE.MeshPhongMaterial({color: '#CA8'});
     const mesh = new THREE.Mesh(sphereGeo, sphereMat);
     mesh.position.set(-sphereRadius - 1, sphereRadius + 2, 0);