threejs课程笔记-20 向量点乘、叉乘

向量点乘dot

点乘是向量的一种运算规则，点乘也有其它称呼，比如点积、数量积、标量积。

threejs三维向量Vector3封装了一个点乘相关的方法.dot()，本节课主要目的就是让大家能够灵活应用点乘方法.dot()

已知向量a和向量b

已知两个向量a和b，默认夹角是45度。

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

向量点乘.dot()语法

下面先给大家说下点乘.dot()的语法，然后再讲解它的用途。 a.dot(b)表示向量a与向量b点乘，返回结果是一个数字(标量)

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

点乘.dot()几何含义

你只需要记住a.dot(b)的几何含义是向量a在向量b上投影长度与向量b相乘，或者说向量a长度 * 向量b长度 * cos(ab夹角)。

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

单位向量点乘含义(计算向量夹角余弦值)

假设两个向量的夹角是θ，两个向量的单位向量进行点乘.dot()，返回的结果就是夹角θ的余弦值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);

夹角余弦值转角度值

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

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

点乘判断物体在人前或人后

通过three.js向量Vector3点乘方法.dot()判断物体在人的前面还是后面。

已知条件

人的正前方沿着z轴负半轴方向

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

人的位置和物体的位置

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

创建一个人指向物体的向量

物体坐标减去人坐标，创建一个人指向物体的向量

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

向量夹角与人前后关系判断

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

向量叉乘cross

threejs三维向量Vector3提供了叉乘的两个相关方法.crossVectors()和.cross()。叉乘也有其它称呼，比如向量积、外积、叉积、矢积。

已知两个向量a、b

已知3D空间中两个向量a、b

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

箭头可视化向量a、b

使用箭头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);

向量叉乘方法.crossVectors()

c.crossVectors(a,b)向量a和b叉乘的结果是一个新的向量c。

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

可视化叉乘结果c

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

这时候你会直观的发现向量c垂直于向量a、b构成的平面，或者说向量c同时垂直于向量a、向量b。

叉乘结果向量c几何含义

一方面是向量方向，刚刚通过可视化箭头给大家总结过，向量a叉乘向量b，得到一个新的向量c，向量c垂直于向量a和b构成的平面，或者说向量c同时垂直于向量a、向量b。另一方面是向量长度，假设向量a和b的夹角是θ，a和b叉乘结果是c，c的长度c.length()是a长度a.length()乘b长度b.length()乘夹角θ的正弦值sin(θ)

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