javascript - examples - ¿Cómo crear líneas entre partículas cercanas en ThreeJS?

three js line

Question

Pude crear un sistema de partículas para lienzo, que era simple y efectivo.

Aquí hay una demostración: https://awingit.github.io/particles/

Ahora lo que me gustaría hacer es crear lo mismo en Threejs. Sin embargo, todavía no he encontrado ningún ejemplo de referencia y no he podido crear lo mismo que mi sistema de partículas de lienzo 2D en 3D.

¿Alguien puede darme alguna dirección con respecto a cómo puedo hacer esto en Threejs?

Sé cómo trabajar con partículas, pero lo que estoy luchando es conectar puntos cercanos con líneas.

Aquí es cómo agrego partículas básicas para crear un efecto de nieve / lluvia:

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;
}

Entonces, ¿cómo conecto líneas entre puntos cercanos?

Cualquier comentario o dirección es muy apreciado.

ACTUALIZACIÓN: Aquí hay una foto que se parece a lo que espero lograr ...

Ignora la forma del cubo, principalmente sobre cómo las partículas tienen líneas que se conectan entre partículas cercanas.

ACTUALIZACIÓN: Así que he hecho algunos progresos. Puedo crear la ilusión de líneas individuales usando THREE.LineSegments. Parece que cada 2 vértices dibujan una línea. entonces el índice 0 y 1 dibujan una línea, luego los índices 2 y 3 dibujan una línea. No se dibuja ninguna línea entre el índice 1 y 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);
}

Estoy un poco más cerca, pero el problema que estoy teniendo ahora es que no puedo aplicar atributos de estilo únicos, como en, no puedo darle a cada línea su propio estilo, como el ancho y el color. Puede que necesite crear objetos de línea individuales. Veré cómo progresa y compartiré mis hallazgos ...