Fix birds color effect with Three.js v0.174.0

[nakamuraos]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

Works with Three.js v0.174.0

Here is the diff that solved my problem:

diff --git a/node_modules/vanta/src/vanta.birds.js b/node_modules/vanta/src/vanta.birds.js
index b7517ed..f0b12a0 100644
--- a/node_modules/vanta/src/vanta.birds.js
+++ b/node_modules/vanta/src/vanta.birds.js
@@ -746,24 +746,20 @@ class Birds extends VantaBase {
         const gradient = options.colorMode.indexOf('Gradient') != -1
 
         const newBirdGeo = getNewBirdGeometryBasic(options)
-        const numV = newBirdGeo.attributes.position.length
+        const numV = newBirdGeo.attributes.position.count * 3
         const birdColors = new THREE.BufferAttribute(new Float32Array(numV), 3)
         if (gradient) {
-          for (var j=0; j<newBirdGeo.index.array.length; j+=3) {
+          for (var j=0; j<newBirdGeo.index.count; j+=3) {
             for (var k=0; k<=2; k++) {
               const index = newBirdGeo.index.array[j+k]
               const newColor = this.getNewCol()
-              birdColors.array[index*3] = newColor.r
-              birdColors.array[index*3+1] = newColor.g
-              birdColors.array[index*3+2] = newColor.b
+              birdColors.setXYZ(index, newColor.r, newColor.g, newColor.b);
             }
           }
         } else {
           const newColor = this.getNewCol(i/numBirds)
-          for (var j=0; j<birdColors.array.length; j+=3) {
-            birdColors.array[j] = newColor.r
-            birdColors.array[j+1] = newColor.g
-            birdColors.array[j+2] = newColor.b
+          for (var j=0; j<birdColors.count; j+=3) {
+            birdColors.setXYZ(j, newColor.r, newColor.g, newColor.b);
           }
         }
         newBirdGeo.setAttribute('color', birdColors)
@@ -774,7 +770,7 @@ class Birds extends VantaBase {
             color: 0xffffff,
             side: THREE.DoubleSide,
             // colors: THREE.VertexColors,
-					  vertexColors: THREE.VertexColors,
+            vertexColors: true,
           }))
         bird.phase = Math.floor( Math.random() * 62.83 )
         bird.position.x = boids[i].position.x

import * as THREE from "three"
import BIRDS from "vanta/src/vanta.birds"
...
BIRDS({
  el: backgroundRef.current,
  THREE: THREE,
  mouseControls: true,
  touchControls: true,
  gyroControls: false,
  minHeight: 200.0,
  minWidth: 200.0,
  scale: 1.0,
  scaleMobile: 1.0,
  quantity: 2.0
})

This issue body was partially generated by patch-package.