threejs根据点绘制线

后端给点 通过点渲染一条路径
原理：
获取数据，将其转换为THREE.Vector3对象，然后创建Catmull-Rom曲线并绘制它

curve.getPoints(50)返回的点数组生成一个新的BufferGeometry对象，并将这些点设置为几何体的顶点。curve.getPoints(50)返回包含50个点的Catmull-Rom曲线上的顶点数组。
50 表示在 Catmull-Rom 曲线上采样的点的数量。更高的采样点数量意味着曲线将更平滑，但也可能导致性能消耗增加。您可以根据需要调整此数字来控制曲线的光滑度和质量。

通过将这些点设置到BufferGeometry中，您可以用于绘制线条、点云或其他需要顶点的Three.js对象。

const updateLine = (item: PointCloudInfoModel) => {
  const containsItem: PointCloudInfoModel = pointCloudFiles.filter(file => file.type === item.type)[0];
  if (containsItem) {
    const containsIndex = pointCloudFiles.findIndex(file => file.type === item.type);
    addLine(item, false, containsIndex);
    pointCloudFiles.splice(containsIndex, 1, item);
  } else {
    addLine(item);
    pointCloudFiles.push(item);
  }
};

const addLine = (item: PointCloudInfoModel, isAdd = true, replaceIndex = 0) => {
  const points = item.points?.map((point: number[]) => new Vector3(point[0] * 300, point[1] * 300, point[2] * 300));
  const curve = new CatmullRomCurve3(points);
  const geometry = new BufferGeometry().setFromPoints(curve.getPoints(50));
  const material = new LineBasicMaterial({ color: 0xffff00 });
  const curveObject = new Line(geometry, material);
  // 注册type是为了setShowTypes 使用
  curveObject.type = item.type;

  scene.add(curveObject);

  if (isAdd) {
    pointCloudArray.push(curveObject);
  } else {
    scene.remove(pointCloudArray[replaceIndex]);
    pointCloudArray.splice(replaceIndex, 1, curveObject);
  }
};

补充：每次设置绘画类型为空的时候 但是页面拖拽依然会有一个蓝色的框 并且会选中图形

// 禁用选择区域 隐藏那个用于选择的蓝色矩形框，并且会禁止在画布上的多选操作。注意，这并不会禁止单个对象的选取，单个对象依然可以被选取并操作
canvas.selection = false;