Three.js 如何填充3D向量生成的圆柱网格之间的空隙？

缝隙产生原因 #

使用独立CylinderGeometry拼接路径时，相邻圆柱的端面仅和自身轴向垂直，路径转折位置的两个端面无法完全贴合，就会出现可见空隙。

方案1：使用TubeGeometry生成连续管状网格（最推荐） #

直接将你的3D向量数组作为路径生成单个连续的管状几何体，天然不存在拼接缝隙，和手动拼接圆柱的视觉效果一致，性能也更好：

// 传入你的3D向量数组
const pathVertices = [
  new THREE.Vector3(0, 0, 0),
  new THREE.Vector3(10, 3, 2),
  new THREE.Vector3(20, 0, 5)
];
// 生成路径，tension设为0即可得到硬转折的折线效果
const path = new THREE.CatmullRomCurve3(pathVertices);
path.tension = 0;
// 参数说明：路径、分段数、圆柱半径、截面边数、是否闭合路径
const tubeGeo = new THREE.TubeGeometry(path, pathVertices.length - 1, 0.5, 8, false);
const tubeMesh = new THREE.Mesh(tubeGeo, new THREE.MeshStandardMaterial({ color: 0xffffff }));
scene.add(tubeMesh);

方案2：拼接处添加球形过渡 #

如果需要保留独立圆柱的结构，可在两个圆柱的连接点处放置一个和圆柱半径相同的球体，刚好覆盖缝隙：

const cylinderRadius = 0.5;
const mat = new THREE.MeshStandardMaterial({ color: 0xffffff });
// 遍历所有中间路径点添加球体
for (let i = 1; i < pathVertices.length - 1; i++) {
  const sphereGeo = new THREE.SphereGeometry(cylinderRadius, 8, 8);
  const sphere = new THREE.Mesh(sphereGeo, mat);
  sphere.position.copy(pathVertices[i]);
  scene.add(sphere);
}

方案3：圆柱重叠抵消缝隙 #

手动调整每个圆柱的长度，让圆柱两端略微超出对应路径点，相邻圆柱在连接点处少量重叠即可盖住缝隙，注意重叠量不要过大避免出现Z轴闪烁问题。

如果需要自定义截面形状，可以使用ExtrudeGeometry配合路径实现，同样不会产生拼接缝隙。

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