Extend (scale) line passing through 2 points

We have a segment that goes from A to B (both are Vector3). Is there a way to extend that segment by X amount on both sides? What logic can be applied and can we use any Vector3 methods?

(Sorry for my limited knowledge of trigonometry, I’m re-learning)

This function does not depend on 3JS, it runs purely on JavaScript.
It takes 3 arguments( A, B, L ).

A & B can be a THREE.Vector3() or an [object Object] with x, y, z keys assign to a number.

Argument L is a number that is added the segment length to find the target point.

If L is positive, the point will be in AB direction.
If L is negative, the point will be in BA direction.

The return value of the function is an [object Array] representing x,y,z of target point.

The function can be easily modified to return “X amount on both sides”.

function ext_l_seg( A, B, L ) {  
var AB = [ B.x - A.x, B.y - A.y, B.z - A.z ];
var AB_length = Math.hypot( ...AB );
return [ 'x', 'y', 'z' ].map( ( _ , i ) => AB[i] * L / AB_length + A[_] );
}

alert( ext_l_seg( { x: 1, y: 1, z: 0 }, { x: 3, y: 3, z: 0 },  2 ). join('\n') ); 

2 Likes

This example from the Collection of examples from discourse.threejs.org may be helpful.

ExtendedLineAtoB

Links and author in source code.

2 Likes

With methods of Vector3 you can do it this way:

var A = _vector3_; // start vector
var B = _vector3_; // end vector
var extend_val = some_value;

var dir = new THREE.Vector3().subVectors(B, A).normalize(); // direction from A to B is a normalized vector

var Aext = A.clone().addScaledVector(dir, -extend_val);
var Bext = B.clone().addScaledVector(dir, extend_val);
1 Like

All amazing solutions, thanks a lot people. I found this one also using Vector3 (where A and B are Vector3 and X is a scalar):

 const extendedA = A
    .clone()
    .sub(B)
    .normalize()
    .multiplyScalar(X)
    .add(B)

  const extendedB = B
    .clone()
    .sub(A)
    .normalize()
    .multiplyScalar(X)
    .add(A)
1 Like