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

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

本文关键字：Three ArrowHelper 何使用 js 添加      更新时间：2023-09-26

编辑：指定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会导致性能下降。

多亏了@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

相关文章：