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

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

您需要为您的 Material 设置depthWrite: false。

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