在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 这样下面分割的点就不会因为平面的原因不展示了。