在three.js中画圆弧以及画圆，首先会想到的是ArcCurve，这个曲线API，经过使用发现，他是一个二维平面的，也就是说只在X-Y轴组成的平面可以使用，三维坐标使用的时候不生效，比如说：我期望的圆弧是平行于X-Z这个平面，可能有时候会想到让他沿着某一个轴旋转不就好了么。经过测试发现，首先数据是XYZ的三维坐标，在XY这个平行平面绘制圆弧是二维坐标，因此一开始的位置偏移量就很大，即使计算出需要旋转的角度以及旋转轴，跟预期的效果也是不一样的。
最后经过AI辅助，选择了CatmullRomCurve3 进行圆弧的绘制。首先获取的数据是CAD之类的建模软件导出的，这类的数据画圆弧以及画圆，就和小学的时候算圆柱体表面积类似，只不过，圆柱变面积计算是把柱体部分看成是一个长方体，而这一类的是分为对称的两个，因此拿到的起止点两两一组组成的圆弧面。
这个API中需要传入的是三维坐标数组，首先在获取到的数据有两个点是起止点，通过方法
function getFullCirclePointsFromArc(centre, start, end, segments) {
// 计算半圆的半径
let radius = Math.sqrt(Math.pow(start.x - centre.x, 2) + Math.pow(start.y - centre.y, 2));
// 计算半圆的起始角度和结束角度
let startAngle = Math.atan2(start.y - centre.y, start.x - centre.x);
let endAngle = Math.atan2(end.y - centre.y, end.x - centre.x);
// 确保角度是顺时针方向
if (startAngle > endAngle) {
[startAngle, endAngle] = [endAngle, startAngle];
}
// 计算完整圆的起始角度和结束角度
// 如果半圆是顺时针方向，则完整圆也是顺时针方向
let fullCircleStartAngle = startAngle;
let fullCircleEndAngle = endAngle + Math.PI; // 半圆到完整圆需要增加180度
let points = [];
for (let i = 0; i <= segments; i++) {
let angle = fullCircleStartAngle + (i / segments) * (fullCircleEndAngle - fullCircleStartAngle);
let x = centre.x + radius * Math.cos(angle);
let y = centre.y + radius * Math.sin(angle);
let z = centre.z; // 假设完整圆在同一个平面
points.push(new THREE.Vector3(x, y, z));
}
return points;
}计算出半径 起止角度 以及这两个点之间需要渲染的等分数 组成一个点数组。然后
const segments = 50; // 曲线分段数
pointsA[i] = getFullCirclePointsFromArc(linex[i].centre, linex[i].start,linex[i].end, segments);
curveA[i] = new THREE.CatmullRomCurve3(pointsA[i]);
curvePointsA[i] = curveA[i].getSpacedPoints(segments);
for (let j = 0; j < curvePointsA[i].length-1; j++) {
const distance = curvePointsA[i][j].distanceTo(curvePointsA[i][j+1]);
// 创建矩形几何体
boxGeometryA[j] = new THREE.BoxGeometry(1, 1, distance);
boxMeshA[j] = new THREE.Mesh(boxGeometryA[j], material);
// 设置矩形的位置和旋转
boxMeshA[j].position.copy(curvePointsA[i][j]);
boxMeshA[j].lookAt(curvePointsA[i][j+1]); // 调整矩形的方向
boxMeshA[j].name = "line_";
blinkMaterial(material);
// 将矩形网格添加到场景中
scene.add(boxMeshA[j]);
}将得到的点每一个都创建一个几何体并将他们连接到一起 就绘制出了三维的圆弧 。
以上代码存在一定的BUG，画圆的时候的endAngle只正对了给出的坐标是半圆弧，其实这里应该是Math.PI*2 这样下面分割的点就不会因为平面的原因不展示了。
