动态更新THREE.TubeGeometry路径的可行性技术问询

当然可以实现！你完全不用纠结于修改单个顶点或者频繁删除重建几何体——Three.js提供了更高效的方式来动态更新TubeGeometry的路径，核心思路是复用原始的Curve对象，修改其控制点后重新生成几何体的属性。

核心原理 #

TubeGeometry本质是基于一条THREE.Curve（比如CatmullRomCurve3、SplineCurve等）生成的。只要你保留这条Curve的引用，修改它的控制点后，就能重新计算TubeGeometry的顶点、法线等属性，而不需要创建新的几何体实例。

具体实现步骤 #

1. 初始化时保留Curve引用

创建TubeGeometry的时候，一定要把用来生成它的Curve对象存下来，后续修改路径全靠它：

// 定义初始路径点
const pathPoints = [
  new THREE.Vector3(-15, 0, 0),
  new THREE.Vector3(0, 15, 0),
  new THREE.Vector3(15, 0, 0)
];
// 创建Curve（这里用CatmullRomCurve3做平滑曲线，你可以换成其他Curve类型）
const tubePath = new THREE.CatmullRomCurve3(pathPoints);
// 创建TubeBufferGeometry（推荐用BufferGeometry，性能更好）
const tubeGeometry = new THREE.TubeBufferGeometry(
  tubePath,
  64, // 管状体的分段数
  2,  // 半径
  8,  // 圆周方向的分段数
  false // 是否闭合
);
// 创建网格并添加到场景
const tubeMesh = new THREE.Mesh(
  tubeGeometry,
  new THREE.MeshStandardMaterial({ color: 0x2194ce })
);
scene.add(tubeMesh);

2. 动态更新路径的函数

写一个专门的函数来修改路径的起点/终点（或任意控制点），然后更新几何体：

function updateTubeStartAndEnd(startPos, endPos) {
  // 1. 修改Curve的控制点：这里更新起点和终点
  tubePath.points[0].copy(startPos);
  tubePath.points[tubePath.points.length - 1].copy(endPos);
  
  // 2. 基于修改后的Curve，临时生成新的TubeBufferGeometry（只用来获取新的属性）
  const tempTubeGeo = new THREE.TubeBufferGeometry(
    tubePath,
    tubeGeometry.tubularSegments, // 复用原几何体的分段参数
    tubeGeometry.radius,
    tubeGeometry.radialSegments,
    tubeGeometry.closed
  );
  
  // 3. 将新的属性复制到原几何体中，避免创建新的Mesh/Geometry实例
  tubeGeometry.setAttribute('position', tempTubeGeo.attributes.position);
  tubeGeometry.setAttribute('normal', tempTubeGeo.attributes.normal);
  tubeGeometry.setAttribute('uv', tempTubeGeo.attributes.uv);
  
  // 4. 标记属性需要更新，告诉Three.js在下一帧渲染时使用新数据
  tubeGeometry.attributes.position.needsUpdate = true;
  tubeGeometry.attributes.normal.needsUpdate = true;
  tubeGeometry.attributes.uv.needsUpdate = true;
  
  // 如果原几何体使用了索引，也要更新索引并标记
  if (tempTubeGeo.index) {
    tubeGeometry.setIndex(tempTubeGeo.index);
    tubeGeometry.index.needsUpdate = true;
  }
}

3. 调用更新函数

比如你可以在动画循环里或者交互事件中调用这个函数，实时修改路径：

// 示例：每一帧稍微移动起点和终点
function animate() {
  requestAnimationFrame(animate);
  
  const time = Date.now() * 0.001;
  // 更新起点位置
  const newStart = new THREE.Vector3(
    -15 + Math.sin(time) * 5,
    Math.cos(time) * 5,
    0
  );
  // 更新终点位置
  const newEnd = new THREE.Vector3(
    15 - Math.sin(time) * 5,
    -Math.cos(time) * 5,
    0
  );
  
  updateTubeStartAndEnd(newStart, newEnd);
  
  renderer.render(scene, camera);
}
animate();

为什么这比重建几何体更好？ #

• 内存开销小：我们复用了原有的TubeBufferGeometry和Mesh实例，只是更新内部的属性数据，不会频繁创建新对象导致内存碎片。
• 性能稳定：即使每秒调用几十次更新，这种方式的性能开销也远低于删除重建整个几何体。
• 形状保持一致：通过修改Curve重新生成顶点，能保证管状体始终是平滑的曲线形状，不会出现手动修改单个顶点导致的畸形。

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