Vectors in mathematics. Vector3. Vector2

Good afternoon.

I know the functions Vector3, Vector2, but I don’t know how to work with it.
I know how to use the copy, clone, distanceTo, set methods.

To use Vector3 and Vector2 well, you need to know - vectors in mathematics. Right?
Need to learn math? Right? Where to begin? Where can you quickly learn vectors? :face_with_raised_eyebrow:

Khan Academy has a lot of nice math courses - including algebra.

It’s nice to know as much as possible, but to work with vectors in 3D you kinda only need:

  • basic understanding of how to turn 2 points into a vector (ie. end - start; also good to understand that a vector can be both an “arrow” from point A to point B, as well as a displacement from an origin point)
  • calculating vector length
  • adding vectors (subtraction is the same, just an opposite sign)
  • scaling vectors using scalars
  • unit vectors (and how to turn any vector into a unit vector)
  • projection of one vector onto another / onto a surface

Things like dot-product and just vector multiplication may also be useful - but can’t recall using them outside fragment shaders, tbh :thinking:


Good. thank you :yum:

If you want to hide points or lines conditionally, dot-product is “per vertex” :slight_smile: : a) Way to hide Points if geometry is seen from backside? - #8 by prisoner849, b)LDraw-like edges


Studying mathematical vectors. I find out that vectors have a direction - AB. OK.
Now I look at the Vector3() in threeJS and I see that here the Vertor is a - point (x,y,z)

Yes, that is exactly what I meant by:

  • basic understanding of how to turn 2 points into a vector (ie. end - start; also good to understand that a vector can be both an “arrow” from point A to point B, as well as a displacement from an origin point)

Vectors can be understood both as a point or as a direction:

const vector = new Vector3(0.0, 1.0, 0.0);

Depending on whichever fits the situation best - you can imagine vector either as a point (0.0, 1.0, 0.0), or as an arrow from (0.0, 0.0, 0.0) to (0.0, 1.0, 0.0) (ie. arrow pointing upwards.)

Both are correct interpretations.

Vector in mathematics and vector in threeJS are different things?

They are the same thing in both Three and in math :grin:





Created vector.

let v1 = new THREE.Vector2(1, 2);

How do you know the direction of the created vectors?


It’s from [0, 0] to [1, 2] :thinking:

Start point: x1=1,y1=3. End point: x2=4,y2=1
Direction: dx=x2-x1, dy=y2-y1 => dx=4-1,dy=1-3; Total direction: dx=3,dy=-2
normalized direction: d=1/Math.sqrt(dx*dx+dy*dy); d=1/Math.sqrt(9+4); d=0.2773;
dx=dx*0.2773; dy=dy*0.2773; => dx=3*0.2773; dy=-2*0.2773;
Total normalized direction: dx=0,8319; dy=-0,5546;

Direction vectors can have any point as a starting point, they represent a shift. The signs of the components x, y z are to be considered.

Example: The uniform wind shifts all similar objects parallel.

Location vectors determine the coordinates of a point. They can be understood as shifts from the origin of coordinates.

If one adds a vector (shift) to a location vector (point), one receives a new point.

let v1 = new THREE.Vector2(1, 3);
let v2 = new THREE.Vector2(4, 1);
let dx = new THREE.Vector2((v2.x - v1.x), (v2.y - v1.y));

?? :face_with_raised_eyebrow:

“Direction vectors can have any point as a starting point, they represent a shift” - I found out. OK :+1:

OK :point_down:



  • A direction and length across a plane. In three.js the length will always be the Euclidean distance (straight-line distance) from (0, 0) to (x, y) and the direction is also measured from (0, 0) towards (x, y).


Going back to basics / fundamentals;

First, a vector is nothing more than a combination of multiple numbers. If you’re working with a 2D space, then you’ll only deal with X (horizontal) and Y (vertical) axis. A “vector2” is nothing more than two numbers that represent a position in the 2D space. The same principle applies to 3D space where the Z-number is introduced, representing depth.

Try to visualize the following, starting with a Vector2. Imagine a playing field of 10 x 10 meters, where 0, 0 is the center of the field. So, the top-left part of the field would be represented as a Vector2 of -5, -5, whilst the bottom right would be 5, 5. Having a Vector2 of -2, -2, means nothing more than a point in space that is slightly positioned towards the top left of your field.

A direction vector works in the same way, but these values are normalized, meaning they range from -1 to 1. So, imagine the same playing field where 0, 0 is the center; a direction vector of (-1, 0) would mean a direction that points to the left.

But what if you want to know the direction vector between two different points? The center point (0, 0) I just mentioned could be described as the origin. You could freely move this origin, since it’s just a location. So what if you would want to calculate the direction between two vectors? Simply move the origin. It’s just a vector2 right? Subtract both vectors and normalize the value.

The same thing can be done with Vector3’s for 3D-space. Just try to visualize a 3D space where each vector3 represents a position within that space.

Earlier I understood Vector2 and Vector3 as a point in space. I moved objects in space giving coordinates (x, y).
I got confused when I was introduced to vectors in mathematics. I didn’t understand the direction.

let v1 = new THREE.Vector2(1, 3);

Did I understand correctly? normalized - it is a function v1.normalize() ?

normalize() - Vector2 {x: 0.31622776601683794, y: 0.9486832980505138}

Normalization makes a vector to be 1 unit length: Vector magnitude & normalization (article) | Khan Academy


The 3 would be below the center line instead of above it. What you visualize in the graph is 1,-3