半透明线条不一致显示为不透明

Question

我在旋转容器内有一堆弯曲的半透明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);

}

我做错了什么会阻止线条始终与透明度重叠？

Answer 1

您需要将depthWrite: false设置为您的素材。

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