今天郭先生来说一说three.js的Vector3,该类表示的是一个三维向量(3D vector)。 一个三维向量表示的是一个有顺序的、三个为一组的数字组合(标记为x、y和z),可被用来表示很多事物,它的构造函数为Vector3( x : Float, y : Float, z : Float )x - 向量的x值,默认为0。y - 向量的y值,默认为0。z - 向量的z值,默认为0。创建一个新的Vector3。我仍然从它的属性,方法说起。
若index为 0 则设置 x 值为 value。若index为 1 则设置 y 值为 value。若index为 2 则设置 z 值为 value。
var vec1 = new THREE.Vector3(1,1,1);
var vec2 = new THREE.Vector3(1,2,3);
vec1.setComponent(0, 2);//返回Vector3 {x: 2, y: 1, z: 1}
将所传入的v与s相乘所得的乘积和这个向量相加。
var vec1 = new THREE.Vector3(1,0,0);
var vec2 = new THREE.Vector3(0,1,0);
var vec3 = vec1.addScaledVector(vec2, 3);//返回Vector3 {x: 1, y: 3, z: 0}
将该向量设置为a + b。
var vec1 = new THREE.Vector3(1,2,3);
var vec2 = new THREE.Vector3(2,3,4);
new THREE.Vector3().addVectors(vec1, vec2);//返回Vector3 {x: 3, y: 5, z: 7}
将该向量设置为a - b。
var vec1 = new THREE.Vector3(1,2,3);
var vec2 = new THREE.Vector3(2,3,4);
new THREE.Vector3().subVectors(vec2, vec1);//返回Vector3 {x: 1, y: 1, z: 1}
按照分量顺序,将该向量设置为和a * b相等。
var vec1 = new THREE.Vector3(1,2,3);
var vec2 = new THREE.Vector3(2,3,4);
new THREE.Vector3().multiplyVectors(vec1, vec2);//返回Vector3 {x: 2, y: 6, z: 12}
通过将Euler(欧拉)对象转换为Quaternion(四元数)并应用, 将欧拉变换应用到这一向量上。
var vec1 = new THREE.Vector3(1,0,0);
var euler = new THREE.Euler(0,0,Math.PI/4);
vec1.applyEuler(euler);//返回Vector3 {x: 0.7071067811865475, y: 0.7071067811865476, z: 0}
将轴和角度所指定的旋转应用到该向量上。同样是将旋转应用到Vector3上。
var vec1 = new THREE.Vector3(1,0,0);
vec1.applyAxisAngle(new THREE.Vector3(0,0,1), Math.PI/4);//效果同上
将Quaternion变换应用到该向量。
var vec1 = new THREE.Vector3(1,0,0);
var quaternion = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0,0,1), Math.PI/2)
vec1.applyQuaternion(quaternion);//返回Vector3 {x: 0, y: 1, z: 0}
如果该向量的x值、y值或z值大于所传入v的x值、y值或z值, 则将该值替换为对应的最小值。
var vec1 = new THREE.Vector3(2,3,4);
var vec2 = new THREE.Vector3(1,2,5);
vec1.min(vec2)//返回各个维度的最小值Vector3 {x: 1, y: 2, z: 4}
如果该向量的x值、y值或z值小于所传入v的x值、y值或z值, 则将该值替换为对应的最大值。
var vec1 = new THREE.Vector3(2,3,4);
var vec2 = new THREE.Vector3(1,2,5);
vec1.max(vec2)//返回各个维度的最大值Vector3 {x: 2, y: 3, z: 5}
min - 分量将被限制为的最小值
max - 分量将被限制为的最大值
如果该向量的x值、y值或z值大于最大值,则它们将被最大值所取代。
如果该向量的x值、y值或z值小于最小值,则它们将被最小值所取代。
也就是将各个维度限定到最大值和最小值之间
var vec1 = new THREE.Vector3(1,3,5);
vec1.clampScalar(2, 4);//返回Vector3 {x: 2, y: 3, z: 4}
min - 长度将被限制为的最小值
max - 长度将被限制为的最大值
如果向量长度大于最大值,则它将会被最大值所取代。
如果向量长度小于最小值,则它将会被最小值所取代。
这个是对长度的限制。
var vec1 = new THREE.Vector3(1,3,5);
vec1.clampLength(10, 20);//vec1的长度明显不到10,所以长度会被拉长到最小值10,返回Vector3 {x: 1.690308509457033, y: 5.0709255283711, z: 8.451542547285165}
向量的分量向下取整为最接近的整数值。各个维度都向下取整,拿上一个返回值来说
var vec1 = new THREE.Vector3(1,3,5);
vec1.clampLength(10, 20).floor();//返回Vector3 {x: 1, y: 5, z: 8}
在该向量与传入的向量v之间的线性插值,alpha是沿着线的距离长度。 —— alpha = 0 时表示的是当前向量,alpha = 1 时表示的是所传入的向量v。这个就比较有意思了。
var vec1 = new THREE.Vector3(1,0,0);
var vec2 = new THREE.Vector3(0,1,0);
vec1.lerp(vec2, 0);//返回Vector3 {x: 1, y: 0, z: 0}
vec1.lerp(vec2, 0.5);//返回Vector3 {x: 0.5, y: 0.5, z: 0}
vec1.lerp(vec2, 1);//返回Vector3 {x: 0, y: 1, z: 0}
将此向量设置为在v1和v2之间进行线性插值的向量, 其中alpha为两个向量之间连线的距离长度。 —— alpha = 0 时表示的是v1,alpha = 1 时表示的是v2。
var vec1 = new THREE.Vector3(1,0,0);
var vec2 = new THREE.Vector3(0,1,0);
new THREE.Vector3().lerpVectors(vec1, vec2, 0);
new THREE.Vector3().lerpVectors(vec1, vec2, 0.5);
new THREE.Vector3().lerpVectors(vec1, vec2, 1);//结果同上
将该向量设置为它本身与传入的v的叉积(cross product),请回归高数课本
var vec1 = new THREE.Vector3(1,0,0);
var vec2 = new THREE.Vector3(0,2,0);
vec1.cross(vec2)//返回Vector3 {x: 0, y: 0, z: 2}
投影(Projects)该向量到另一个向量上。就是向量在向量上的投影。
var vec1 = new THREE.Vector3(2,3,0);
var vec2 = new THREE.Vector3(1,0,0);
vec1.projectOnVector(vec2);//返回Vector3 {x: 2, y: 0, z: 0}
//three.js 源代码
var denominator = v.lengthSq();
if ( denominator === 0 ) return this.set( 0, 0, 0 );
var scalar = v.dot( this ) / denominator;
return this.copy( v ).multiplyScalar( scalar );
这里解释一下源代码,如下图。
最后的结果就是vec1.copy(vec2).multiplyScalar(scalar),注意这个scalar是标量。
将此向量投影到一个平面上,通过减去从这个向量投影得到平面法线上的向量。
var vec = new THREE.Vector3(2,2,2);
vec.projectOnPlane(new THREE.Vector3(2,0,2))//返回Vector3 {x: 0, y: 2, z: 0}
//下面是three.js源码
_vector.copy( this ).projectOnVector( planeNormal );
return this.sub( _vector );
通过源码,很容易看出,先projectOnVector得到投影,再用这个向量减去投影,得到平面法向量。(因为projectOnVector会改变原始向量,所以先copy一份)。
基于给定平面法线的反射线向量。法线具有单位长度。
var vec = new THREE.Vector3(1,1,0);
var res = vec.reflect(new THREE.Vector3(0,1,0));/返回Vector3 {x: 1, y: -1, z: 0}
//three.js 源码
this.sub( _vector.copy( normal ).multiplyScalar( 2 * this.dot( normal ) ) );
其实很简单,我们的入射向量为vec,反射向量设置为res,法向量设置成n,入射向量向法向量的透明为np,于是有
vec - np = np + res;
res = vec - 2 * np;
就像源码一样
从球坐标s中设置该向量。球坐标系(r,θ,baiφ)与直角坐标系(x,y,z)的转换关系du:x=rsinθcosφ;y=rsinθsinφ;z=rcosθ。
var vec1 = new THREE.Vector3();
var spherical = new THREE.Spherical(4, Math.PI/4, Math.PI/4);
vec1.setFromSpherical(spherical);//返回Vector3 {x: 1.9999999999999996, y: 2.8284271247461903, z: 2}
从圆柱坐标中的radius、theta和y设置该向量。
var vec1 = new THREE.Vector3(1,1,0);
var cylindrical = new THREE.Cylindrical (4, Math.PI/4, 4);
vec1.setFromCylindrical(cylindrical)//返回Vector3 {x: 2.82842712474619, y: 4, z: 2.8284271247461903}
从变换矩阵(transformation matrix)m中, 设置该向量为其中与位置相关的元素。
var vec1 = new THREE.Vector3();
var matrix = new THREE.Matrix4().makeTranslation(1,2,3);
vec1.setFromMatrixPosition(matrix);//返回Vector3 {x: 1, y: 2, z: 3}
从传入的四阶矩阵matrix由index指定的列中, 设置该向量的x值、y值和z值。
var vec1 = new THREE.Vector3();
var matrix = new THREE.Matrix4().set( 1,2,3,4, 2,3,4,5, 3,4,5,6, 4,5,6,7 );
vec1.setFromMatrixColumn(matrix, 2);//返回Vector3 {x: 3, y: 4, z: 5},因为是第三列
从传入的三阶矩阵matrix由index指定的列中, 设置该向量的x值、y值和z值。
var vec1 = new THREE.Vector3();
var matrix = new THREE.Matrix3().set( 1,2,3, 2,3,4, 3,4,5, )
vec1.setFromMatrixColumn(matrix, 2);//返回Vector3 {x: 3, y: 4, z: 5}
设置向量中的x值为array[ offset + 0 ],y值为array[ offset + 1 ], z值为array[ offset + 2 ]。
var vec1 = new THREE.Vector3();
var array = [0,1,2,3,4,5,6,7];
vec1.fromArray(array, 0);//返回Vector3 {x: 0, y: 1, z: 2} vec1.fromArray(array, 2);//返回Vector3 {x: 2, y: 3, z: 4}
返回一个数组[x, y ,z],或者将x、y和z复制到所传入的array中。
var vec1 = new THREE.Vector3(1,1,2);
vec1.toArray();//返回)[1, 1, 2]