后端给点 通过点渲染一条路径
原理:
获取数据,将其转换为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;