如何在Three.js中使用THREE.ArrowHelper添加大量可見箭頭

Question

編輯：指定使用ArrowHelper 我希望在2D平面上生成大量箭頭以表示矢量字段。向量的數量是不同的，但通常是20000.

使用THREE.ArrowHelper，我可以實現這一點，但速度非常慢，所以我認爲必須有更好的方法。如何在縮小時使用子採樣數量的矢量重新繪製字段，並且是否存在一種動態計算和添加渲染器將需要的方法？

新增： 我使用下面插入的代碼片段創建它。該循環在參數曲面的x，y位置處生成2D矢量場。

// set default color 
var hex = 0x00ff00; 
var u,v,xx,yy,ii,dir,mag,origin; 
// loop through 
Geometry[i].vertices.forEach(function(point,j) 
{ 
    xx = Math.floor((point.x-data[i].x0)/data[i].dx); 
    yy = Math.floor((point.y-data[i].y0)/data[i].dy); 
    ii = data[i].nx*yy+xx; 

    u = data[i].frame[data[i].xvec][ii]; 
    v = data[i].frame[data[i].yvec][ii]; 
    mag = Math.pow(u*u+v*v,.5); 
    dir = new THREE.Vector3(u, v, 1); 
    origin = new THREE.Vector3(point.x+data[i].dx/2, 
           point.y+data[i].dy/2, 1); 

    data[i].arrowHelper[j] = new THREE.ArrowHelper(dir.normalize(), 
                origin, 
                data[i].scale*mag, 
                hex); 
    scene.add(data[i].arrowHelper[j]); 

}); 

我只是一個更強大的機器，它運行平滑，但還是採取了顯著的性能影響進行測試。

我可以顯示並平滑渲染參數曲面，甚至1e06底層紋理也沒有問題，但是ArrowHelpers會導致性能下降。

Answer 1

感謝@pailhead，解決方案是將箭頭繪製爲兩組使用THREE.LinePieces的線路調用。在原始問題的代碼之後，箭頭基礎被實現爲。當矢量改變時，線[i]被移除並重新計算。

// set default color 
var hex = 0x00ff00; 
var u,v,xx,yy,ii; 
// initialise arrow bases 
var lines = new THREE.Geometry(); 
// loop through 
Geometry[i].vertices.forEach(function(point,j) 
{ 
    // rescale 
    xx = Math.floor((point.x-data[i].x0)/data[i].dx); 
    yy = Math.floor((point.y-data[i].y0)/data[i].dy); 
    ii = data[i].nx*yy+xx; 
    u = data[i].frame[data[i].xvec][ii]*data[i].scale; 
    v = data[i].frame[data[i].yvec][ii]*data[i].scale; 
    lines.vertices.push(
     new THREE.Vector3(point.x+data[i].dx/2, point.y+data[i].dy/2,1), 
     new THREE.Vector3(point.x+data[i].dx/2+u, point.y+data[i].dy/2+v,1) 
    ); 

}); 
var mat = new THREE.LineBasicMaterial({color:hex}) 
line[i] = new THREE.LineSegments(lines, material); 
scene.add(line[i]); 

three.js所r.73