如何在Three.js中用管道连接两个三维坐标点？

不用依赖复杂曲线公式，直接用两个点生成管道的核心思路是用CatmullRomCurve3基于你的坐标点生成路径，再传入TubeGeometry即可——完全不需要自定义曲线类（比如你提到的CustomSinCurve，那个类里的10是它自己的自定义参数，和你的点坐标毫无关系，不用理会）。

具体实现步骤： #

• 先定义两个带x/y/z坐标的3D点
• 用这两个点创建路径曲线（两点的话会自动生成直线）
• 基于路径生成管道几何体，再创建网格添加到场景

完整代码示例： #

// 1. 定义两个3D点，替换成你自己的坐标
const pointA = new THREE.Vector3(0, 0, 0);
const pointB = new THREE.Vector3(5, 3, 2);

// 2. 创建路径：CatmullRomCurve3接受点数组，两点时直接生成直线
const path = new THREE.CatmullRomCurve3([pointA, pointB], false);

// 3. 生成管道几何体
// 参数依次为：路径、分段数（两点直线设为2足够）、管道半径、径向分段数、是否闭合
const tubeGeo = new THREE.TubeGeometry(path, 2, 0.5, 16, false);

// 4. 创建材质和网格，添加到场景
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const tubeMesh = new THREE.Mesh(tubeGeo, material);
scene.add(tubeMesh);

关键说明： #

• CatmullRomCurve3的第二个参数false表示路径不闭合，刚好适配两点间的管道需求
• TubeGeometry的分段数参数：如果只是两点直线，设为2就足够；后续如果要扩展成多点曲线，再调高这个数值即可
• 你之前看到的CustomSinCurve是示例中用来生成正弦曲线的自定义类，和两点直线的需求完全无关，直接忽略就行

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