向量点乘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(θ)