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

Question

我有一堆弯曲的半透明 Lines 在一个旋转容器内堆叠在一起。线条上设置的不透明度似乎只在某些时候起作用，不过。

我实际上无法弄清楚是什么让它在某些情况下起作用，但在其他情况下却不起作用。

这是一个精简的例子： 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 设置为您的 material。

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

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

Translucent lines inconsistently showing as opaque

javascript

three.js