threejs course notes-20 Vector dot product and cross product

Vector dot product dot

Dot product is an operation rule for vectors. Dot product also has other names, such as dot product, quantity product, and scalar product.

threejs three-dimensional vector Vector3 encapsulates a dot product related method.dot(). The main purpose of this lesson is to enable everyone to flexibly apply the dot product method.dot()

Known vector a and vector b

Given two vectors a and b, the default angle is 45 degrees.

const a = new THREE.Vector3(10, 10, 0);
const b = new THREE.Vector3(20, 0, 0);

Vector dot product.dot() syntax

Let me first explain to you the syntax of dot multiplication.dot(), and then explain its use. a.dot(b) represents the dot product of vector a and vector b, and the return result is a number (scalar)

//向量a与向量b点乘，返回结果是一个数字
const dot = a.dot(b);
console.log('点乘结果',dot);

Dot product.dot() geometric meaning

You only need to remember that the geometric meaning of a.dot(b) is the projection length of vector a on vector b multiplied by vector b, or vector a length * vector b length * cos (ab angle).

const a = new THREE.Vector3(10, 10, 0);
const b = new THREE.Vector3(20, 0, 0);
// dot几何含义：向量a长度 * 向量b长度 * cos(ab夹角)
const dot = a.dot(b);
console.log('点乘结果',dot);//判断结果是不是200

 The meaning of unit vector dot product (calculate the cosine of the angle between vectors)

Assume that the angle between the two vectors is θ, and the unit vectors of the two vectors are dot multiplied by .dot(), and the result returned is the cosine value of the angle θ cos(θ)

const a = new THREE.Vector3(10, 10, 0);
const b = new THREE.Vector3(20, 0, 0);
// a、b向量归一化后点乘
const cos =  a.normalize().dot(b.normalize());
console.log('向量夹角余弦值',cos);

Angle cosine value rotation angle value 

//反余弦计算向量夹角弧度
const rad = Math.acos(cos);

// 弧度转角度
const angle = THREE.MathUtils.radToDeg(rad);
console.log('向量夹角角度值',angle);   // 45

Dot product determines whether the object is in front of or behind the person

Determine whether the object is in front or behind the person through the three.js Vector3 dot multiplication method.dot().

known conditions

Directly in front of the person along the negative half axis of the z-axis

// a向量：人的正前方沿着z轴负半轴
const a = new THREE.Vector3(0,0,-1);

The position of people and the position of objects

person.position.set(0,0,2);//人位置
mesh.position.set(2,0,-3);//物体位置

Create a vector of a person pointing at an object

The object coordinates are subtracted from the person coordinates to create a vector pointing the person towards the object.

const b = mesh.position.clone().sub(person.position);

The angle between vectors and the judgment of the relationship between people

// a向量：人的正前方
const a = new THREE.Vector3(0,0,-1);
// 人指向物体的向量
const b = mesh.position.clone().sub(person.position);

 

vector cross product cross

threejs three-dimensional vector Vector3 provides two related methods of cross product. crossVectors() and .cross(). Cross products also have other names, such as vector product, outer product, cross product, and vector product.

Two vectors a and b are known

Two vectors a and b in 3D space are known

const a = new THREE.Vector3(50, 0, 0);
const b = new THREE.Vector3(30, 0, 30);

Arrow visualization vectors a, b

Visual representation of vectors using arrow THREE.ArrowHelper

//给箭头设置一个起点(随便给个位置就行)
const O = new THREE.Vector3(0, 0, 0);
// 红色箭头表示向量a
const arrowA = new THREE.ArrowHelper(a.clone().normalize(), O, a.length(),0xff0000);
// 绿色箭头表示向量b
const arrowB = new THREE.ArrowHelper(b.clone().normalize(), O, b.length(),0x00ff00);

Vector cross product method.crossVectors()

c.crossVectors(a,b) The result of the cross product of vectors a and b is a new vector c.

// 创建一个向量c，用来保存叉乘结果
const c = new THREE.Vector3();
//向量a叉乘b，结果保存在向量c
c.crossVectors(a,b);
console.log('叉乘结果',c);//叉乘结果是一个向量对象Vector3

Visualize the cross product result c

// 可视化向量a和b叉乘结果：向量c
const arrowC = new THREE.ArrowHelper(c.clone().normalize(), O, c.length()/30,0x0000ff);

At this time, you will intuitively find that vector c is perpendicular to the plane formed by vectors a and b, or that vector c is perpendicular to vector a and vector b at the same time.

 

The geometric meaning of the cross product result vector c

On the one hand, it is the direction of the vector. As I just summarized for you through the visual arrow, vector a cross-multiplies vector b to get a new vector c. Vector c is perpendicular to the plane formed by vectors a and b, or vector c is perpendicular to vector a at the same time. , vector b. On the other hand, it is the vector length. Assume that the angle between vectors a and b is θ, the cross product of a and b is c, and the length of c, c.length(), is the length of a, a.length() times the length of b, b.length( ) times the sine of the angle θ sin(θ)

c.crossVectors(a,b);
c.length() = a.length()*b.length()*sin(θ)