javascript - 半透明线不一致地显示为不透明

我在旋转的容器内将一堆弯曲的半透明Line彼此堆叠在一起。在线上设置的不透明度似乎仅在某些时候起作用。



我实际上无法弄清楚是什么使它在某些情况下起作用，而在另一些情况下却没有。

这是一个简化的示例：
http://jsfiddle.net/sccottt/ok7k41c5/

代码的内容是：

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

}

我是在做错什么，以防止线条总是与透明度重叠吗？

最佳答案

您需要为材料设置depthWrite: false。

http://jsfiddle.net/ok7k41c5/1/