获取three.js两点之间的控制点(附带一个方正中文字体下载地址)
首先有两个点:
const v0 = new THREE.Vector3(item.x, item.y, item.z); const v3 = new THREE.Vector3(item.target.x, item.target.y, item.target.z);
如果想要获取中间点的控制线直接调用方法 getBezierPoint(v0,v3);
getBezierPoint(v0,v3){ // 获取两点的控制点 // 角度 const angle = v0.angleTo(v3) * 180 / Math.PI; // 0 ~ Math.PI// // 角度值与长度值(下面可以调节不同的数字展示不同的曲线) const aLen1 = angle * 2, hLen1 = angle * angle * 10; const aLen2 = angle * 0, hLen2 = angle * angle * 1; // 两点的中心位置 const centerPoint = this.getVCenter(v0.clone(), v3.clone()) // 法线向量、使用中心点和向上的向量 const rayLine = new THREE.Ray(centerPoint, new THREE.Vector3(2, 1, 0)); // API 更新后,Ray类的 at 方法需要两个参数 const temp = new THREE.Vector3(0, 0, 0); // 计算位置 const at1 = hLen1 / rayLine.at(1,temp).distanceTo(centerPoint); const at2 = hLen2 / rayLine.at(1,temp).distanceTo(centerPoint); // 顶点坐标 const vTop1 = rayLine.at(at1, temp); const vTop2 = rayLine.at(at2, temp); // 控制点坐标 const v1 = this.getLenVector(v0.clone(), vTop1, aLen1); const v2 = this.getLenVector(v3.clone(), vTop2, aLen2); return [v1, v2] }
这样获得的控制点都是按照角度绘制的
aLen1/ hLen1 /aLen2 /hLen2 可以根据自己项目做出调整