title: How to create lines between nearby particles in ThreeJS?
body: <p>I have been able to create a particle system for canvas, which was simple and effective.</p>
  
  <p>Here is a demo:
  <a href="https://awingit.github.io/particles/" rel="noreferrer">https://awingit.github.io/particles/</a></p>
  
  <p>Now what I would like to do is create the same thing in Threejs. However, I have not yet found any examples out there to reference from and I have not been able to create the same as my 2D canvas particle system in 3D.</p>
  
  <p>Can anyone give me some direction with regards to how I can do this in Threejs?</p>
  
  <p>I know how to work with particles, but what I am struggling with is connecting nearby points with lines.</p>
  
  <p>Here is how I add basic particles to create a snow/rain effect:</p>
  
  <pre><code>function createSnow() {
      for (var i = 0; i &lt; particleCount; i++) {
          var pX = Math.random() * 800 - 400,
              pY = Math.random() * 700 - 250,
              pZ = Math.random() * 800 - 400,
              particle = new THREE.Vector3(pX, pY, pZ);
          particle.velocity = {};
          particle.velocity.y = -1;
          particles.vertices.push(particle);
      }
      particleSystem = new THREE.Points(particles, pMaterial);
      particleSystem.position.y = 0;
      scene.add(particleSystem);
  }
  
  // This goes in the update loop
  function animateSnow() {
      var pCount = particleCount;
      while (pCount--) {
          var particle = particles.vertices[pCount];
          if (particle.y &lt; -55) {
              particle.y = 500;
              particle.velocity.y = -1.2;
          }
          particle.velocity.y -= Math.random() * .02;
          particle.y += particle.velocity.y;
      }
      particles.verticesNeedUpdate = true;
  }
  </code></pre>
  
  <p>So how do I connect lines between nearby points?</p>
  
  <p>Any feedback or direction is much appreciated.</p>
  
  <p>UPDATE:
  Here is a pic which looks similar to what I am hoping to achieve...
  <a href="https://i.stack.imgur.com/AT3VV.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/AT3VV.jpg" alt="enter image description here"></a></p>
  
  <p>Ignore the cube shape, its mainly about how the particles have lines connecting between nearby particles.</p>
  
  <p>UPDATE:
  So I have made some progress. I am able to create the illusion of individual lines using THREE.LineSegments. It looks as though every 2 vertices draw a line. so index 0 and 1 draw a line, then index 2 and 3 draw a line. No line is drawn between index 1 and 2.</p>
  
  <pre><code>function addLines(){
      var numLines = 10;
      var x = 0;
      for (nn=0; nn&lt;numLines; nn++)
      {
          lineGeom.vertices.push(new THREE.Vector3(x, -5, 0));
          lineGeom.vertices.push(new THREE.Vector3(x, 5, 0));
          x += 5;
      }
      line = new THREE.LineSegments( lineGeom, lineMaterial );
      scene.add(line);
  }
  </code></pre>
  
  <p>I am a little closer, but the issue I am having now is that I cannot apply unique styling attributes, as in, I cannot give each line its own styling like width and colour. I might need to create individual line objects. Will see how this progress and will share my findings...</p>