How to create lines between nearby particles in ThreeJS?

问题

I have been able to create a particle system for canvas, which was simple and effective.

Here is a demo: https://awingit.github.io/particles/

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.

Can anyone give me some direction with regards to how I can do this in Threejs?

I know how to work with particles, but what I am struggling with is connecting nearby points with lines.

Here is how I add basic particles to create a snow/rain effect:

function createSnow() {
    for (var i = 0; i < 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 < -55) {
            particle.y = 500;
            particle.velocity.y = -1.2;
        }
        particle.velocity.y -= Math.random() * .02;
        particle.y += particle.velocity.y;
    }
    particles.verticesNeedUpdate = true;
}

So how do I connect lines between nearby points?

Any feedback or direction is much appreciated.

UPDATE: Here is a pic which looks similar to what I am hoping to achieve...

Ignore the cube shape, its mainly about how the particles have lines connecting between nearby particles.

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.

function addLines(){
    var numLines = 10;
    var x = 0;
    for (nn=0; nn<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);
}

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...

来源：https://stackoverflow.com/questions/43610075/how-to-create-lines-between-nearby-particles-in-threejs

标签

javascript

three.js

particle-system