THREE.js开荒小记（一）：在空间直角坐标系画劣弧的思路
最近从开发后端的工作往前端转移，主要是用three.js作图的一些难点攻关。有个比较有意思的问题：
在空间直角坐标系中（x,y,z）中，两条有一个相同顶点的线段，要标注他们的角度在靠近交点的地方画劣弧，众所周知，在编程中使用数学问题可以有效的简化代码，所以这个问题就被引申为2个数学问题：
1、在空间直角坐标系中,已知线段AB求一点C,距离A的长度为参数l，其中C必定在线段AB或AB的延长线上，求出C点坐标；
2、已知在空间直角坐标系内有3个不在同一直线上的点OAB,B、O距离A、B的距离相等，以O点为圆心，以B、C为2个端点画劣弧，单位弦长为l下点的坐标集合。
在THREE中，空间里划线需要到LINE3这个类，根据文档找到at和distance方法介绍：
.distance () : Float
Returns the Euclidean distance (straight-line distance) between the line's start and end points.
.at ( t : Float, target : Vector3 ) : Vector3
t - 使用值0-1返回沿线段的位置。
target — 计算结果会被拷贝到target。
at方法直接就解决了第一个问题，已知AB两点坐标可知线段长度，有AC长度可换算成比值，带入at方法即可计算在此不做赘述；
第二个问题的思路请教了博主的一位朋友指点给出了数学模型， 思路如下：
1) 连接AB，求出AB中点C，连接OC过C点做延长线相交弧AB于点P；
2） 根据余弦定理，可以求出AB长度，根据勾股定理，可求出OC长度，本身已知OP长度；
3） 根据问题一的解（定比分点坐标公式），可以求出P点坐标，连接AP，如果AP长度大于单位弦长l则继续分，直到AP'长度不大于 l 为止；
下面列出代码：
//显示角度的弧线在空间坐标系下绘制数据工具
//空间直角坐标系中，有3点OAB,OA=OB,找到弧AB的中点C1
//点O,点A,点B
//返回C1坐标
function GetMPointOnRound(PointsO,PointsA,PointsB)
{
let lineOA=new Line3(PointsO,PointsA)
let lineAB=new Line3(PointsA,PointsB);
let PointsC=new Vector3();
lineAB.getCenter(PointsC);
let lineOC=new Line3(PointsO,PointsC);
//AC1/CC1
let proportion=lineOA.distance()/lineOC.distance();
let PointsC1=new Line3(PointsO,PointsC).at(proportion);
return PointsC1;
}
let geometry = new THREE.Geometry();
//空间直角坐标系中，有3点OAB,OA=OB,以O为圆心过AB做圆求劣弧点的集合。（其中点与点之间间距为Unitlength）
//点O,点A,点B,集合中点与点之间的距离
//点的集合（有序）
function GetPointByMinorArc(PointsO,PointsA,PointsB,Unitlength)
{
let PointsC=GetMPointOnRound(PointsO,PointsA,PointsB);//劣弧上中点
let lineAC=new Line3(PointsA,PointsC);
if (lineAC.distance()>Unitlength) {
GetPointByMinorArc(PointsO,PointsA,PointsC,Unitlength);
GetPointByMinorArc(PointsO,PointsC,PointsB,Unitlength);
}
else {
geometry.vertices.push(PointsA,PointsC);
}
}
three.js文档引用自：http://www.webgl3d.cn/threejs/docs/#api/zh/math/Line3
作者：sunnysnow0527 出处：https://mp.csdn.net/console/article 欢迎转载，也请保留这段声明。谢谢！