2013-03-17 102 views
1

我試圖繪製圖形密集使用three.js所超過10k的邊緣。使用Three.LinePieces用不同的材料(顏色)?

字行片段有更好的表現,但我無法弄清楚如何,因爲只有一個「材料」指定每個邊緣(線)不同的顏色,可以用來創建線對象。

下面是一些代碼:

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不同的材料?任何暗示是讚賞。

在此先感謝。

回答

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

+0

謝謝你的提示,@WestLangley。我使用的是CanvasRenderer,因爲它提供了更好的線條渲染結果。我想對我來說切換到WebGLRenderer更好。 – Gnavvy 2013-03-18 00:34:47