three Line3 三维几何线段

279 阅读3分钟

在 Three.js 中,Line3 是一个表示三维空间中线段的类,由两个端点定义。这个类非常适合用于涉及线的数学运算,比如计算距离、检查交点或找到中点等。

Line3 有两个属性 十二个方法

属性

  • start : Vector3 Vector3 表示线段的起点。
  • end : Vector3 Vector3 表示线段的终点

方法

  • applyMatrix4 ( matrix : Matrix4 ) : this 对此线段应用矩阵变换。 就是旋转,平移,缩放
  • at ( t : Float, target : Vector3 ) : Vector3 t - 使用值0-1返回沿线段的位置。 target — 计算结果会被拷贝到target。返回一个线段某一位置的向量,当 t = 0的时候返回起始点,当t = 1的时候返回终点。
  • clone () : Line3 返回一个与此线段拥有相同起始点 start 和 终点end 的线段。
  • closestPointToPoint ( point : Vector3, clampToLine : Boolean, target : Vector3 ) : Vector3 point - 用于计算线段上到该点最近的点。 clampToLine - 是否将结果限制在线段起始点和终点之间。 target — 结果会拷贝到target。 返回线段上到point最近的点。如果参数 clampToLine 为true。返回值将会在线段之间。
    // 创建两个 Vector3 点
    const start = new THREE.Vector3(0, 0, 0);
    const end = new THREE.Vector3(1, 1, 1);
    // 创建 Line3 实例
    const line = new THREE.Line3(start, end);
    // 计算线段的距离
    const distance = line.distance();  // 计算起点和终点之间的距离
    // 找到给定点到线段的最近点
    const point = new THREE.Vector3(0.5, 0.5, 0);
    const pointSave = new THREE.Vector3();
    const closestPoint = line.closestPointToPoint(point, true, pointSave);  // true 表示计算最近点
    console.log(closestPoint,"closestPoint",pointSave,"pointSave",distance,"distance") 
    // { "x": 0.3333333333333333, "y": 0.3333333333333333, "z": 0.3333333333333333 } closestPoint { "x": 0.3333333333333333, "y": 0.3333333333333333, "z": 0.3333333333333333} 'pointSave' 1.7320508075688772 'distance'
  • closestPointToPointParameter ( point : Vector3, clampToLine : Boolean ) : Float point - 用于计算返回值的点 clampToLine - 结果是否处于 [0, 1]之间。返回一个基于点投影到线段上的点的参数。如果 clampToLine 为true则返回值将在0到1之间。
  • copy ( line : Line3 ) : this 拷贝传入线段的起始点 start 和终点 end 向量到当前线段。
  • delta ( target : Vector3 ) : Vector3 target — 结果将会拷贝到target。 返回线段的向量。(终点end向量减去起始点start向量)。
  • distance () : Float 返回直线起点和终点之间的欧几里德距离(直线距离)
    // 创建两个 Vector3 点
    const start = new THREE.Vector3(0, 0, 0);  // 起点
    const end = new THREE.Vector3(3, 4, 0);    // 终点
    // 创建 Line3 实例
    const line = new THREE.Line3(start, end);
    // 计算线段的长度
    const length = line.distance();
    console.log("线段的长度:", length);  // 输出: 线段的长度: 5

1728695410379.png

  • distanceSq () : Float 返回起始点start和终点end的欧几里得距离Euclidean distance。(直线距离)
    const start = new THREE.Vector3(1, 2, 3);  // 起点
    const end = new THREE.Vector3(4, 6, 8);    // 终点
    // 创建 Line3 实例
    const line = new THREE.Line3(start, end);
    // 计算线段的平方长度
    const lengthSq = line.distanceSq();
    console.log("线段的平方长度:", lengthSq);  // 输出: 线段的平方长度: 50

1728695468938.png

  • equals ( line : Line3 ) : Boolean 如果给定线段与当前线段的起始点start和终点end都相同则返回true。
  • getCenter ( target : Vector3 ) : Vector3 target — 结果会写入target。 返回线段的中心点。
  • set ( start : Vector3, end : Vector3 ) : this start - 设置线段的起点 start point。 end - 设置线段的终点 end point。 将传入的向量设置到线段的起始点和终点。