How can I create a realistic rain effect using react-three-fiber and react-three-drei?

Questions
, ,
2

what version of three are you using? THREE.Geometry() has been deprecated since r125, the updated api above r125 uses BufferGeometry of which vertices does not exist, instead you would use the geometry.attributes.position attribute of the BufferGeometry, you’d essentially need to reformat your code to something like the following…

const rainGeo = new THREE.BufferGeometry();
const rainDrops = []
for(let i=0; i<rainCount; i++) {
  const rainDrop = {}
  rainDrop.position = new THREE.Vector3(
    Math.random()*400-200,
    Math.random()*500-250,
    Math.random()*400-200
  )
  rainDrop.velocity = {};
  rainDrop.velocity = 0;
  rainDrops.push(rainDrop);
}
const rainPoints = rainDrops.map(rainDrop => rainDrop.position);
rainGeo.setFromPoints(rainPoints)

you can also see this amazing demo by @prisoner849 which has a great rain effect…

2 Likes