fixes for r110

threejs/background-v01.html

@@ -46,7 +46,7 @@ function main() {
   const camSpeed = 0.2;
 
   if (useOrbitCamera) {
-    const controls = new OrbitControls(camera);
+    const controls = new OrbitControls(camera, canvas);
     controls.target.set(0, 100.01, 0.2);
     controls.update();
   }

threejs/background.html

@@ -47,7 +47,7 @@ function main() {
   const showHelpers = false;
 
   if (useOrbitCamera) {
-    const controls = new OrbitControls(camera);
+    const controls = new OrbitControls(camera, canvas);
     controls.target.set(0, 0, 0);
     controls.update();
   }

threejs/lessons/resources/threejs-custom-buffergeometry.js

@@ -82,10 +82,10 @@ import {threejsLessonUtils} from './threejs-lesson-utils.js';
         const positionNumComponents = 3;
         const uvNumComponents = 2;
         const geometry = new THREE.BufferGeometry();
-        geometry.addAttribute(
+        geometry.setAttribute(
             'position',
             new THREE.BufferAttribute(new Float32Array(positions), positionNumComponents));
-        geometry.addAttribute(
+        geometry.setAttribute(
             'uv',
             new THREE.BufferAttribute(new Float32Array(uvs), uvNumComponents));
 

threejs/lessons/threejs-custom-buffergeometry.md

@@ -133,13 +133,13 @@ and add it to the `BufferGeometry`.
   const positionNumComponents = 3;
   const normalNumComponents = 3;
   const uvNumComponents = 2;
-  geometry.addAttribute(
+  geometry.setAttribute(
       'position',
       new THREE.BufferAttribute(new Float32Array(positions), positionNumComponents));
-  geometry.addAttribute(
+  geometry.setAttribute(
       'normal',
       new THREE.BufferAttribute(new Float32Array(normals), normalNumComponents));
-  geometry.addAttribute(
+  geometry.setAttribute(
       'uv',
       new THREE.BufferAttribute(new Float32Array(uvs), uvNumComponents));
 ```
@@ -223,13 +223,13 @@ So now we have 24 unique vertices. Then we specify 36 indices
 for the 36 vertices we need drawn to make 12 triangles by calling `BufferGeometry.setIndex` with an array of indices.
 
 ```js
-geometry.addAttribute(
+geometry.setAttribute(
     'position',
     new THREE.BufferAttribute(positions, positionNumComponents));
-geometry.addAttribute(
+geometry.setAttribute(
     'normal',
     new THREE.BufferAttribute(normals, normalNumComponents));
-geometry.addAttribute(
+geometry.setAttribute(
     'uv',
     new THREE.BufferAttribute(uvs, uvNumComponents));
 
@@ -303,15 +303,15 @@ for (const vertex of vertices) {
 +  uvNdx += uvNumComponents;
 }
 
-geometry.addAttribute(
+geometry.setAttribute(
     'position',
 -    new THREE.BufferAttribute(new Float32Array(positions), positionNumComponents));
 +    new THREE.BufferAttribute(positions, positionNumComponents));
-geometry.addAttribute(
+geometry.setAttribute(
     'normal',
 -    new THREE.BufferAttribute(new Float32Array(normals), normalNumComponents));
 +    new THREE.BufferAttribute(normals, normalNumComponents));
-geometry.addAttribute(
+geometry.setAttribute(
     'uv',
 -    new THREE.BufferAttribute(new Float32Array(uvs), uvNumComponents));
 +    new THREE.BufferAttribute(uvs, uvNumComponents));
@@ -417,11 +417,11 @@ const positionNumComponents = 3;
 const normalNumComponents = 3;
 
 +const positionAttribute = new THREE.BufferAttribute(positions, positionNumComponents);
-+positionAttribute.dynamic = true;
-geometry.addAttribute(
++positionAttribute.setUsage(THREE.DynamicDrawUsage);
+geometry.setAttribute(
     'position',
 +    positionAttribute);
-geometry.addAttribute(
+geometry.setAttribute(
     'normal',
     new THREE.BufferAttribute(normals, normalNumComponents));
 geometry.setIndex(indices);

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

@@ -686,7 +686,7 @@ scene.add(mesh);
 +mesh.onBeforeRender = function(renderer, scene, camera, geometry) {
 +  // remove all the color attributes
 +  for (const {name} of colorAttributes) {
-+    geometry.removeAttribute(name);
++    geometry.deleteAttribute(name);
 +  }
 +
 +  for (let i = 0; i < colorAttributes.length; ++i) {
@@ -698,7 +698,7 @@ scene.add(mesh);
 +    // where 2 is the index of the data set
 +    const ndx = parseInt(attrib.name);
 +    const name = `morphColor${i}`;
-+    geometry.addAttribute(name, colorAttributes[ndx].attribute);
++    geometry.setAttribute(name, colorAttributes[ndx].attribute);
 +  }
 +};
 ```

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

@@ -491,7 +491,7 @@ data.forEach((row, latNdx) => {
 +
 +    const normalized = true;
 +    const colorAttrib = new THREE.BufferAttribute(colors, itemSize, normalized);
-+    geometry.addAttribute('color', colorAttrib);
++    geometry.setAttribute('color', colorAttrib);
 
     geometries.push(geometry);
   });
@@ -500,7 +500,7 @@ data.forEach((row, latNdx) => {
 
 The code above looks up the number or vertices needed by getting the `position`
 attribute from the geometry. We then create a `Uint8Array` to put the colors in.
-It then adds that as an attribute by calling `geometry.addAttribute`.
+It then adds that as an attribute by calling `geometry.setAttribute`.
 
 Lastly we need to tell three.js to use the vertex colors. 
 

threejs/lessons/threejs-voxel-geometry.md

@@ -508,10 +508,10 @@ const material = new THREE.MeshLambertMaterial({color: 'green'});
 
 const positionNumComponents = 3;
 const normalNumComponents = 3;
-geometry.addAttribute(
+geometry.setAttribute(
     'position',
     new THREE.BufferAttribute(new Float32Array(positions), positionNumComponents));
-geometry.addAttribute(
+geometry.setAttribute(
     'normal',
     new THREE.BufferAttribute(new Float32Array(normals), normalNumComponents));
 geometry.setIndex(indices);
@@ -750,13 +750,13 @@ const geometry = new THREE.BufferGeometry();
 const positionNumComponents = 3;
 const normalNumComponents = 3;
 +const uvNumComponents = 2;
-geometry.addAttribute(
+geometry.setAttribute(
     'position',
     new THREE.BufferAttribute(new Float32Array(positions), positionNumComponents));
-geometry.addAttribute(
+geometry.setAttribute(
     'normal',
     new THREE.BufferAttribute(new Float32Array(normals), normalNumComponents));
-+geometry.addAttribute(
++geometry.setAttribute(
 +    'uv',
 +    new THREE.BufferAttribute(new Float32Array(uvs), uvNumComponents));
 geometry.setIndex(indices);
@@ -1129,13 +1129,13 @@ function updateCellGeometry(x, y, z) {
     const normalNumComponents = 3;
     const uvNumComponents = 2;
 
-    geometry.addAttribute(
+    geometry.setAttribute(
         'position',
         new THREE.BufferAttribute(new Float32Array(0), positionNumComponents));
-    geometry.addAttribute(
+    geometry.setAttribute(
         'normal',
         new THREE.BufferAttribute(new Float32Array(0), normalNumComponents));
-    geometry.addAttribute(
+    geometry.setAttribute(
         'uv',
         new THREE.BufferAttribute(new Float32Array(0), uvNumComponents));
 

threejs/threejs-custom-buffergeometry-cube-indexed.html

@@ -90,13 +90,13 @@ function main() {
   const positionNumComponents = 3;
   const normalNumComponents = 3;
   const uvNumComponents = 2;
-  geometry.addAttribute(
+  geometry.setAttribute(
       'position',
       new THREE.BufferAttribute(new Float32Array(positions), positionNumComponents));
-  geometry.addAttribute(
+  geometry.setAttribute(
       'normal',
       new THREE.BufferAttribute(new Float32Array(normals), normalNumComponents));
-  geometry.addAttribute(
+  geometry.setAttribute(
       'uv',
       new THREE.BufferAttribute(new Float32Array(uvs), uvNumComponents));
 

threejs/threejs-custom-buffergeometry-cube-typedarrays.html

@@ -97,13 +97,13 @@ function main() {
   }
 
   const geometry = new THREE.BufferGeometry();
-  geometry.addAttribute(
+  geometry.setAttribute(
       'position',
       new THREE.BufferAttribute(positions, positionNumComponents));
-  geometry.addAttribute(
+  geometry.setAttribute(
       'normal',
       new THREE.BufferAttribute(normals, normalNumComponents));
-  geometry.addAttribute(
+  geometry.setAttribute(
       'uv',
       new THREE.BufferAttribute(uvs, uvNumComponents));
 

threejs/threejs-custom-buffergeometry-cube.html

@@ -108,13 +108,13 @@ function main() {
   const positionNumComponents = 3;
   const normalNumComponents = 3;
   const uvNumComponents = 2;
-  geometry.addAttribute(
+  geometry.setAttribute(
       'position',
       new THREE.BufferAttribute(new Float32Array(positions), positionNumComponents));
-  geometry.addAttribute(
+  geometry.setAttribute(
       'normal',
       new THREE.BufferAttribute(new Float32Array(normals), normalNumComponents));
-  geometry.addAttribute(
+  geometry.setAttribute(
       'uv',
       new THREE.BufferAttribute(new Float32Array(uvs), uvNumComponents));
 

threejs/threejs-custom-buffergeometry-dynamic.html

@@ -106,11 +106,11 @@ function main() {
   const normalNumComponents = 3;
 
   const positionAttribute = new THREE.BufferAttribute(positions, positionNumComponents);
-  positionAttribute.dynamic = true;
-  geometry.addAttribute(
+  positionAttribute.setUsage(THREE.DynamicDrawUsage);
+  geometry.setAttribute(
       'position',
       positionAttribute);
-  geometry.addAttribute(
+  geometry.setAttribute(
       'normal',
       new THREE.BufferAttribute(normals, normalNumComponents));
   geometry.setIndex(indices);

threejs/threejs-lots-of-objects-animated.html

@@ -208,7 +208,7 @@ function main() {
 
         const normalized = true;
         const colorAttrib = new THREE.BufferAttribute(colors, itemSize, normalized);
-        geometry.addAttribute('color', colorAttrib);
+        geometry.setAttribute('color', colorAttrib);
 
         geometries.push(geometry);
       });

threejs/threejs-lots-of-objects-merged-vertexcolors.html

@@ -154,7 +154,7 @@ function main() {
 
         const normalized = true;
         const colorAttrib = new THREE.BufferAttribute(colors, itemSize, normalized);
-        geometry.addAttribute('color', colorAttrib);
+        geometry.setAttribute('color', colorAttrib);
 
         geometries.push(geometry);
       });

threejs/threejs-lots-of-objects-morphtargets-w-colors.html

@@ -217,7 +217,7 @@ function main() {
 
         const normalized = true;
         const colorAttrib = new THREE.BufferAttribute(colors, itemSize, normalized);
-        geometry.addAttribute('color', colorAttrib);
+        geometry.setAttribute('color', colorAttrib);
 
         geometries.push(geometry);
       });
@@ -374,7 +374,7 @@ function main() {
     mesh.onBeforeRender = function(renderer, scene, camera, geometry) {
       // remove all the color attributes
       for (const {name} of colorAttributes) {
-        geometry.removeAttribute(name);
+        geometry.deleteAttribute(name);
       }
 
       for (let i = 0; i < colorAttributes.length; ++i) {
@@ -386,7 +386,7 @@ function main() {
         // where 2 is the index of the data set
         const ndx = parseInt(attrib.name);
         const name = `morphColor${i}`;
-        geometry.addAttribute(name, colorAttributes[ndx].attribute);
+        geometry.setAttribute(name, colorAttributes[ndx].attribute);
       }
     };
 

threejs/threejs-lots-of-objects-morphtargets.html

@@ -217,7 +217,7 @@ function main() {
 
         const normalized = true;
         const colorAttrib = new THREE.BufferAttribute(colors, itemSize, normalized);
-        geometry.addAttribute('color', colorAttrib);
+        geometry.setAttribute('color', colorAttrib);
 
         geometries.push(geometry);
       });

threejs/threejs-lots-of-objects-multiple-data-sets.html

@@ -175,7 +175,7 @@ function main() {
 
         const normalized = true;
         const colorAttrib = new THREE.BufferAttribute(colors, itemSize, normalized);
-        geometry.addAttribute('color', colorAttrib);
+        geometry.setAttribute('color', colorAttrib);
 
         geometries.push(geometry);
       });

threejs/threejs-voxel-geometry-culled-faces-ui.html

@@ -402,13 +402,13 @@ function main() {
       const normalNumComponents = 3;
       const uvNumComponents = 2;
 
-      geometry.addAttribute(
+      geometry.setAttribute(
           'position',
           new THREE.BufferAttribute(new Float32Array(0), positionNumComponents));
-      geometry.addAttribute(
+      geometry.setAttribute(
           'normal',
           new THREE.BufferAttribute(new Float32Array(0), normalNumComponents));
-      geometry.addAttribute(
+      geometry.setAttribute(
           'uv',
           new THREE.BufferAttribute(new Float32Array(0), uvNumComponents));
 

threejs/threejs-voxel-geometry-culled-faces-with-textures.html

@@ -259,13 +259,13 @@ function main() {
   const positionNumComponents = 3;
   const normalNumComponents = 3;
   const uvNumComponents = 2;
-  geometry.addAttribute(
+  geometry.setAttribute(
       'position',
       new THREE.BufferAttribute(new Float32Array(positions), positionNumComponents));
-  geometry.addAttribute(
+  geometry.setAttribute(
       'normal',
       new THREE.BufferAttribute(new Float32Array(normals), normalNumComponents));
-  geometry.addAttribute(
+  geometry.setAttribute(
       'uv',
       new THREE.BufferAttribute(new Float32Array(uvs), uvNumComponents));
   geometry.setIndex(indices);

threejs/threejs-voxel-geometry-culled-faces.html

@@ -219,10 +219,10 @@ function main() {
 
   const positionNumComponents = 3;
   const normalNumComponents = 3;
-  geometry.addAttribute(
+  geometry.setAttribute(
       'position',
       new THREE.BufferAttribute(new Float32Array(positions), positionNumComponents));
-  geometry.addAttribute(
+  geometry.setAttribute(
       'normal',
       new THREE.BufferAttribute(new Float32Array(normals), normalNumComponents));
   geometry.setIndex(indices);