I needed this material and since it says vertexAlphas is not supported for LineBasicMaterial right off the bat, I had to hack it a little bit and that’s what I eneded up having and it works:
const vAlphaLine = (pnts, vclr) => {
// pnts = [x1,y1,z1, x2,y2,z2, ...]
// vclr = [r1,g1,b1,a1, r2,g2,b2,a2, ...] E [0,1]
const geo = new THREE.BufferGeometry();
geo.setAttribute('position',
new THREE.BufferAttribute(new Float32Array(pnts), 3));
const material = new THREE.LineBasicMaterial({
transparent: true, // #undef OPAQUE
vertexColors: true, // #def USE_COLOR
});
material.onBeforeCompile = function(shader) {
shader.defines = { USE_COLOR_ALPHA: '' }; // vColor = vec4();
}
geo.setAttribute('color',
new THREE.BufferAttribute(new Float32Array(vclr), 4)
);
return new THREE.Line(geo, mat);
};
What I want to mention here is that, judging by the code, USE_COLOR and USE_COLOR_ALPHA are meant to be mutually exclusive, like in this snippet:
#if defined( USE_COLOR_ALPHA )
attribute vec4 color;
#elif defined( USE_COLOR )
attribute vec3 color;
#endif
the culprit is in the vertex shader and it’s this:
#ifdef USE_COLOR
vColor *= color;
#endif
this line of code forces me to enable USE_COLOR as well, so they are both enabled, which is not really logical because then this will work correctly:
#if defined( USE_COLOR_ALPHA )
...
#elif defined( USE_COLOR )
...
and this will not (if somebody writes it differently in the future):
#if defined( USE_COLOR )
...
#elif defined( USE_COLOR_ALPHA )
...
So I would like to suggest changing that line of code to
if defined( USE_COLOR ) || defined( USE_COLOR_ALPHA )
vColor *= color;
#endif
it it doesn’t break anything else.