# three.js 数学方法之Vector3

## 2. Vector3的方法

### 3. setX( x: number ): Vector3;

```var vec1 = new THREE.Vector3(1,1,1);
var vec2 = new THREE.Vector3(1,2,3);
vec1.setX(2);//替换后返回新的Vector3，同时修改原Vector3```

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

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

### 8. clone(): this

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

### 9. copy( v: Vector3 ): this

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

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

```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

```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

```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

```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

```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

```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

```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

```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

```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

```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

```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

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

### 21. applyMatrix3( m: Matrix3 ): this

```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

```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

```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

```//three.js源码为
new THREE.Vector3().applyMatrix4( camera.matrixWorldInverse ).applyMatrix4( camera.projectionMatrix );```

### 25. unproject( camera: Camera ): this

```//three.js源码为
new THREE.Vector3().applyMatrix4( camera.projectionMatrixInverse ).applyMatrix4( camera.matrixWorld );```

### 26. transformDirection( m: Matrix4 ): this;

```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

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

### 29. min( v: Vector3 ): this

```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

```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的最大值。

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

min - 分量将被限制为的最小值

max - 分量将被限制为的最大值

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

### 42. manhattanLength(): number

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

### 45. setLength( l: number ): this

```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

```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

```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

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

### 50. projectOnVector( v: Vector3 ): this

```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 );```

### 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 );```

### 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 - np = np + res;

res = vec - 2 * np;

### 53. angleTo( v: Vector3 ): number

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

### 56. setFromSpherical( s: Spherical ): this

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

### 58. setFromCylindrical( s: Cylindrical ): this

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

### 60. setFromMatrixPosition( m: Matrix4 ): this

```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

```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

```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

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

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

```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[]

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

### 67. random(): this

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

0 条评论

• ### three.js 数学方法之Plane

今天郭先生就来继续说一说three.js数学方法中的plane（平面）。在三维空间中无限延伸的二维平面，平面方程用单位长度的法向量和常数表示。构造器为Plane...

• ### three.js 数学方法之Box3

郭先生今天说一说three.js的Box3方法（Box2是Box3的二维版本，可以参考Box3）。在线案例点击three.js Box3。

• ### three.js 制作一个三维的推箱子游戏

今天郭先生发现大家更喜欢看我发的three.js小作品，今天我就发一个3d版本推箱子的游戏，其实webGL有很多框架，three.js并不合适做游戏引擎，但是可...

• ### 3d弹弹球

上文和读者聊了聊三维世界中的坐标系问题，本文想通过一个弹弹球的案例，再来和读者聊一聊物体移动问题。

• ### Spring Security技术栈开发企业级认证与授权（十一）开发短信验证码登录

在前面一篇博客《Spring Security技术栈开发企业级认证与授权（九）开发图形验证码接口》中介绍了如何开发图形验证码接口，并将验证逻辑加入到Spring...

• ### 3d模型生成-使用深度网络 视频代码ppt论文

Learning a Probabilistic Latent Space of Object Shapes via 3D Generative-Adversa...

• ### 【填坑系列】一招解决Pycharm里安装包慢的问题，助你飞快10倍

Pycharm里封装了一个私有的环境包venv，这样每个项目都有自己的环境成为了可能。不过，我们都可能感觉到pycharm里安装包有些慢，有时实在太慢。

• ### MySQL和Oracle中的隐式转换（r6笔记第45天)

今天在处理一个问题的时候，需要根据其他部门提供的sql语句对一个表中的数据进行了筛查。 语句类似下面的形式 > SELECT MAX_LEVEL,LOGOUT_...

• ### Java开发GUI之CardLayout卡片布局

CardLayout布局允许进行多套界面的设计，通过切换界面来实现布局样式的改变。CardLayout类似与一叠卡片，默认最先添加的在前面，界面始终只展...