three.js 數學方法之Vector3

阿新 • • 發佈：2020-07-22

今天郭先生來說一說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。我仍然從它的屬性，方法說起。

1. Vector3的屬性

1. isVector3

用於測試這個類或者派生類是否為Vector3，預設為true。

2. Vector3的方法

1. set( x: number, y: number, z: number ): this

設定該向量的x、y 和 z 分量。很簡單，就不說了

2. setScalar( scalar: number ): this

將該向量的x、y和z值同時設定為等於傳入的scalar。也很簡單。

3. setX( x: number ): Vector3;

將向量中的x值替換為x。

var vec1 = new THREE.Vector3(1,1,1);
var vec2 = new THREE.Vector3(1,2,3);
vec1.setX(2);//替換後返回新的Vector3，同時修改原Vector3

4. setY( y: number ): Vector3

將向量中的y值替換為y。同上。

5. setZ( z: number ): Vector3

將向量中的z值替換為z。同上。

6. setComponent( index: number, value: number ): this

若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}

7. getComponent( index: number ): number

如果index值為0返回x值。如果index值為1返回y值。如果index值為2返回z值。就不多講。

8. clone(): this

返回一個新的Vector3，其具有和當前這個向量相同的x、y和z。

var vec1 = new THREE.Vector3(1,2,3); 
var vec2 = vec1.clone()

9. copy( v: Vector3 ): this

將所傳入Vector3的x、y和z屬性複製給這一Vector3。

var vec1 = new THREE.Vector3(1,2,3); 
var vec2 = new THREE.Vector3().copy(vec1);

10. add( v: Vector3, w?: Vector3 ): this

將傳入的向量v和這個向量相加。

var vec1 = new THREE.Vector3(1,1,1); 
var vec2 = new THREE.Vector3(1,2,3); 
vec1.add(vec2);//返回Vector3 {x: 2, y: 3, z: 4}

11. addScalar( s: number ): this

將傳入的標量s和這個向量的x值、y值以及z值相加

var vec1 = new THREE.Vector3(1,2,3); 
var vec2 = vec1.addScalar(1);//返回Vector3 {x: 2, y: 3, z: 4}

12. addScaledVector( v: Vector3, s: number ): this

將所傳入的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}

13. addVectors( a: Vector3, b: Vector3 ): this

將該向量設定為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}

14. sub( a: Vector3 ): this

從該向量減去向量v。

var vec1 = new THREE.Vector3(1,2,3); 
var vec2 = new THREE.Vector3(2,3,4); 
vec2.sub(vec1);//Vector3 {x: 1, y: 1, z: 1}

14. subScalar( s: number ): this

從該向量的x、y和z中減去標量s。

var vec1 = new THREE.Vector3(1,2,3); 
var vec2 = new THREE.Vector3(2,3,4); 
var vec3 = vec2.subScalar(1);//返回Vector3 {x: 1, y: 2, z: 3}

15. subVectors( a: Vector3, b: Vector3 ): this

將該向量設定為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}

16. multiply( v: Vector3 ): this

將該向量與所傳入的向量v進行相乘。

var vec1 = new THREE.Vector3(1,2,3); 
var vec2 = new THREE.Vector3(2,3,4); 
vec1.multiply(vec2);//返回Vector3 {x: 2, y: 6, z: 12}

17. multiplyScalar( s: number ): this

將該向量與所傳入的標量s進行相乘。

var vec1 = new THREE.Vector3(1,2,3); 
vec1.multiplyScalar(2);//返回Vector3 {x: 2, y: 4, z: 6}

18. multiplyVectors( a: Vector3, b: Vector3 ): this

按照分量順序，將該向量設定為和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}

19. applyEuler( euler: Euler ): this

通過將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}

20. applyAxisAngle( axis: Vector3, angle: number ): this

將軸和角度所指定的旋轉應用到該向量上。同樣是將旋轉應用到Vector3上。

var vec1 = new THREE.Vector3(1,0,0); 
vec1.applyAxisAngle(new THREE.Vector3(0,0,1), Math.PI/4);//效果同上

21. applyMatrix3( m: Matrix3 ): this

將該向量乘以三階矩陣m。

var vec1 = new THREE.Vector3(1,0,0); 
var matrix = new THREE.Matrix3().setFromMatrix4(new THREE.Matrix4().makeRotationZ(-Math.PI/6)); 
vec1.applyMatrix3(matrix)//返回Vector3 {x: 0.8660254037844387, y: -0.49999999999999994, z: 0}

22. applyMatrix4( m: Matrix4 ): this

將該向量乘以四階矩陣m（第四個維度隱式地為1）

var vec1 = new THREE.Vector3(1,0,0); 
var matrix = new THREE.Matrix4().makeRotationZ(-Math.PI/6);
vec1.applyMatrix4(matrix);//返回值和上面相同

23. applyQuaternion( q: Quaternion ): this

將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}

24. project( camera: Camera ): this

使用所傳入的攝像機來投影（projects）該向量。

//three.js原始碼為 
new THREE.Vector3().applyMatrix4( camera.matrixWorldInverse ).applyMatrix4( camera.projectionMatrix );

25. unproject( camera: Camera ): this

使用所傳入的攝像機來反投影（projects）該向量。

//three.js原始碼為 
new THREE.Vector3().applyMatrix4( camera.projectionMatrixInverse ).applyMatrix4( camera.matrixWorld );

26. transformDirection( m: Matrix4 ): this;

通過傳入的矩陣（m的左上角3 x 3子矩陣）變換向量的方向，並將結果進行normalizes（歸一化）。

var vec1 = new THREE.Vector3(1,1,0); 
var matrix = new THREE.Matrix4().makeRotationZ(Math.PI/4); 
vec1.transformDirection(matrix)//返回Vector3(0,1,0);

27. divide( v: Vector3 ): this

將該向量除以向量v。

var vec1 = new THREE.Vector3(2,3,4); 
var vec2 = new THREE.Vector3(3,4,5); 
vec1.divide(vec2)//向量相除就是將各個維度相除，返回Vector3 {x: 0.6666666666666666, y: 0.75, z: 0.8}

28. divideScalar( s: number ): this

將該向量除以標量s。如果傳入的s = 0，則向量將被設定為( 0, 0, 0 )各個維度除以s，不多說

29. min( v: Vector3 ): this

如果該向量的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}

30. max( v: Vector3 ): this

如果該向量的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}

31. clamp( min: Vector3, max: Vector3 ): this

min - 在限制範圍內，x值、y值和z的最小值。
max - 在限制範圍內，x值、y值和z的最大值。
如果該向量的x值、y值或z值大於限制範圍內最大x值、y值或z值，則該值將會被所對應的值取代。
如果該向量的x值、y值或z值小於限制範圍內最小x值、y值或z值，則該值將會被所對應的值取代。
其實就是將值限制在最大值和最小值之間，這裡不多說

32. clampScalar( min: number, max: number ): this

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}

33. clampLength( min: number, max: number ): this

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}

34. floor(): this

向量的分量向下取整為最接近的整數值。各個維度都向下取整，拿上一個返回值來說

var vec1 = new THREE.Vector3(1,3,5); 
vec1.clampLength(10, 20).floor();//返回Vector3 {x: 1, y: 5, z: 8}

35. ceil(): this

將該向量x分量、 y分量以及z分量向上取整為最接近的整數。不多說。

36. round(): this

向量中的分量四捨五入取整為最接近的整數值。也不多說。

37. roundToZero(): this

向量中的分量朝向0取整數（若分量為負數則向上取整，若為正數則向下取整）。也不多。

38. negate(): this

向量取反，即： x = -x, y = -y , z = -z。很容易理解。

39. dot( v: Vector3 ): number

計算該vector和所傳入v的點積（dot product）。對應維度相乘然後求和，請回歸高數課本。

40. lengthSq(): number

計算從(0, 0, 0)到(x, y, z)的歐幾里得長度（Euclidean length，即直線長度）的平方。如果你正在比較向量的長度，應當比較的是長度的平方，因為它的計算效率更高一些。（畢竟少運算一步）。

41. length(): number

計算從(0, 0, 0) 到 (x, y, z)的歐幾里得長度（Euclidean length，即直線長度）

42. manhattanLength(): number

計算該向量的曼哈頓長度（Manhattan length）。這個長度就是各個維度長度絕對值的和。

var vec1 = new THREE.Vector3(-1,1,2); 
vec1.manhattanLength();//返回4

43. manhattanDistanceTo( v: Vector3 ): number

計算該向量到所傳入的v之間的曼哈頓距離（Manhattan distance）。就是兩個向量各個維度最差，然後各個維度結果長度絕對值的和。

44. normalize(): this

將該向量轉換為單位向量（unit vector），也就是說，將該向量的方向設定為和原向量相同，但是其長度（length）為1。就是將向量歸一化。

45. setLength( l: number ): this

將該向量的方向設定為和原向量相同，但是長度（length）為l。

var vec1 = new THREE.Vector3(1,1,0); 
vec1.setLength(14.14);//返回Vector3 {x: 9.998489885977781, y: 9.998489885977781, z: 0}

46. lerp( v: Vector3, alpha: number ): this

在該向量與傳入的向量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}

47. lerpVectors( v1: Vector3, v2: Vector3, alpha: number ): this

將此向量設定為在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);//結果同上

48. cross( a: Vector3, w?: Vector3 ): this

將該向量設定為它本身與傳入的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}

49. crossVectors( a: Vector3, b: Vector3 ): this

將該向量設定為傳入的a與b的叉積（cross product）。和上面知識形式上不一樣而已。

50. projectOnVector( v: Vector3 ): this

投影（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是標量。

51 projectOnPlane( planeNormal: Vector3 ): this

將此向量投影到一個平面上，通過減去從這個向量投影得到平面法線上的向量。

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一份）。

52. reflect( vector: Vector3 ): this

基於給定平面法線的反射線向量。法線具有單位長度。

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;
就像原始碼一樣

53. angleTo( v: Vector3 ): number

以弧度返回該向量與向量v之間的角度。

var vec1 = new THREE.Vector3(1,1,0); 
var vec2 = new THREE.Vector3(0,1,0); 
vec1.angleTo(vec2);//返回0.7853981633974484正好是Math.PI/4的值

54. distanceTo( v: Vector3 ): number

計算該向量到所傳入的v間的距離。向量平方和再開方就好，不多說。

55. distanceToSquared( v: Vector3 ): number

計算該向量到傳入的v的平方距離。如果你只是將該距離和另一個距離進行比較，則應當比較的是距離的平方，因為它的計算效率會更高一些。不多說。

56. setFromSpherical( s: Spherical ): this

從球座標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}

57. setFromSphericalCoords( r: number, phi: number, theta:number ): this

從球座標中的radius、phi和theta設定該向量。和上面的方法很像，在沒有現成的球座標時，更方便。

58. setFromCylindrical( s: Cylindrical ): this

從圓柱座標中的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}

59. setFromCylindricalCoords( radius: number, theta: number, y: number ): this

從圓柱座標中的radius、theta和y設定該向量。在沒有現成的圓柱座標時，更方便。

60. setFromMatrixPosition( m: Matrix4 ): this

從變換矩陣（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}

61. setFromMatrixScale( m: Matrix4 ): this

從變換矩陣（transformation matrix）m中，設定該向量為其中與縮放相關的元素。

var vec1 = new THREE.Vector3(); 
var matrix = new THREE.Matrix4().makeScale(1,2,3); 
vec1.setFromMatrixScale(matrix);//返回Vector3 {x: 1, y: 2, z: 3}

62. setFromMatrixColumn( matrix: Matrix4, index: number ): this

從傳入的四階矩陣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}，因為是第三列

63. setFromMatrix3Column( matrix: Matrix3, index: number ): this

從傳入的三階矩陣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}

64. equals( v: Vector3 ): boolean

檢查該向量和v的嚴格相等性。不必多說。

65. fromArray( array: number[], offset?: number ): this

設定向量中的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}

66. toArray( array?: number[], offset?: number ): number[]

返回一個數組[x, y ,z]，或者將x、y和z複製到所傳入的array中。

var vec1 = new THREE.Vector3(1,1,2); 
vec1.toArray();//返回)[1, 1, 2]

67. random(): this

對向量的各個維度賦隨機值[0,1];

var vec1 = new THREE.Vector3(); 
vec1.random()//Vector3 {x: 0.7630145272644331, y: 0.10239339520268054, z: 0.3732101353384689}

嗯，Vector3方方面面的確實挺多，大家還是要多應用。

轉載請註明地址：郭先生的部落格