Threejs入门之十九：Threejs中的向量

今天我们来认识下Threejs中的向量，在Threejs中，有二维向量Vector2、三维向量Vector3和四维向量Vector4之分，这些向量可以表示很多数据，后面会一一介绍，在了解Threejs中的向量之前，我们先来复习下数学中的向量

1.数学中的向量

在数学中，向量（也称为矢量），指具有大小和方向的量。它可以形象化地表示为带箭头的线段。箭头所指：代表向量的方向；线段长度：代表向量的大小。与向量对应的量叫做数量（也称标量），数量（或标量）只有大小，没有方向。

Threejs中的向量

二维向量（Vector2）

一个二维向量是一对有顺序的数字（标记为x和y），可用来表示很多事物，例如： 一个位于二维空间中的点（例如一个在平面上的点）。 一个在平面上的方向与长度的定义。在three.js中，长度总是从(0, 0)到(x, y)的 Euclidean distance（欧几里德距离，即直线距离）， 方向也是从(0, 0)到(x, y)的方向。 任意的、有顺序的一对数字。 其他的一些事物也可以使用二维向量进行表示，比如说动量矢量、复数等等；

对 Vector2 实例进行遍历将按相应的顺序生成它的分量 (x, y)。 创建一个二维向量

const b = new THREE.Vector2( );

创建一个二维向量并赋值

const a = new THREE.Vector2( 0, 1 );

其构造函数如下： Vector2( x : Float, y : Float ) x - 向量的x值，默认为0。 y - 向量的y值，默认为0。

二维向量的属性

.height 属性: Float类型，等同于y .width 属性: Float类型，等同于x .isVector2 属性 : Boolean类型，判断是否为二维向量

二维向量的常用方法

.add ( v : Vector2 ) : 将传入的向量v和这个向量相加。 .addScalar ( s : Float ) : 将传入的标量s和这个向量的x值、y值相加。 .addScaledVector ( v : Vector2, s : Float ) : 将所传入的v与s相乘所得乘积和这个向量相加。 .addVectors ( a : Vector2, b : Vector2 ) : 将该向量设置为 a + b。 .angle () : Float 计算该向量相对于x轴正方向的弧度角度。 .applyMatrix3 ( m : Matrix3 ) : 将该向量乘以三阶矩阵m（第三个值隐式地为1） .ceil () : 向量中的x分量和y分量向上取整为最接近的整数值。 .clone () : Vector2 返回一个新的Vector2，其具有和当前这个向量相同的x和y。 .copy ( v : Vector2 ) : 将所传入Vector2的x和y属性复制给这一Vector2。 .distanceTo ( v : Vector2 ) : Float 计算该vector到传入的v的距离。 .equals ( v : Vector2 ) : Boolean 检查该向量和v的严格相等性。 .floor () : 向量中的x分量和y分量向下取整为最接近的整数值。 .length () : Float 计算从(0, 0)到(x, y)的直线长度。 .set ( x : Float, y : Float ) : 设置该向量的x和y分量。 .setLength ( l : Float ) : 将该向量的方向设置为和原向量相同，但是长度（length）为l。 .setScalar ( scalar : Float ) : 将该向量的x、y值同时设置为等于传入的scalar。 .setX ( x : Float ) : 将向量中的x值替换为x。 .setY ( y : Float ) : 将向量中的y值替换为y。 .sub ( v : Vector2 ) : 从该向量减去向量v。 .subScalar ( s : Float ) : 从该向量的x和y中减去标量s。 .subVectors ( a : Vector2, b : Vector2 ) : 将该向量设置为a - b。 .normalize () : 将该向量转换为单位向量（unit vector）， 也就是说，将该向量的方向设置为和原向量相同，但是其长度（length）为1，即归一化。

三维向量（Vector3）

一个三维向量表示的是一个有顺序的、三个为一组的数字组合（标记为x、y和z） 与二维向量类似，它也可以表示很多东西如 一个位于三维空间中的点。 一个在三维空间中的方向与长度的定义。在three.js中，长度总是从(0, 0, 0)到(x, y, z)的 Euclidean distance（欧几里德距离，即直线距离）， 方向也是从(0, 0, 0)到(x, y, z)的方向。 任意的、有顺序的、三个为一组的数字组合。 构造函数

Vector3( x : Float, y : Float, z : Float )
x - 向量的x值，默认为0。
y - 向量的y值，默认为0。
z - 向量的z值，默认为0。

创建一个三维向量

const b = new THREE.Vector3( );

创建一个三维向量并赋值

const a = new THREE.Vector3( 0, 1, 0 );

三维向量的属性和方法与二维向量类似，这里不在介绍，具体可参考官方文档

四维向量（Vector4）

一个四维向量表示的是一个有顺序的、四个为一组的数字组合（标记为x、y、z和w） 与上面的二维向量和三维向量类似，它也可以表示很多东西如 一个位于四维空间中的点。 一个在四维空间中的方向与长度的定义。在three.js中，长度总是从(0, 0, 0, 0)到(x, y, z, w)的 Euclidean distance（欧几里德距离，即直线距离）， 方向也是从(0, 0, 0, 0)到(x, y, z, w)的方向。 任意的、有顺序的、四个为一组的数字组合。 其他的一些事物也可以使用四维向量进行表示，但以上这些是它在three.js中的常用用途。 构造函数

Vector4( x : Float, y : Float, z : Float, w : Float )
x - 向量的x值，默认为0。
y - 向量的y值，默认为0。
z - 向量的z值，默认为0。
w - 向量的w值，默认为1。

创建一个四维向量

const b = new THREE.Vector4( );

创建一个四维向量并赋值

const a = new THREE.Vector4( 0, 1, 0, 0 ); 

四维向量的属性和方法与二维向量类似，这里不在介绍，具体可参考官方文档。 好了，今天就先说道这里吧，可能这一节比较枯燥，后面会结合向量写一个实例，喜欢的点赞关注收藏哦