title: Three JS - Uncaught TypeError: Cannot read property 'x' of undefined
body: <p>I'm trying to create a morphing object based on a number of particles, I have 4 objects, 2 normal three js shapes (cube and sphere) and 2 OBJ objects.
  When I hover the related name of the object it changes to that one.</p>
  
  <p>The problem here is that when I try to hover the name of the obj object the console.log returns the following error at the last line where I try to get newParticles.vertices[i].x, etc:</p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot read property 'x' of undefined</p>
  </blockquote>
  
  <p>Code:</p>
  
  <pre><code>// Particle Vars
  var particleCount = numberOfParticles;
  
  let spherePoints,
          cubePoints,
          rocketPoints,
          spacemanPoints;
  
  var particles = new Geometry(),
          sphereParticles = new Geometry(),
          cubeParticles = new Geometry(),
          rocketParticles = new Geometry(),
          spacemanParticles = new Geometry();
  
  var pMaterial = new PointsMaterial({
              color: particleColor,
              size: particleSize,
              map: new TextureLoader().load(particleImage),
              blending: AdditiveBlending,
              transparent: true
  });
  
  // Objects
  var geometry = new SphereGeometry( 5, 30, 30 );
  
  spherePoints = GeometryUtils.randomPointsInGeometry(geometry, particleCount)
  
  var geometry = new BoxGeometry( 9, 9, 9 );
  
  cubePoints = GeometryUtils.randomPointsInGeometry(geometry, particleCount)
  
  // Custom (OGJ) Objects
  
  const codepenAssetUrl = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/605067/';
  
  var objLoader = new OBJLoader();
  objLoader.setPath('./upload/');
  objLoader.load( 'Nymph.obj', function ( object ) {
      object.traverse( function ( child ) {
          if ( child instanceof Mesh ) {
              let scale = 0.2; //era 2.1 per il razzo
  
              let area = new Box3();
                  area.setFromObject( child );
              let yOffset = (area.max.y * scale) / 2;
  
              child.geometry.scale(scale,scale,scale);
              rocketPoints = GeometryUtils.randomPointsInBufferGeometry(child.geometry, particleCount);
              createVertices(rocketParticles, rocketPoints, yOffset, 2);
          }
      });
  });
  
  var objLoader = new OBJLoader();
  objLoader.setPath(codepenAssetUrl);
  objLoader.load( 'Astronaut.obj', function ( object ) {
      object.traverse( function ( child ) {
          if ( child instanceof Mesh ) {
              let scale = 4.6;
  
              let area = new Box3();
                  area.setFromObject( child );
              let yOffset = (area.max.y * scale) / 2;
  
              child.geometry.scale(scale,scale,scale);
              spacemanPoints = GeometryUtils.randomPointsInBufferGeometry(child.geometry, particleCount);
              createVertices(spacemanParticles, spacemanPoints, yOffset, 3);
          }
      });
  });
  
  // Particles
  for (var p = 0; p &lt; particleCount; p++) {
      var vertex = new Vector3();
              vertex.x = 0;
              vertex.y = 0;
              vertex.z = 0;
  
      particles.vertices.push(vertex);
  }
  
  createVertices (sphereParticles, spherePoints, null, null)
  createVertices (cubeParticles, cubePoints, null, 1)
  
  function createVertices (emptyArray, points, yOffset = 0, trigger = null) {
      for (var p = 0; p &lt; particleCount; p++) {
          var vertex = new Vector3();
                  vertex.x = points[p]['x'];
                  vertex.y = points[p]['y'] - yOffset;
                  vertex.z = points[p]['z'];
  
          emptyArray.vertices.push(vertex);
      }
      if (trigger !== null) {
          triggers[trigger].setAttribute('data-disabled', false)
      }
  }
  
  var particleSystem = new Points(
      particles,
      pMaterial
  );
  
  particleSystem.sortParticles = true;
  
  // Add the particles to the scene
  scene.add(particleSystem);
  
  // Animate
  const normalSpeed = (defaultAnimationSpeed/100),
              fullSpeed = (morphAnimationSpeed/100)
  
  let animationVars = {
      speed: normalSpeed
  }
  
  function animate() {
      particleSystem.rotation.y += animationVars.speed;
      particles.verticesNeedUpdate = true;
  
      window.requestAnimationFrame( animate );
      renderer.render( scene, camera );
  }
  
  animate();
  setTimeout(toSphere, 500);
  
  function toSphere () {
      handleTriggers(0);
      morphTo(sphereParticles);
  }
  
  function toCube () {
      handleTriggers(1);
      morphTo(cubeParticles);
  }
  
  function toRocket () {
      handleTriggers(2);
      morphTo(rocketParticles);
  }
  
  function toSpaceman () {
      handleTriggers(3);
      morphTo(spacemanParticles);
  }
  
  function morphTo (newParticles, color = '0xffffff') {
      TweenMax.to(animationVars, .3, {ease:
  Power4.easeIn, speed: fullSpeed, onComplete: slowDown});
      particleSystem.material.color.setHex(color);
  
      for (var i = 0; i &lt; particles.vertices.length; i++){
          TweenMax.to(particles.vertices[i], 4, {ease:
  Elastic.easeOut.config( 1, 0.75), x: newParticles.vertices[i].x, y: newParticles.vertices[i].y, z: newParticles.vertices[i].z})
      }
  }
  </code></pre>
  
  <p>P.S. note that I'm using webpack.</p>