如何在three.js中画3D圆弧及半圆弧组成圆

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

虽然实现了画圆弧的需求，但是发现存在很大的性能问题，由于是多次点击生成对应的圆弧线条，因此在点击很多次后就明显觉得页面卡顿，尝试了网上很多介绍，销毁材质，销毁mesh 等发现不生效，只有刷新页面才会回收。。。

原文地址：https://blog.csdn.net/weixin_43666952/article/details/138144615

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！