使用CurvePath和CubicBezierCurve3创建一条曲线
1.曲线路径(CurvePath)
一个扩展了Curve的抽象基类。CurvePath仅仅是一个已连接的曲线的数组,但保留了曲线的API。
path.getPoints ( divisions : Integer ) : divisions -- 曲线分段数量。默认值为12。
2.三维三次贝塞尔曲线(CubicBezierCurve3)
创建一条平滑的三维 三次贝塞尔曲线, 由起点、终点和两个控制点所定义。
const path = new THREE.CurvePath();
const controlPoints = [
new THREE.Vector3(-10, 10, 5),
new THREE.Vector3(0, 0, 0),
new THREE.Vector3(5, 3, -5),
new THREE.Vector3(10, 3, -5),
new THREE.Vector3(30, 3, -5),
new THREE.Vector3(50, 3, -5),
new THREE.Vector3(70, 3, -5),
new THREE.Vector3(90, 3, -5),
new THREE.Vector3(110, 3, -5),
new THREE.Vector3(130, 3, -5),
new THREE.Vector3(150, 3, -5),
new THREE.Vector3(170, 3, -5),
new THREE.Vector3(170, 3, -10),
new THREE.Vector3(170, 3, -20),
new THREE.Vector3(170, 3, -30),
new THREE.Vector3(170, 3, -40),
new THREE.Vector3(170, 3, -50),
new THREE.Vector3(170, 3, -60),
new THREE.Vector3(170, 3, -70),
new THREE.Vector3(170, 3, -80),
new THREE.Vector3(170, 3, -90),
new THREE.Vector3(160, 3, -90),
new THREE.Vector3(150, 3, -90),
new THREE.Vector3(140, 10, -90),
new THREE.Vector3(130, 20, -90),
new THREE.Vector3(120, 30, -90),
new THREE.Vector3(110, 40, -90),
new THREE.Vector3(0, 30, -90),
new THREE.Vector3(-5, 20, -50),
new THREE.Vector3(-10, 10, -40),
new THREE.Vector3(-10, 10, -20),
new THREE.Vector3(-10, 10, 0),
new THREE.Vector3(-10, 10, 2),
new THREE.Vector3(-10, 10, 4),
new THREE.Vector3(-10, 10, 5),
];
// 使用 `CubicBezierCurve3` 将控制点连接成平滑的曲线
for (let i = 0; i < controlPoints.length - 3; i += 3) {
path.add(
new THREE.CubicBezierCurve3(
controlPoints[i], // 起始点
controlPoints[i + 1], // 第一个控制点
controlPoints[i + 2], // 第二个控制点
controlPoints[i + 3] // 结束点
)
);
}
const curvePathPoints = path.getPoints(50);
const curvGeometry = new THREE.BufferGeometry().setFromPoints(curvePathPoints);
const material1 = new THREE.LineBasicMaterial({ color: 0xff0000 });
// Create the final object to add to the scene
const curveObject = new THREE.Line(curvGeometry, material1);