threejs 三维向量Vector3学习

描述

官方描述:

类表示的是一个三维向量
一个三维向量表示的是一个有顺序的、三个为一组的数字组合（标记为x、y和z）
例如:

• 一个位于三维空间中的点
• 一个在三维空间中的方向与长度的定义
• 任意的、有顺序的、三个为一组的数字组合

创建一个三维向量

//-- 默认值 x=0, y=0, z=0
const v1 = new THREE.Vector3( x, y, z );

解释官方描述中的定义

1. 一个空间的点怎么解释?
   就是三维空间x,y,z三个坐标轴对应的位置

2. 三维空间的方向与长度是指什么?

• 长度是指从 坐标轴原点(0,0,0)到目标三维向量的距离 -- (欧几里德距离，即直线距离)
• 方向是指从 坐标轴原点(0,0,0)到目标三维向量的方向 ??

这个方向怎么理解呢？怎么用呢？
目前不清楚

常用的方法

1. distanceTo - 计算两个坐标点的距离

const a = new THREE.Vector3( 5, 5, 5 );
const b = new THREE.Vector3( 10, 10, 10 );
//-- 表示a到b的距离，是一个绝对值，不会为负
const d = a.distanceTo( b );

2. 计算两个已知三维向量的方向向量

const _point1 = new THREE.Vector3( 20, 0, 0 );
const _point2 = new THREE.Vector3( 0, 0, 10 );
const _point3 = _point2.clone().sub( _point1 );
console.log( _point3 );

• 说明:
  两个点的方向向量，就是目标点减去出发点，获得的最终坐标，称作他们的方向向量
  从视图上来看：
  类似于从坐标原点(0,0,0)出发，与这两个点连线，平行且距离相等的点的位置，就是方向向量

针对代码来看

• 点1(红色)到点2(绿色)的方向向量，就是用点2(绿色)减去点1(红色)

  
  红到绿的方向向量 - 白色线到达的位置

• 点2(绿色)到点1(红色)的方向向量，就是用点1(红色)减去点2(绿色)

  
  绿到红的方向向量- 白色线到达的位置

3. 方向向量怎么用？
   如果知道点A到点B的方向向量，又再知道A的三维向量，那么求B的位置
   点A到点B的方向向量，是B减去A，又已知A，那么方向向量+A点，即可求出B点

let pointAB = { x: -20, y: 0, z: 10 };
let pointA = new THREE.Vector3( 20, 0, 0 ); 
let pointB = pointA.clone().add(pointAB); //-- { x:0, y:0, z:10 }

4. 叉乘获得两个三维向量的法相(垂直的)点 - cross

const _point1 = new THREE.Vector3( 20, 0, 0 );
const _point2 = new THREE.Vector3( 0, 0, 10 );
const _point3 = _point2.clone().cross( _point1 );
console.log( _point3 ); //-- 通过差值获取法相点位置

红到绿的叉乘蓝

5. 点积获取两个三维向量的余弦值 - dot

• 获取两个点的余弦值

const _point1 = new THREE.Vector3( 20, 0, 0 );
const _point2 = new THREE.Vector3( 0, 0, 10 );
const _point3 = _point2.clone().cross( _point1 );
console.log( _point3 ); //-- { x: 0, y: 200, z: 0 }
//计算两个三维向量的余弦值
console.log(_point1.clone().dot(_point3)) //-- 0 - (两个点垂直的话，余弦值为0)
console.log(_point2.clone().dot(_point3)) //-- 0 - (两个点垂直的话，余弦值为0)

6. 归一化 - 三维向量保持方向相同，长度为1 - normalize

const playerDirection = new THREE.Vector3();
//-- playerDirection获取与playerMesh方向与长度的三维向量
playerMesh.getWorldDirection(playerDirection);
//-- 将三维向量playerDirection进行归一化操作，方向不变，长度为1
playerDirection.normalize();
playerDirection.multiplyScalar(5)
camera.position.copy(playerDirection);

未完待续....