Three.js中合并贝塞尔曲线线条几何出现多余连线问题

问题出在你用Line渲染合并后的几何——Line会按照顶点数组的顺序，把所有顶点连续连接起来，所以第一个线条的最后一个顶点会和第二个线条的第一个顶点自动连起来，形成多余的连线。

下面是两种可行的解决方法：

方法一：用LineSegments替代Line并调整顶点结构 #

LineSegments是按每两个顶点一组绘制线段，不会跨组连接。你需要把每个曲线的点转换为线段顶点对（相邻点重复一次），再合并渲染：

// 创建适配LineSegments的单条曲线几何
const createSegmentGeometry = (p1, p2, p3, p4) => {
  const curve = new CubicBezierCurve3(p1, p2, p3, p4);
  const points = curve.getPoints(16);
  // 转换为线段顶点对：[p0,p1, p1,p2, p2,p3,...]
  const segmentPoints = [];
  for (let i = 0; i < points.length - 1; i++) {
    segmentPoints.push(points[i]);
    segmentPoints.push(points[i + 1]);
  }
  return new BufferGeometry().setFromPoints(segmentPoints);
};

// 创建两条曲线的几何
const line1Geometry = createSegmentGeometry(point1, point2, point3, point4);
const line2Geometry = createSegmentGeometry(point5, point6, point7, point8);

// 合并并渲染
const mergedGeometry = BufferGeometryUtils.mergeBufferGeometries([line1Geometry, line2Geometry], false);
const line = new LineSegments(mergedGeometry, new LineBasicMaterial());

方法二：保留Line，用索引分组绘制 #

如果想继续用Line渲染连续曲线，需要给每个几何添加索引，合并时开启分组偏移：

// 创建带索引的曲线几何
const createIndexedLineGeometry = (p1, p2, p3, p4) => {
  const curve = new CubicBezierCurve3(p1, p2, p3, p4);
  const points = curve.getPoints(16);
  const geometry = new BufferGeometry().setFromPoints(points);
  // 生成当前曲线的索引：0到points.length-1
  const indices = Array.from({ length: points.length }, (_, i) => i);
  geometry.setIndex(indices);
  return geometry;
};

// 创建两条曲线的几何
const line1Geometry = createIndexedLineGeometry(point1, point2, point3, point4);
const line2Geometry = createIndexedLineGeometry(point5, point6, point7, point8);

// 合并时开启useGroups（自动偏移索引，分组绘制）
const mergedGeometry = BufferGeometryUtils.mergeBufferGeometries([line1Geometry, line2Geometry], true);
const line = new Line(mergedGeometry, new LineBasicMaterial());

第二种方法会让合并后的几何自动分成两个绘制组，Line会分别渲染每组内的连续顶点，不会跨组连接。

内容的提问来源于stack exchange，提问作者Artur