Uncaught push problem

Questions
1

Hey i keep getting this error:

Uncaught TypeError: Cannot read properties of undefined (reading ‘push’)

not sure why any idea’s?

code:

 rainGeo = new THREE.BufferGeometry();
      for(let i=0;i<rainCount;i++) {
        var rainDrop = new THREE.Vector3(
          Math.random() * 400 -200,
          Math.random() * 500 - 250,
          Math.random() * 400 - 200
        );
        rainDrop.velocity = {};
        rainDrop.velocity = 0;
        rainGeo.vertices.push(rainDrop);
        
      }
      rainMaterial = new THREE.PointsMaterial({
        color: 0xaaaaaa,
        size: 0.1,
        transparent: true
      });
      rain = new THREE.Points(rainGeo,rainMaterial);
      scene.add(rain);

animate:


rainGeo.vertices.forEach(p => {
        p.velocity -= 0.1 + Math.random() * 0.1;
        p.y += p.velocity;
        if (p.y < -200) {
          p.y = 200;
          p.velocity = 0;
        }
      });
      rainGeo.verticesNeedUpdate = true;
      rain.rotation.y +=0.002;

thanks in advance

2

An instance of BufferGeometry has not vertices property. It seems the code you are using is based on the deprecated Geometry class. Try to change your code like so:

let camera, scene, renderer;

let rain;
const velocity = [];

init();
animate();

function init() {

  camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
  camera.position.z = 400;

  scene = new THREE.Scene();

  const geometry = new THREE.BufferGeometry();
  const vertices = [];

  for (let i = 0; i < 1000; i++) {
    var rainDrop = new THREE.Vector3(
      Math.random() * 400 - 200,
      Math.random() * 500 - 250,
      Math.random() * 400 - 200
    );

    vertices.push(rainDrop.x, rainDrop.y, rainDrop.z);
    velocity.push(0);

  }

  const positionAttribute = new THREE.Float32BufferAttribute(vertices, 3)

  positionAttribute.setUsage(THREE.DynamicDrawUsage);
  geometry.setAttribute('position', positionAttribute);

  const material = new THREE.PointsMaterial({
    color: 0xaaaaaa,
    size: 1,
    transparent: true
  });
  rain = new THREE.Points(geometry, material);
  scene.add(rain);

  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

}

function animate() {

  requestAnimationFrame(animate);

  const positionAttribute = rain.geometry.getAttribute('position');

  for (let i = 0; i < positionAttribute.count; i++) {

    velocity[i] -= 0.1 + Math.random() * 0.1;

    let y = positionAttribute.getY(i);

    y += velocity[i];

    if (y < -200) {

      y = 200;
      velocity[i] = 0;

    }

    positionAttribute.setY(i, y);

  }

  positionAttribute.needsUpdate = true;

  rain.rotation.y += 0.002;

  renderer.render(scene, camera);

}

Complete live example: Edit fiddle - JSFiddle - Code Playground

2 Likes
3

it sure was i thought i could just replace the Geometry with buffer my bad!