前言

前面章节介绍了几何体，其中圆锥、圆柱等几何体是由三角面构成的，而不是真的‘圆’，本节我们就来学习一下弧，渲染出来一个圆。

曲线

我们先来学习一下弧线的基类——曲线Curve，圆弧就是继承该基类的属性方法，以下就是Curve几种属性方法：

.arcLengthDivisions属性：曲线的精度，默认为200。
.getPoint(t,position):获取曲线某个位置的点，t就是位置0-1之间，position可选一个三维向量用来存放点。
.getPointAt():根据弧长获取对应位置的点。用法跟getPoint基本一样。
.getPoints():接受一个参数分段数，返回分段的各个点。
.getLengts():获取曲线的弧长。
.toJSON():获取曲线的JSON数据。
.fromJSON():用JSON数据生成曲线。那么在曲线的基础上three提供了ArcCurve用于生成圆弧线。ArcCurve就是椭圆弧线的别名，它的构造函数如下：

EllipseCurve( aX, aY, xRadius, yRadius, aStartAngle, aEndAngle, aClockwise, aRotation)
// aX/Y:椭圆中心x/y坐标。
// x/yRadius:x/y轴上半径。
// aStartAngle:弧线开始弧度，从x正轴开始算。
// aEndAngle:弧线结束弧度。
// aClockwise:绘制方向是否是顺时针，默认false为逆时针。
// aRotation:x正轴逆时针旋转角度。

利用构造函数我们就能画出圆弧：

const geometry = new THREE.BufferGeometry();
const arc = new THREE.ArcCurve(0, 0, 3, 0, 2 * Math.PI);
const points = arc.getPoints(100);
geometry.setFromPoints(points);
const material = new THREE.LineBasicMaterial({
  color: 0x8888
});
const line = new THREE.Line(geometry, material);
scene.add(line);

QQ图片20230420225924.png

我们可以简单分析实现过程，通过ArcCurve生成圆，利用getPoints方法去获取分段的点，再利用几何体的setFromPoints方法给position赋值，最后与线材质结合生成线模型得到得圆。所以这个圆本质上是通过顶点数据沿着特定轨迹渲染出来的。

直线

如果我们想要得到一条直线可以通过线模型生成，而直线是曲线的一种，所以我们可以通过曲线去生成直线。对应的构造函数有两个：

LineCurve:生成一个二维的曲线，接收两个参数，一个起点，一个终点，点的位置是用二维坐标表示

const geometry = new THREE.BufferGeometry();
const start = new THREE.Vector3(1,1,)
const end = new THREE.Vector3(2,2,)
const lineCurve = new THREE.LineCurve(start,end)
const points = lineCurve.getPoints(20)
geometry.setFromPoints(points)
const material = new THREE.LineBasicMaterial({
  color: 0x8888
});
const line = new THREE.Line(geometry, material);
scene.add(line);

P)GW%%R7Q`QIJN5DIYBY8.png

LineCurve3:生成一个三维的曲线，也是接收起点、终点两个参数，坐标是三维坐标。

const start = new THREE.Vector3(1,1,2)
const end = new THREE.Vector3(2,2,3)
const lineCurve = new THREE.LineCurve3(start,end)

QQ图片20230420232427.png

总结

以上就是three中曲线的模型，圆弧本质就是利用多个顶点数据，沿着特点轨迹连接而成。

three学习（十五）——曲线

前言

曲线

直线

总结