一、曲线路径管道成型TubeGeometry

TubeGeometry的功能就是通过一条曲线生成一个圆管。它的本质就是以曲线上顶点为基准，生成一系列曲线等径分布的顶点数据， 具体算法如何实现的可以查看three.js引擎源码。

TubeGeometry(path, tubularSegments, radius, radiusSegments, closed)

1. 样条曲面生成圆管

//创建管道成型的路径(3D样条曲线)
const path = new THREE.CatmullRomCurve3([
  new THREE.Vector3(-10, -50, -50),
  new THREE.Vector3(10, 0, 0),
  new THREE.Vector3(8, 50, 50),
  new THREE.Vector3(-5, 0, 100)
]);
// path:路径   40：沿着轨迹细分数  2：管道半径   25：管道截面圆细分数
const geometry = new THREE.TubeGeometry(path, 40, 2, 25);

• 使用下面直线替换上面的样条曲线查看圆管生成效果。

// LineCurve3创建直线段路径
const path = new THREE.LineCurve3(new THREE.Vector3(0, 100, 0), new THREE.Vector3(0, 0, 0));

2. curvePath多段路径生成管道

• 创建了一段样条曲线和两条直线拼接成的路径，然后通过曲线路径CurvePath把样条曲线和料条曲线合并成为一条路径。

    // 创建多段线条的顶点数据
    const p1 = new THREE.Vector3(-85.35, -35.36)
    const p2 = new THREE.Vector3(-50, 0, 0);
    const p3 = new THREE.Vector3(0, 50, 0);
    const p4 = new THREE.Vector3(50, 0, 0);
    const p5 = new THREE.Vector3(85.35, -35.36);
    // 创建线条一：直线
    const line1 = new THREE.LineCurve3(p1,p2);
    // 重建线条2：三维样条曲线
    const curve = new THREE.CatmullRomCurve3([p2, p3, p4]);
    // 创建线条3：直线
    const line2 = new THREE.LineCurve3(p4,p5);
    const CurvePath = new THREE.CurvePath();// 创建CurvePath对象
    CurvePath.curves.push(line1, curve, line2);// 插入多段线条
    //通过多段曲线路径创建生成管道
    //通过多段曲线路径创建生成管道，CurvePath：管道路径
    const geometry2 = new THREE.TubeGeometry(CurvePath, 100, 5, 25, false);