获取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  可以根据自己项目做出调整
posted @ 2024-06-17 09:21  天涯何处归一  阅读(16)  评论(1编辑  收藏  举报