1

three.js を使用して、1 万を超えるエッジを持つ密なグラフを描画しようとしていました。

LinePieces を使用してパフォーマンスを向上させましたが、Line オブジェクトの作成に使用できる「マテリアル」は 1 つだけだったため、各エッジ (Line) に異なる色を指定する方法がわかりませんでした。

コードの一部を次に示します。

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 を使用する場合、異なる素材を使用することは可能ですか? どんなヒントでも大歓迎です。

前もって感謝します。

4

1 に答える 1

2

を使用している場合はWebGLRenderer、できます。

ジオメトリでは、長さが頂点の数に等しいgeometry.colorsの配列であるを指定する必要があります。THREE.Color()

次に、マテリアルとメッシュを次のように指定します。

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

于 2013-03-17T03:44:24.797 に答える