threejs 绘制曲线

Three.js 可以通过 THREE.Curve 和 THREE.Path 类来绘制曲线。

1. 首先，创建一个曲线对象。例如，创建一个二次贝塞尔曲线对象：

var curve = new THREE.QuadraticBezierCurve3(
    new THREE.Vector3(0, 0, 0), // 起点
    new THREE.Vector3(50, 100, 0), // 控制点
    new THREE.Vector3(100, 0, 0) // 终点
);

2. 使用 THREE.CurvePath 类来将多个曲线连接起来，形成一个路径：

var path = new THREE.CurvePath();
path.add(curve);

3. 创建一个 THREE.TubeGeometry 对象，通过路径和细分数创建一个管道几何体：

var tubeGeometry = new THREE.TubeGeometry(path, 20, 2, 8, false);

其中，参数说明如下：

- path：路径对象。
- segments：沿曲线细分数。
- radius：管道半径。
- radialSegments：管道横向细分数。
- closed：是否闭合管道。

4. 创建一个 THREE.Mesh 对象，并将管道几何体作为其参数：

var material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
var mesh = new THREE.Mesh(tubeGeometry, material);

5. 将 mesh 添加到场景中即可：

scene.add(mesh);

完整代码示例：

var curve = new THREE.QuadraticBezierCurve3(
    new THREE.Vector3(0, 0, 0),
    new THREE.Vector3(50, 100, 0),
    new THREE.Vector3(100, 0, 0)
);

var path = new THREE.CurvePath();
path.add(curve);

var tubeGeometry = new THREE.TubeGeometry(path, 20, 2, 8, false);

var material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
var mesh = new THREE.Mesh(tubeGeometry, material);

scene.add(mesh);