LineBasicMaterial blend based on transparency of one color versus lightness / darkness

Questions
, , ,
1

linemesh
linemesh926×562 2.79 MB

My current linemesh uses a material with blending. I want those lines to only be white, blending based on their transparency, so that the line segments never look black or dark gray. Is that possible? How would I do that?

Here is the current code:

var material = new THREE.LineBasicMaterial({
    vertexColors: THREE.VertexColors,
    blending: THREE.AdditiveBlending,
    color: 0xffffff,
    transparent: true,
  });

linesMesh = new THREE.LineSegments(geometry, material);
geometry.addAttribute(
    "color",
    new THREE.BufferAttribute(colors, 3).setDynamic(true)
); //will allow us to set the color of the lines between particles in buffer geometry

...

animate(){
  for (var i = 0; i < particleCount; i++) { //loop through particles to make line connections
    for (var j = i + 1; j < particleCount; j++) { //check collision
      var dist = Math.sqrt(dx * dx + dy * dy + dz * dz); //getting particle positions to neighbors
      if (dist < effectController.minDistance) { //make a connection
        var alpha = 1.0 - dist / effectController.minDistance; 
        colors[colorpos++] = alpha;
        
      }
    }
  }
}

Hopefully this is enough context - there is a lot of other things going on in the code so I’m trying to include only what might be relevant.

2

Are you sure this is a correct value here? (I can’t tell which version you are using, but vertex colors enum is commented as legacy-only) Material.vertexColors expects a boolean, while Three.VertexColors is 2.

Without this parameter everything seems to be blending nicely, no shadows when opacity is low: jsfiddle.