I have a collection of curved see-through lines stacked inside a rotating container. The opacity settings on the lines are inconsistent, working at times but not always.
It's puzzling, as I can't determine what causes it to function in certain scenarios and fail in others.
For reference, below is a simplified version:
http://jsfiddle.net/sccottt/ok7k41c5/
The core part of the code snippet entails:
for (var i = 0; i < LINE_COUNT; i++) {
var curve = new THREE.QuadraticBezierCurve3();
curve.v0 = randomV3();
curve.v1 = randomV3();
curve.v2 = randomV3();
var geom = new THREE.Geometry();
for (var j = 0; j <= CURVE_STEPS; j++) {
var perc = j / CURVE_STEPS;
geom.vertices[j] = curve.getPoint(perc);
}
var material = new THREE.LineBasicMaterial({
color: Math.random() * 0xffffff,
linewidth: 10,
transparent: true,
opacity: 0.25
});
var line = new THREE.Line(geom, material);
_wrap.add(line);
}
Is there an error in my approach that prevents consistent transparency overlapping of the lines?