I am currently working on a particle cloud in threejs using buffer geometry, where I connect the particles via THREE.LineSegments with a THREE.LineBasicMaterial:
https://i.sstatic.net/Iz4DL.gif
In the image above, you can see that some of the lines appear black or gray - my goal is to change them to transparent shades of white.
Here are what I believe to be the key lines of code:
var material = new THREE.LineBasicMaterial({
vertexColors: THREE.VertexColors,
blending: THREE.AdditiveBlending,
color: 0xffffff,
transparent: true,
});
var colors = new Float32Array(segments * 3);
geometry.addAttribute(
"color",
new THREE.BufferAttribute(colors, 3).setDynamic(true)
); //this will allow us to set the color of the lines between particles in buffer geometry
linesMesh = new THREE.LineSegments(geometry, material);
...
animate(){
for (var i = 0; i < particleCount; i++) { //loop through particles to create line connections
for (var j = i + 1; j < particleCount; j++) { //check for collisions
var dist = Math.sqrt(dx * dx + dy * dy + dz * dz); //getting positions of neighboring particles
if (dist < effectController.minDistance) { //establish a connection
var alpha = 1.0 - dist / effectController.minDistance;
colors[colorpos++] = alpha;
}
}
}
}