threejs绘制带箭头的坐标系

效果图：
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/9319baf1e01946b8919490704e97532a.pn

实现思路：
AxesHelper实现坐标系，但是是没有箭头的；这个对象会显示三个彩色的箭头，这些箭头分别表示x, y, z轴的负半轴和正半轴。然后我们通过给AxesHelper对象设置位置(position)和旋转(quaternion)来描绘坐标系的位置和方向。
ArrowHelper对象实现箭头，并分别设置了方向向量、原点、长度和颜色，用于表示X轴、Y轴和Z轴。
通过创建了一个新的Object3D，并设置其位置和旋转为你提供的七维参数，然后我们创建了三个箭头，分别调用了obj.add()方法添加到Object3D中。这样，当Object3D旋转时，所有链接的子对象，即箭头，也会从而旋转。

具体代码如下
item是一个7位数组；前三位是用于设置位置的(x, y, z)坐标，后四位是用于设置方向的四元数(qx, qy, qz, qw)。
isAdd = true判断是新增还是修改；因为我这里后端出来的坐标一直在变化；
replaceIndex = 0 替换的是存储场景里所有对象的index
isRealTime 因为我的需求去是有两个坐标系，一个是需要实时更新，一个只需要最开始的时候更新一次

const updateAxes= (item: any, isAdd = true, replaceIndex = 0, isRealTime= false)=>{
  const coords = item.url;
  let obj = new Object3D();
  obj.position.set(coords[0], coords[1], coords[2]);
  obj.setRotationFromQuaternion(new Quaternion(coords[3], coords[4], coords[5], coords[6]));
  scene.add(obj);

  obj.type = item.type;

  // 创建箭头
  let arrowX = new ArrowHelper(new Vector3(1, 0, 0), new Vector3(), !isRealTime? 5: 3, 0xff0000); // 红色X轴箭头
  let arrowY = new ArrowHelper(new Vector3(0, 1, 0), new Vector3(), !isRealTime? 5: 3, 0x00ff00); // 绿色Y轴箭头
  let arrowZ = new ArrowHelper(new Vector3(0, 0, 1), new Vector3(), !isRealTime? 5: 3, 0x0000ff); // 蓝色Z轴箭头
  arrowX.position.set(coords[0]*300, coords[1]*300, coords[2]*300);
  arrowY.position.set(coords[0]*300, coords[1]*300, coords[2]*300);
  arrowZ.position.set(coords[0]*300, coords[1]*300, coords[2]*300);

  obj.add(arrowX);
  obj.add(arrowY);
  obj.add(arrowZ);

  if(isRealTime){
    scene.remove(realTimeAxes);
    realTimeAxes = obj;
    return;
  }

  // isAdd 为true 说明是新增了一个 不然则需要替换
  if (isAdd) {
    pointCloudArray.push(obj);
  } else {
    // 先scene add  然后remove  就会避免黑屏
    scene.remove(pointCloudArray[replaceIndex]);
    pointCloudArray.splice(replaceIndex, 1, obj);
  }

  
}