今天我们来认识下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)。 创建一个二维向量
代码语言:javascript复制const b = new THREE.Vector2( );
创建一个二维向量并赋值
代码语言:javascript复制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)的方向。 任意的、有顺序的、三个为一组的数字组合。 构造函数
代码语言:javascript复制Vector3( x : Float, y : Float, z : Float )
x - 向量的x值,默认为0。
y - 向量的y值,默认为0。
z - 向量的z值,默认为0。
创建一个三维向量
代码语言:javascript复制const b = new THREE.Vector3( );
创建一个三维向量并赋值
代码语言:javascript复制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中的常用用途。 构造函数
代码语言:javascript复制Vector4( x : Float, y : Float, z : Float, w : Float )
x - 向量的x值,默认为0。
y - 向量的y值,默认为0。
z - 向量的z值,默认为0。
w - 向量的w值,默认为1。
创建一个四维向量
代码语言:javascript复制const b = new THREE.Vector4( );
创建一个四维向量并赋值
代码语言:javascript复制const a = new THREE.Vector4( 0, 1, 0, 0 );
四维向量的属性和方法与二维向量类似,这里不在介绍,具体可参考官方文档。 好了,今天就先说道这里吧,可能这一节比较枯燥,后面会结合向量写一个实例,喜欢的点赞关注收藏哦