title: Particle Sphere not fully drawn when looping through vertices
body: <p>I am drawing a sphere in THREEJS with particles. That works good.</p>
  
  <p>However i loop trough those points to animate(reposition them). Works just fine when i use widthSegments under 50(WidthSegement is the 2nd argument). Anything above 50 will stop being drawn.</p>
  
  <p>For reference:</p>
  
  <pre><code>SphereGeometry(radius, widthSegments, heightSegments)
  </code></pre>
  
  <p>This would work fine:</p>
  
  <pre><code>let geometry = new THREE.SphereGeometry(30, 50, 20);
  </code></pre>
  
  <p>And produce this effect: <a href="https://i.stack.imgur.com/7pFEa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7pFEa.png" alt="Sphere with arguments(30,50,20)"></a></p>
  
  <p>if i go with like 100 segments for example i would get this result:
  <a href="https://i.stack.imgur.com/V64Oi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/V64Oi.png" alt="enter image description here"></a></p>
  
  <p>However this only happens when i loop trough the points to alter their position.</p>
  
  <p>It still animates the existing points. but not any others.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//Related to the audio api
  let AudioContext = window.AudioContext || window.webkitAudioContext,
    ctxAudio = new AudioContext(),
    sampleRate = ctxAudio.sampleRate,
    audio = document.getElementById("sound"),
    audioSrc = ctxAudio.createMediaElementSource(audio),
    analyser = ctxAudio.createAnalyser(),
    bufferLength = analyser.frequencyBinCount,
    dataArray = new Uint8Array(bufferLength);
  analyser.fftSize = 2048 * 2;
  analyser.smoothingTimeConstant = 0.75;
  audioSrc.connect(analyser);
  audioSrc.connect(ctxAudio.destination);
  
  //Setting up the renderer
  let renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
  
  //Defining the objects in the scene
  let geometry = new THREE.SphereGeometry(30, 100, 20);
  let loader = new THREE.TextureLoader();
  loader.crossOrigin = true;
  let particleTexture = loader.load('https://threejs.org/examples/textures/particle2.png');
  let material = new THREE.PointsMaterial({
    color: 0x20C9BD,
    size: 1,
    transparent: true,
    blending: THREE.AdditiveBlending,
    map: particleTexture,
    depthWrite: false
  });
  
  let points = new THREE.Points(geometry, material);
  let scene = new THREE.Scene();
  let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  
  
  //Setting the scene
  scene.add(points);
  camera.position.z = 100;
  
  //Copy the default sphere into a vector
  const def = new THREE.Vector3;
  for (let i = 0; i &lt; geometry.vertices.length; i++) {
    def[i] = {
      x: geometry.vertices[i].x,
      y: geometry.vertices[i].y,
      z: geometry.vertices[i].z
    };
  }
  
  //Render the scene(looping through it 60 times a second)
  //This is where the issue is
  function render() {
    requestAnimationFrame(render);
    analyser.getByteFrequencyData(dataArray);
    camera.lookAt(points.position);
    for (let i = 0; i &lt; geometry.vertices.length; i++) {
      let particle = geometry.vertices[i];
      let dx = def[i].x * (dataArray[i] / 255.0) + def[i].x;
      let dy = def[i].y * (dataArray[i] / 255.0) + def[i].y;
      let dz = def[i].z * (dataArray[i] / 255.0) + def[i].z;
      particle.set(dx, dy, dz); //&lt;--this is where the issue is.
    }
    geometry.verticesNeedUpdate = true;
    renderer.render(scene, camera);
  }
  render();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://rawgit.com/mrdoob/three.js/master/build/three.min.js"&gt;&lt;/script&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Title&lt;/title&gt;
    &lt;script src="../js/three.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;audio id="sound" controls src="http://tackj.happyvisocoders.be/audio/DieForYou-Starset.mp3"&gt;&lt;/audio&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>If you comment out the particle.set(dx,dy,dz) it draws perfectly.
  However this animates the particles to move along with the music. So its important to keep this part.</p>
  
  <p>Why doesn't the sphere draw completly and how can i fix this?</p>