javascript - 三、不同 Material (颜色)的LinePieces？

Question

我试图使用 three.js 绘制一个具有超过 10k 条边的密集图。

LinePieces 用于获得更好的性能，但我不知道如何为每条边(线)指定不同的颜色，因为只能使用一种“ Material ”来创建线对象。

部分代码如下:

function drawEdges() {
    edgeGeometry = new THREE.Geometry();
    edgeMaterial = new THREE.LineBasicMaterial({ opacity: 0.1 });
        foreach source-target node pair:
            edgeGeometry.vertices.push(new THREE.Vector3(source.x, source.y));
            edgeGeometry.vertices.push(new THREE.Vector3(target.x, target.y));
    }
    var edges = new THREE.Line(edgeGeometry, edgeMaterial, THREE.LinePieces);
    scene.add(edges);
}

我的问题是:如果使用 THREE.LinePieces，是否可以使用不同的 Material ？任何提示表示赞赏。

提前致谢。

Answer 1

如果您正在使用 WebGLRenderer，则可以。

在您的几何中，您需要指定geometry.colors，这是一个THREE.Color() 的数组，其长度等于顶点的数量。

然后像这样指定 Material 和网格:

var material = new THREE.LineBasicMaterial( {
    color: 0xffffff,
    vertexColors: THREE.VertexColors
} );

var mesh = new THREE.Line( geometry, material, THREE.LinePieces );

示例:http://mrdoob.github.com/three.js/examples/webgl_lines_colors.html

three.js r.57