空间五点曲线：

2023-11-19 07:29:30

三维样条曲线：开启曲线制图的新境界

在计算机图形学中，曲线是无处不在的元素，从水波的涟漪到花瓣的优雅轮廓，曲线用其优美的形态点缀着艺术和技术的领域。绘制曲线需要三个关键因素：控制点、曲线类型和参数方程。

Catmull-Rom 曲线：点连点，曲线随心游走

在 Three.js 中，Catmull-Rom 曲线构造函数凭借其强大的功能，可根据指定的控制点生成三维样条曲线。想象一下控制点是一连串的点，那么曲线就是这些点的轨迹，引领我们领略三维空间的魅力。

代码示例：从点到线，曲线畅游三维世界

// 创建场景
const scene = new THREE.Scene();

// 设置相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// 构建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);

// 构造几何体
const geometry = new THREE.BufferGeometry();
const vertices = new Float32Array([
  // 点1
  -10, 0, 10,
  // 点2
  -5, 10, 10,
  // 点3
  0, 0, 10,
  // 点4
  5, -10, 10,
  // 点5
  10, 0, 10
]);

// 设置顶点数组
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));

// 创建样条曲线
const curve = new THREE.CatmullRomCurve3([
  new THREE.Vector3(-10, 0, 10),
  new THREE.Vector3(-5, 10, 10),
  new THREE.Vector3(0, 0, 10),
  new THREE.Vector3(5, -10, 10),
  new THREE.Vector3(10, 0, 10)
]);

// 获取曲线上的顶点数据
const points = curve.getPoints(50);

// 设置几何体的顶点数组
geometry.setFromPoints(points);

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

// 创建线条对象
const line = new THREE.Line(geometry, material);

// 将线条对象添加到场景
scene.add(line);

// 设置相机位置
camera.position.z = 50;

// 渲染场景
renderer.render(scene, camera);