三階貝塞爾曲線
function addLines(v0, v3) {
// 計算向量夾角
let angle = v0.angleTo(v3) * 270 / Math.PI / 10; // 0 ~ Math.PI
let aLen = angle * 50,
hLen = angle * angle * 120;
let p0 = new THREE.Vector3(0, 0, 0);
// 開始,結束點
// let v0 = groupDots.children[0].position;
// let v3 = groupDots.children[1].position;
// 法線向量
let rayLine = new THREE.Ray(p0, getVCenter(v0.clone(), v3.clone()));
// 頂點座標
let vtop = rayLine.at(hLen / rayLine.at(1).distanceTo(p0));
// 控制點座標
let v1 = getLenVcetor(v0.clone(), vtop, aLen);
let v2 = getLenVcetor(v3.clone(), vtop, aLen);
// 繪製貝塞爾曲線
let curve = new THREE.CubicBezierCurve3(v0, v1, v2, v3);
let geo = new THREE.Geometry();
geo.vertices = curve.getPoints(50);
let mat = new THREE.LineBasicMaterial({color: 0xff0000});
return {
curve: curve,
lineMesh: new THREE.Line(geo, mat)
};
}
// 計算v1,v2 的中點
function getVCenter(v1, v2) {
let v = v1.add(v2);
return v.divideScalar(2);
}
// 計算V1,V2向量固定長度的點
function getLenVcetor(v1, v2, len) {
let v1v2Len = v1.distanceTo(v2);
return v1.lerp(v2, len / v1v2Len);
}
直接調用addlines方法可通過兩點生成貝塞爾曲線