Path.quadraticCurveTo()

路径（Path）对象是three.js中的一个关键类，它允许我们在场景中渲染2D或3D形状。其中，quadraticCurveTo()函数可以用于在路径对象中添加二次贝塞尔曲线段。本文将详细介绍这个函数的用法及参数。

语法

Path.quadraticCurveTo(cpX, cpY, x, y)

参数

• cpX：贝塞尔曲线控制点X坐标
• cpY：贝塞尔曲线控制点Y坐标
• x：曲线终点X坐标
• y：曲线终点Y坐标

描述

quadraticCurveTo()函数用于在路径对象中添加一条带有一个控制点的二次贝塞尔曲线段。这条曲线段由路径的当前点（当前点初始化为0, 0）开始，通过给定的控制点，最终到达给定的终点。该函数需要在设置好路径起点后进行调用，否则将无法生效。

示例

以下示例展示了如何使用quadraticCurveTo()函数创建一个简单的二次贝塞尔曲线路径。

const path = new THREE.Path();
path.moveTo(10, 10);
path.quadraticCurveTo(50, 10, 90, 50);

const geometry = path.createPointsGeometry(50);
const material = new THREE.LineBasicMaterial({ color: 0xff0000 });
const curve = new THREE.Line(geometry, material);
scene.add(curve);

以上示例中，我们创建了一个路径对象，并以(10, 10)为起点，通过调用quadraticCurveTo()函数在路径上添加了一个二次贝塞尔曲线。最终，我们将这个路径对象转化为点几何体，并通过创建一条红色线条将其添加到了场景中。

参考资料

• Three.js documentation