如何使用Three.js的THREE.Points()绘制等间距点的直线

要实现均匀间距的粒子直线，核心是基于线性比例分配点的位置，避免手动累加导致的间距误差。下面是两种可靠的实现方式：

方法一：手动计算线性插值点 #

通过THREE.Vector3.lerp()方法，按比例在起点和终点之间生成均匀分布的点：

// 定义直线的起点与终点
const start = new THREE.Vector3(-8, 0, 0);
const end = new THREE.Vector3(8, 0, 0);
// 设置粒子总数（包含起点和终点）
const totalPoints = 25;

// 创建BufferGeometry存储顶点数据
const geometry = new THREE.BufferGeometry();
const positions = new Float32Array(totalPoints * 3); // 每个点占3个浮点数位置

for (let i = 0; i < totalPoints; i++) {
  // 计算当前点在直线上的比例（0到1）
  const ratio = i / (totalPoints - 1);
  // 线性插值得到当前点坐标
  const currentPos = start.clone().lerp(end, ratio);
  // 将坐标写入数组
  positions[i * 3] = currentPos.x;
  positions[i * 3 + 1] = currentPos.y;
  positions[i * 3 + 2] = currentPos.z;
}

// 为几何体添加位置属性
geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));

// 创建材质与Points对象
const material = new THREE.PointsMaterial({ color: 0x4287f5, size: 0.15 });
const particleLine = new THREE.Points(geometry, material);

// 添加到场景
scene.add(particleLine);

方法二：利用曲线生成均匀点 #

如果需要更灵活的扩展（比如后续改成曲线），可以用CatmullRomCurve3的getSpacedPoints()方法直接生成均匀间距的点：

const start = new THREE.Vector3(-8, 0, 0);
const end = new THREE.Vector3(8, 0, 0);
const totalPoints = 25;

// 创建直线曲线
const lineCurve = new THREE.CatmullRomCurve3([start, end]);
// 生成均匀间距的点数组（getSpacedPoints的参数是分段数，点数=分段数+1）
const evenlySpacedPoints = lineCurve.getSpacedPoints(totalPoints - 1);

// 用点数组创建几何体
const geometry = new THREE.BufferGeometry().setFromPoints(evenlySpacedPoints);

// 创建材质与Points对象
const material = new THREE.PointsMaterial({ color: 0x4287f5, size: 0.15 });
const particleLine = new THREE.Points(geometry, material);

scene.add(particleLine);

为什么之前的方法间距不均？ #

如果是手动循环累加固定步长（比如x += 0.5），当起点到终点的总距离不是步长的整数倍时，最后一段的间距会和其他段不一致。而上面两种方法都是基于总长度的比例分配，能确保每两个相邻点的间距完全相等。

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