Create line with same origin and different angle

Questions
1

Hello there,

I would like to create a new line based in other but with different angle.

I created a jsfiddle to understand good it. If you hold down button and move mouse you can create two lines. The red line is the mouse direction and I would like to set the blue line in other angle( for example 90) and the same size / origin.

Captura de pantalla 2020-10-09 a las 16.40.20

I try this but isn’t work

   //red line
   const direction = new THREE.Vector3();
   direction.subVectors( this.currentPosition, this.startPosition );
   const anchorOne = new THREE.Vector3();
   anchorOne.addVectors ( this.currentPosition, direction.multiplyScalar(1.5) );
   //blue line
   const cloneDir = direction.clone();
   var axis = new THREE.Vector3( 0, 0, 0 );
   var angle = THREE.Math.degToRad( 90 ) ;
   cloneDir.applyAxisAngle( axis, angle );

Any suggestion are welcome,
Thanks

2 
var axis = new THREE.Vector3( 0, 0, 0 );
var angle = THREE.Math.degToRad( 90 ) ;
cloneDir.applyAxisAngle( axis, angle );

This is correct, but you apply 90 degrees rotation to a zero-vector axis (an axis that is pointing in no direction, ie. there won’t be any rotation.)

You can render a vector rotated by 90 degrees using:

const cloneDir = new THREE.Vector3(direction.y, -direction.x, 0).add(this.currentPosition);

Edit: If you didn’t mean just by 90, this should work for any angle:

let cloneDir = direction.clone();
cloneDir.applyAxisAngle( new THREE.Vector3(0, 0, 1), THREE.MathUtils.degToRad(45) );
cloneDir = cloneDir.add(this.currentPosition);
1 Like
3

Okay thank you so much !!!