獲取three.js兩點之間的控制點

天涯何处归一發表於2024-06-17
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  可以根據自己專案做出調整

相關文章