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

09-18 04:47