一、引言
在计算机图形学领域，曲线和曲面是构建复杂图形与三维模型的基础。从精美的游戏场景到逼真的工业设计模型，曲线曲面技术都发挥着至关重要的作用。接下来，我们将深入学习计算机图形学中曲线曲面的相关知识，并通过 JavaScript 代码进行实践。
二、曲线基础知识
（一）曲线的定义与表示
曲线可以看作是点在空间中按照一定规律运动形成的轨迹。在计算机图形学中，我们常用参数方程来表示曲线。通过改变参数的值，就能得到曲线上不同的点。例如，一条简单的二维曲线可以通过参数 t 的变化，在平面上生成一系列的点，将这些点连接起来就形成了曲线。
（二）常见曲线类型
- 贝塞尔曲线
贝塞尔曲线由法国工程师皮埃尔・贝塞尔在 20 世纪 60 年代开发，广泛应用于图形设计、动画制作等领域。它由起点、终点和一个或多个控制点决定形状。控制点不位于曲线上，但会影响曲线的弯曲程度和方向。
以二次贝塞尔曲线为例，它由两个端点和一个控制点构成。随着控制点位置的变化，曲线的弯曲形态也会发生改变。
- 样条曲线
样条曲线是通过一系列给定点的平滑曲线。它能够保证曲线在连接点处具有一定的连续性，如位置连续、切线连续等。常见的样条曲线有三次样条曲线，它在实际应用中可以很好地平衡曲线的平滑性和计算复杂度。
三、曲面基础知识
（一）曲面的定义与表示
曲面可以理解为在空间中由曲线按照一定方式运动或变形所形成的面。和曲线类似，曲面也常用参数方程表示，不过这里需要两个参数，通过改变这两个参数的值，能够生成曲面上的不同点，进而构建出整个曲面。
（二）常见曲面类型
- 贝塞尔曲面
贝塞尔曲面是贝塞尔曲线在三维空间的拓展。它由一系列控制点组成的网格来定义形状，控制点的数量和排列方式决定了曲面的复杂度和形态。常见的有双线性贝塞尔曲面、双二次贝塞尔曲面等。
- NURBS 曲面
NURBS（非均匀有理 B 样条）曲面是一种功能强大的曲面表示方法。它能够精确地表示各种几何形状，包括圆锥、圆柱等标准几何形体，同时也能生成复杂的自由曲面。NURBS 曲面具有良好的数学性质和可控性，在 CAD/CAM（计算机辅助设计 / 制造）领域得到广泛应用。
四、JavaScript 实现曲线曲面
（一）绘制贝塞尔曲线
在 JavaScript 中，我们可以利用 HTML5 的 Canvas 来绘制贝塞尔曲线。以下是一个绘制二次贝塞尔曲线的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>二次贝塞尔曲线</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="400"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// 起点坐标
const startX = 50;
const startY = 50;
// 控制点坐标
const controlX = 200;
const controlY = 20;
// 终点坐标
const endX = 350;
const endY = 50;
ctx.beginPath();
ctx.moveTo(startX, startY);
ctx.quadraticCurveTo(controlX, controlY, endX, endY);
ctx.strokeStyle = 'blue';
ctx.lineWidth = 2;
ctx.stroke();
</script>
</body>
</html>
在上述代码中，我们先获取 Canvas 的上下文，然后定义了贝塞尔曲线的起点、控制点和终点坐标。通过quadraticCurveTo方法绘制二次贝塞尔曲线，并设置线条的颜色和宽度进行绘制展示。
如果要绘制三次贝塞尔曲线，可以使用bezierCurveTo方法，示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三次贝塞尔曲线</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="400"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// 起点坐标
const startX = 50;
const startY = 50;
// 第一个控制点坐标
const controlX1 = 100;
const controlY1 = 10;
// 第二个控制点坐标
const controlX2 = 300;
const controlY2 = 90;
// 终点坐标
const endX = 350;
const endY = 50;
ctx.beginPath();
ctx.moveTo(startX, startY);
ctx.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);
ctx.strokeStyle ='red';
ctx.lineWidth = 2;
ctx.stroke();
</script>
</body>
</html>
（二）简单曲面绘制示例
这里以绘制一个简单的平面为例，在三维空间中可以通过多个点来定义一个平面。我们借助 Three.js 库来实现三维场景中的平面绘制。首先需要引入 Three.js 库文件，然后编写以下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单平面绘制</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
</head>
<body>
<script>
// 创建场景
const scene = new THREE.Scene();
// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 创建平面几何体
const geometry = new THREE.PlaneGeometry(2, 2);
// 创建材质
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true });
// 创建网格对象
const plane = new THREE.Mesh(geometry, material);
scene.add(plane);
function animate() {
requestAnimationFrame(animate);
plane.rotation.x += 0.01;
plane.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>
在上述代码中，我们首先创建了 Three.js 中的场景、相机和渲染器。接着定义了一个平面几何体，设置好材质后创建网格对象并添加到场景中。最后通过animate函数实现平面的旋转动画，并进行渲染展示。
五、总结
通过本文的学习，我们了解了计算机图形学中曲线曲面的基础概念、常见类型，并通过 JavaScript 代码进行了简单的实践。曲线曲面知识是计算机图形学的重要基石，掌握这些内容将有助于我们进一步探索更复杂的图形生成和三维建模技术。后续可以尝试在实际项目中运用这些知识，创作出更精彩的图形和模型。
上述文章涵盖了曲线曲面基础与代码实践，希望能满足你的需求。若想补充特定曲线曲面内容或修改代码，欢迎随时告诉我。
