学习Three.js--曲线(Curve)学习Three.js--曲线(Curve) 前置核心说明 Curve 是 Th

学习Three.js--曲线(Curve)

前置核心说明

Curve 是 Three.js 中所有曲线/直线的基类，定义了曲线的核心行为（如采样顶点、计算长度等）。所有2D/3D曲线均继承自 Curve，核心作用是「通过数学公式生成连续的顶点序列」，再基于这些顶点创建线条模型，实现任意自定义曲线的绘制。

核心规则

维度分类：
- 2D曲线：基于XY平面（Z=0），继承 THREE.Curve，如 LineCurve/ArcCurve；
- 3D曲线：基于XYZ三维空间，继承 THREE.Curve（部分别名/子类），如 LineCurve3/CatmullRomCurve3；
核心流程：
创建曲线实例 → 采样顶点（getPoints） → 几何体绑定顶点 → 创建线模型 → 添加到场景；

线模型类型（决定曲线渲染方式）：

模型类型	核心特点	适用场景
`THREE.Line`	按顶点顺序绘制连续线条	开放曲线（如直线、贝塞尔曲线）
`THREE.LineLoop`	闭合线条（最后一个顶点连接第一个）	封闭曲线（如椭圆、圆）
`THREE.LineSegments`	每两个顶点为一组绘制分段线	离散线条（如网格线）

采样精度：getPoints(n) 中 n 是采样点数（非顶点数），n 越大曲线越平滑（推荐50~100，复杂曲线可设200）。

一、2D曲线（XY平面，Z=0）

所有2D曲线均基于XY平面，Z坐标默认0，核心用于绘制平面曲线。

1. LineCurve（2D直线）

核心说明

两点确定的2D直线，是最简单的2D曲线，无曲率。

构造函数参数

// 语法：new THREE.LineCurve(起点向量, 终点向量)
const lineCurve = new THREE.LineCurve(
  new THREE.Vector2(x1, y1), // 必传：起点（Vector2对象）
  new THREE.Vector2(x2, y2)  // 必传：终点（Vector2对象）
);

参数	类型	说明
`v1`	THREE.Vector2	直线起点（XY坐标）
`v2`	THREE.Vector2	直线终点（XY坐标）

使用示例

// 1. 创建2D直线（从(0,0)到(100, 50)）
const lineCurve = new THREE.LineCurve(
  new THREE.Vector2(0, 0),
  new THREE.Vector2(100, 50)
);

// 2. 采样顶点（50个点，直线足够平滑）
const points = lineCurve.getPoints(50);

// 3. 创建几何体并绑定顶点
const geometry = new THREE.BufferGeometry();
geometry.setFromPoints(points);

// 4. 创建线材质
const material = new THREE.LineBasicMaterial({ color: 0xff0000 });

// 5. 创建线模型（开放直线用Line）
const line = new THREE.Line(geometry, material);
scene.add(line);

2. ArcCurve（2D圆弧）

核心说明

基于圆心、半径、起始角/终止角的2D圆弧，可绘制圆、半圆、任意弧度的圆弧。

构造函数参数

// 语法：new THREE.ArcCurve(圆心X, 圆心Y, 半径, 起始角, 终止角, 是否逆时针)
const arcCurve = new THREE.ArcCurve(
  0,        // 必传：圆心X坐标
  0,        // 必传：圆心Y坐标
  50,       // 必传：圆弧半径
  0,        // 必传：起始角（弧度，0=右向X轴）
  Math.PI,  // 必传：终止角（弧度，Math.PI=180°）
  false     // 可选：是否逆时针绘制，默认false（顺时针）
);

参数	类型	默认值	说明
`aX`	Number	—	圆心X坐标
`aY`	Number	—	圆心Y坐标
`aRadius`	Number	—	圆弧半径
`aStartAngle`	Number	—	起始角度（弧度，0=X轴正方向，Math.PI/2=Y轴正方向）
`aEndAngle`	Number	—	终止角度（弧度）
`aClockwise`	Boolean	false	是否顺时针绘制，true=顺时针，false=逆时针

使用示例（绘制半圆）

// 1. 创建半圆（圆心(0,0)，半径50，0~π弧度）
const arcCurve = new THREE.ArcCurve(0, 0, 50, 0, Math.PI);

// 2. 采样顶点
const points = arcCurve.getPoints(50);

// 3. 几何体+材质+模型
const geometry = new THREE.BufferGeometry();
geometry.setFromPoints(points);
const material = new THREE.LineBasicMaterial({ color: 0x00ff00 });
const line = new THREE.Line(geometry, material);
scene.add(line);

3. EllipseCurve（2D椭圆/圆）

核心说明

基于圆心、长半轴、短半轴的2D椭圆，当长半轴=短半轴时即为圆（替代ArcCurve绘制完整圆）。

构造函数参数

// 语法：new THREE.EllipseCurve(圆心X, 圆心Y, 长半轴, 短半轴, 起始角, 终止角, 是否逆时针, 旋转角)
const ellipseCurve = new THREE.EllipseCurve(
  0,          // 必传：圆心X坐标
  0,          // 必传：圆心Y坐标
  100,        // 必传：X轴方向长半轴
  50,         // 必传：Y轴方向短半轴
  0,          // 可选：起始角，默认0
  2 * Math.PI,// 可选：终止角，默认2π（完整椭圆）
  false,      // 可选：是否逆时针，默认false
  0           // 可选：椭圆旋转角（弧度），默认0
);

参数	类型	默认值	说明
`aX`	Number	—	圆心X坐标
`aY`	Number	—	圆心Y坐标
`xRadius`	Number	—	X轴方向半轴长度（长半轴）
`yRadius`	Number	—	Y轴方向半轴长度（短半轴）
`aStartAngle`	Number	0	起始角度（弧度）
`aEndAngle`	Number	2π	终止角度（弧度，2π=完整椭圆）
`aClockwise`	Boolean	false	是否顺时针绘制
`aRotation`	Number	0	椭圆整体旋转角度（弧度）

使用示例（优化版，用户示例升级）

// 1. 创建椭圆（圆心(0,0)，长半轴100，短半轴50，完整椭圆）
const ellipseCurve = new THREE.EllipseCurve(0, 0, 100, 50);

// 2. 采样顶点（50个点，椭圆足够平滑）
const points = ellipseCurve.getPoints(50);

// 3. 创建几何体并绑定顶点
const geometry = new THREE.BufferGeometry();
geometry.setFromPoints(points);

// 4. 线材质（红色，线宽1）
const material = new THREE.LineBasicMaterial({ 
  color: 0xff0000,
  linewidth: 1 // 注意：WebGL中线宽仅部分浏览器支持>1
});

// 5. 创建闭合线模型（椭圆用LineLoop）
const line = new THREE.LineLoop(geometry, material);
scene.add(line);

4. SplineCurve（2D样条曲线）

核心说明

通过多个控制点生成的平滑2D曲线（插值曲线），曲线会穿过所有控制点，比贝塞尔曲线更易控制。

构造函数参数

// 语法：new THREE.SplineCurve(控制点数组)
const splineCurve = new THREE.SplineCurve([
  new THREE.Vector2(x1, y1),
  new THREE.Vector2(x2, y2),
  // ... 更多控制点
]);

参数	类型	说明
`points`	Array<THREE.Vector2>	必传：2D控制点数组（至少2个，越多曲线越复杂）

使用示例

// 1. 创建2D样条曲线（4个控制点）
const splineCurve = new THREE.SplineCurve([
  new THREE.Vector2(-100, 0),  // 控制点1
  new THREE.Vector2(-50, 80),  // 控制点2
  new THREE.Vector2(50, -80),  // 控制点3
  new THREE.Vector2(100, 0)    // 控制点4
]);

// 2. 采样顶点（100个点，保证平滑）
const points = splineCurve.getPoints(100);

// 3. 几何体+材质+模型
const geometry = new THREE.BufferGeometry();
geometry.setFromPoints(points);
const material = new THREE.LineBasicMaterial({ color: 0x0000ff });
const line = new THREE.Line(geometry, material);
scene.add(line);

5. QuadraticBezierCurve（2D二次贝塞尔曲线）

核心说明

由「起点+控制点+终点」3个点定义的2D贝塞尔曲线，单曲率，适合简单弯曲。

构造函数参数

// 语法：new THREE.QuadraticBezierCurve(起点, 控制点, 终点)
const quadBezier = new THREE.QuadraticBezierCurve(
  new THREE.Vector2(x1, y1), // 必传：起点
  new THREE.Vector2(x2, y2), // 必传：控制点（决定弯曲方向）
  new THREE.Vector2(x3, y3)  // 必传：终点
);

参数	类型	说明
`v0`	THREE.Vector2	起点
`v1`	THREE.Vector2	控制点（核心，决定曲线形状）
`v2`	THREE.Vector2	终点

使用示例

// 1. 创建二次贝塞尔曲线
const quadBezier = new THREE.QuadraticBezierCurve(
  new THREE.Vector2(-80, 0),  // 起点
  new THREE.Vector2(0, 80),   // 控制点（向上弯曲）
  new THREE.Vector2(80, 0)    // 终点
);

// 2. 采样顶点
const points = quadBezier.getPoints(80);

// 3. 渲染
const geometry = new THREE.BufferGeometry();
geometry.setFromPoints(points);
const material = new THREE.LineBasicMaterial({ color: 0xffff00 });
const line = new THREE.Line(geometry, material);
scene.add(line);

6. CubicBezierCurve（2D三次贝塞尔曲线）

核心说明

由「起点+控制点1+控制点2+终点」4个点定义的2D贝塞尔曲线，双曲率，适合复杂弯曲（如字体轮廓、路径动画）。

构造函数参数

// 语法：new THREE.CubicBezierCurve(起点, 控制点1, 控制点2, 终点)
const cubicBezier = new THREE.CubicBezierCurve(
  new THREE.Vector2(x1, y1), // 必传：起点
  new THREE.Vector2(x2, y2), // 必传：控制点1
  new THREE.Vector2(x3, y3), // 必传：控制点2
  new THREE.Vector2(x4, y4)  // 必传：终点
);

参数	类型	说明
`v0`	THREE.Vector2	起点
`v1`	THREE.Vector2	控制点1（左侧弯曲）
`v2`	THREE.Vector2	控制点2（右侧弯曲）
`v3`	THREE.Vector2	终点

使用示例

// 1. 创建三次贝塞尔曲线
const cubicBezier = new THREE.CubicBezierCurve(
  new THREE.Vector2(-100, 0), // 起点
  new THREE.Vector2(-50, 100),// 控制点1（向上）
  new THREE.Vector2(50, -100),// 控制点2（向下）
  new THREE.Vector2(100, 0)   // 终点
);

// 2. 采样顶点
const points = cubicBezier.getPoints(100);

// 3. 渲染
const geometry = new THREE.BufferGeometry();
geometry.setFromPoints(points);
const material = new THREE.LineBasicMaterial({ color: 0xff00ff });
const line = new THREE.Line(geometry, material);
scene.add(line);

二、3D曲线（XYZ三维空间）

3D曲线突破XY平面限制，支持XYZ三维坐标，核心用于3D路径（如飞行轨迹、管道模型）。

1. LineCurve3（3D直线）

核心说明

两点确定的3D直线，Z坐标可自定义，是3D最基础的曲线。

构造函数参数

// 语法：new THREE.LineCurve3(起点向量, 终点向量)
const lineCurve3 = new THREE.LineCurve3(
  new THREE.Vector3(x1, y1, z1), // 必传：3D起点
  new THREE.Vector3(x2, y2, z2)  // 必传：3D终点
);

参数	类型	说明
`v1`	THREE.Vector3	3D起点（XYZ坐标）
`v2`	THREE.Vector3	3D终点（XYZ坐标）

使用示例

// 1. 创建3D直线（从(0,0,0)到(100, 50, 80)）
const lineCurve3 = new THREE.LineCurve3(
  new THREE.Vector3(0, 0, 0),
  new THREE.Vector3(100, 50, 80)
);

// 2. 采样顶点
const points = lineCurve3.getPoints(50);

// 3. 渲染
const geometry = new THREE.BufferGeometry();
geometry.setFromPoints(points);
const material = new THREE.LineBasicMaterial({ color: 0x00ff00 });
const line = new THREE.Line(geometry, material);
scene.add(line);

2. CatmullRomCurve3（3D样条曲线）

核心说明

Three.js官方推荐的3D样条曲线（替代SplineCurve3），通过多个3D控制点生成平滑曲线，曲线穿过所有控制点，适合3D路径规划。

构造函数参数

// 语法：new THREE.CatmullRomCurve3(控制点数组, 是否闭合, 曲线类型, 张力)
const catmullCurve = new THREE.CatmullRomCurve3(
  [
    new THREE.Vector3(x1, y1, z1),
    new THREE.Vector3(x2, y2, z2),
    // ... 更多控制点
  ],
  false,       // 可选：是否闭合，默认false
  'centripetal',// 可选：曲线类型，默认'centripetal'
  0.5          // 可选：张力（0~1），默认0.5，值越大曲线越平缓
);

参数	类型	默认值	说明
`points`	Array<THREE.Vector3>	—	必传：3D控制点数组（至少2个）
`closed`	Boolean	false	是否闭合曲线
`type`	String	'centripetal'	曲线类型：'centripetal'（默认，自然）、'chordal'（更紧绷）、'catmullrom'（更平滑）
`tension`	Number	0.5	张力（0=无张力，1=最大张力）

使用示例

// 1. 创建3D样条曲线（4个控制点，空间弯曲）
const catmullCurve = new THREE.CatmullRomCurve3([
  new THREE.Vector3(-100, 0, 0),   // 控制点1
  new THREE.Vector3(-50, 80, 50),  // 控制点2
  new THREE.Vector3(50, -80, 100), // 控制点3
  new THREE.Vector3(100, 0, 50)    // 控制点4
]);

// 2. 采样顶点（100个点，保证3D平滑）
const points = catmullCurve.getPoints(100);

// 3. 渲染
const geometry = new THREE.BufferGeometry();
geometry.setFromPoints(points);
const material = new THREE.LineBasicMaterial({ color: 0x0000ff });
const line = new THREE.Line(geometry, material);
scene.add(line);

3. QuadraticBezierCurve3（3D二次贝塞尔曲线）

核心说明

3D版本的二次贝塞尔曲线，由「3D起点+3D控制点+3D终点」定义，支持空间弯曲。

构造函数参数

// 语法：new THREE.QuadraticBezierCurve3(起点, 控制点, 终点)
const quadBezier3 = new THREE.QuadraticBezierCurve3(
  new THREE.Vector3(x1, y1, z1), // 必传：3D起点
  new THREE.Vector3(x2, y2, z2), // 必传：3D控制点
  new THREE.Vector3(x3, y3, z3)  // 必传：3D终点
);

参数	类型	说明
`v0`	THREE.Vector3	3D起点
`v1`	THREE.Vector3	3D控制点（决定空间弯曲方向）
`v2`	THREE.Vector3	3D终点

使用示例

// 1. 创建3D二次贝塞尔曲线
const quadBezier3 = new THREE.QuadraticBezierCurve3(
  new THREE.Vector3(-80, 0, 0),   // 起点
  new THREE.Vector3(0, 80, 50),   // 控制点（Z轴偏移）
  new THREE.Vector3(80, 0, 100)   // 终点
);

// 2. 采样顶点
const points = quadBezier3.getPoints(80);

// 3. 渲染
const geometry = new THREE.BufferGeometry();
geometry.setFromPoints(points);
const material = new THREE.LineBasicMaterial({ color: 0xffff00 });
const line = new THREE.Line(geometry, material);
scene.add(line);

4. CubicBezierCurve3（3D三次贝塞尔曲线）

核心说明

3D版本的三次贝塞尔曲线，由4个3D点定义，支持复杂空间弯曲，是3D路径动画的核心曲线。

构造函数参数

// 语法：new THREE.CubicBezierCurve3(起点, 控制点1, 控制点2, 终点)
const cubicBezier3 = new THREE.CubicBezierCurve3(
  new THREE.Vector3(x1, y1, z1), // 必传：3D起点
  new THREE.Vector3(x2, y2, z2), // 必传：3D控制点1
  new THREE.Vector3(x3, y3, z3), // 必传：3D控制点2
  new THREE.Vector3(x4, y4, z4)  // 必传：3D终点
);

参数	类型	说明
`v0`	THREE.Vector3	3D起点
`v1`	THREE.Vector3	3D控制点1
`v2`	THREE.Vector3	3D控制点2
`v3`	THREE.Vector3	3D终点

使用示例

// 1. 创建3D三次贝塞尔曲线
const cubicBezier3 = new THREE.CubicBezierCurve3(
  new THREE.Vector3(-100, 0, 0),  // 起点
  new THREE.Vector3(-50, 100, 50),// 控制点1
  new THREE.Vector3(50, -100, 80),// 控制点2
  new THREE.Vector3(100, 0, 100)  // 终点
);

// 2. 采样顶点
const points = cubicBezier3.getPoints(100);

// 3. 渲染
const geometry = new THREE.BufferGeometry();
geometry.setFromPoints(points);
const material = new THREE.LineBasicMaterial({ color: 0xff00ff });
const line = new THREE.Line(geometry, material);
scene.add(line);

三、CurvePath（组合曲线）

核心说明

CurvePath 是「曲线容器」，可将多个2D/3D曲线组合成一个复合曲线，支持统一采样、平移、旋转等操作，适合绘制复杂路径（如迷宫、文字轮廓）。

核心方法

方法名	说明	示例
`add(curve)`	添加单个曲线到容器	`curvePath.add(lineCurve)`
`getPoints(n)`	统一采样所有曲线的顶点	`curvePath.getPoints(100)`
`closePath()`	闭合组合曲线（最后一个曲线终点连接第一个曲线起点）	`curvePath.closePath()`

使用示例（组合2D直线+圆弧）

// 1. 创建CurvePath容器
const curvePath = new THREE.CurvePath();

// 2. 添加子曲线（直线+圆弧）
// 子曲线1：2D直线（从(0,0)到(100,0)）
const lineCurve = new THREE.LineCurve(
  new THREE.Vector2(0, 0),
  new THREE.Vector2(100, 0)
);
curvePath.add(lineCurve);

// 子曲线2：圆弧（从(100,0)到(100,100)，90°圆弧）
const arcCurve = new THREE.ArcCurve(
  100, 0, 100, 0, Math.PI/2, true
);
curvePath.add(arcCurve);

// 3. 闭合曲线（可选）
// curvePath.closePath();

// 4. 统一采样顶点（100个点）
const points = curvePath.getPoints(100);

// 5. 渲染组合曲线
const geometry = new THREE.BufferGeometry();
geometry.setFromPoints(points);
const material = new THREE.LineBasicMaterial({ color: 0xff6600 });
const line = new THREE.Line(geometry, material);
scene.add(line);

四、完整实战示例（多曲线组合）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Three.js 曲线完整示例</title>
  <style>body { margin: 0; overflow: hidden; }</style>
</head>
<body>
 <script type="module">
    // 地址，升级为174版本
    import * as THREE from 'https://esm.sh/three@0.174.0';
    import { OrbitControls } from 'https://esm.sh/three@0.174.0/examples/jsm/controls/OrbitControls.js';
    import { GLTFLoader } from 'https://esm.sh/three@0.174.0/examples/jsm/loaders/GLTFLoader.js';
    // 1. 创建三大核心
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    camera.position.set(0, 0, 300); // 相机后退，看清所有曲线

    // 2. 轨道控制器（3D视角交互）
    const controls = new OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true;
    controls.dampingFactor = 0.05;

    // 3. 绘制2D椭圆
    const ellipseCurve = new THREE.EllipseCurve(0, 0, 80, 40);
    const ellipsePoints = ellipseCurve.getPoints(50);
    const ellipseGeo = new THREE.BufferGeometry();
    ellipseGeo.setFromPoints(ellipsePoints);
    const ellipseMat = new THREE.LineBasicMaterial({ color: 0xff0000 });
    const ellipseLine = new THREE.LineLoop(ellipseGeo, ellipseMat);
    scene.add(ellipseLine);

    // 4. 绘制3D样条曲线
    const catmullCurve = new THREE.CatmullRomCurve3([
      new THREE.Vector3(-100, 0, 0),
      new THREE.Vector3(-50, 80, 50),
      new THREE.Vector3(50, -80, 100),
      new THREE.Vector3(100, 0, 50)
    ]);
    const catmullPoints = catmullCurve.getPoints(100);
    const catmullGeo = new THREE.BufferGeometry();
    catmullGeo.setFromPoints(catmullPoints);
    const catmullMat = new THREE.LineBasicMaterial({ color: 0x0000ff });
    const catmullLine = new THREE.Line(catmullGeo, catmullMat);
    scene.add(catmullLine);

    // 5. 动画循环
    function animate() {
      requestAnimationFrame(animate);
      controls.update();
      renderer.render(scene, camera);
    }
    animate();

    // 6. 窗口适配
    window.addEventListener('resize', () => {
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(window.innerWidth, window.innerHeight);
    });
  </script>
</body>
</html>

示例效果

场景中显示红色2D椭圆（XY平面）和蓝色3D样条曲线（空间弯曲）；
支持鼠标旋转/缩放视角，查看3D曲线的空间形态；
曲线平滑无锯齿，色彩无偏色。

五、注意事项与优化

1. 常见坑点

线宽限制：WebGL标准中线宽（linewidth）仅支持1px，部分浏览器支持>1但兼容性差，如需粗线条建议用 Mesh 模拟（如挤压曲线成面）；
3D曲线视角：3D曲线需调整相机位置（Z轴后退），否则可能看不到；
采样点数：复杂曲线（如三次贝塞尔）需增加采样点数（100~200），否则会出现锯齿；
CurvePath闭合：closePath() 仅对2D曲线有效，3D曲线闭合需手动调整控制点。

2. 性能优化

复用几何体：多个曲线复用同一个 BufferGeometry（清空顶点后重新绑定）；
减少采样点数：简单曲线（直线、圆弧）采样点数设50即可，无需过高；
批量渲染：多个曲线合并为一个 Line 模型，减少渲染调用。

核心总结

核心流程：创建曲线 → getPoints采样顶点 → 几何体绑定顶点 → Line/LineLoop渲染；
曲线选型：
- 2D简单曲线：LineCurve/ArcCurve/EllipseCurve；
- 2D复杂曲线：SplineCurve/CubicBezierCurve；
- 3D路径：CatmullRomCurve3（推荐）/CubicBezierCurve3；
- 复合曲线：CurvePath（组合多个子曲线）；
关键参数：
- getPoints(n) 中 n 决定平滑度，推荐50~100；
- 3D曲线需调整相机Z轴位置，确保可见；
- 贝塞尔曲线的「控制点」是决定曲线形状的核心。