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

Question

已编辑：指定使用 ArrowHelper 我希望在 2D 平面上生成大量箭头，以表示矢量场。矢量的数量各不相同，但通常为 20000。

使用THREE.ArrowHelper，我可以做到这一点，但它非常慢，所以我想一定有更好的方法。缩小时如何使用子采样数量的矢量重新绘制场，有没有办法动态计算并仅添加渲染器需要的内容？

添加：我使用下面插入的代码片段创建它。该循环在参数曲面的 x,y 位置生成二维矢量场。

// 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

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

How to add a large number of visible arrows in Three.js using THREE.ArrowHelper

javascript

three.js

nw.js