描述
官方描述:
类表示的是一个三维向量
一个三维向量表示的是一个有顺序的、三个为一组的数字组合（标记为x、y和z）
例如:
- 一个位于三维空间中的点
- 一个在三维空间中的方向与长度的定义
- 任意的、有顺序的、三个为一组的数字组合
创建一个三维向量
//-- 默认值 x=0, y=0, z=0
const v1 = new THREE.Vector3( x, y, z );
解释官方描述中的定义
-
一个空间的点怎么解释?
就是三维空间x,y,z三个坐标轴对应的位置 -
三维空间的方向与长度是指什么?
- 长度是指从 坐标轴原点(0,0,0)到目标三维向量的距离 -- (欧几里德距离，即直线距离)
- 方向是指从 坐标轴原点(0,0,0)到目标三维向量的方向 ??
这个方向怎么理解呢？怎么用呢？
目前不清楚
常用的方法
- distanceTo - 计算两个坐标点的距离
const a = new THREE.Vector3( 5, 5, 5 );
const b = new THREE.Vector3( 10, 10, 10 );
//-- 表示a到b的距离，是一个绝对值，不会为负
const d = a.distanceTo( b );
- 计算两个已知三维向量的方向向量
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(绿色)
绿到红的方向向量- 白色线到达的位置
- 方向向量怎么用？
如果知道点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 }
- 叉乘获得两个三维向量的法相(垂直的)点 - 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 ); //-- 通过差值获取法相点位置
红到绿的叉乘蓝
- 点积获取两个三维向量的余弦值 - 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)
- 归一化 - 三维向量保持方向相同，长度为1 - normalize
const playerDirection = new THREE.Vector3();
//-- playerDirection获取与playerMesh方向与长度的三维向量
playerMesh.getWorldDirection(playerDirection);
//-- 将三维向量playerDirection进行归一化操作，方向不变，长度为1
playerDirection.normalize();
playerDirection.multiplyScalar(5)
camera.position.copy(playerDirection);
未完待续....
网友评论