Three.js向量Vector3

为了让大家深入了解Three.js的Math模块API，本节课对向量内容展开讲解。

Three.js向量相关API

• 二维向量Vector2
• 三维向量Vector3
• 四维向量Vector4

几维向量就有几个分量，二维向量Vector2有x和y两个分量，也就是Vector2对象具有x和y两个属性，三维向量Vector3有xyz三个分量，四维向量Vector4有xyzw四个分量。在Threejs中一些对象属性值会使用这些向量对象来表示，比如几何体Geometry的顶点UV坐标需要表示一个二维坐标，所以uv坐标使用Vector2对象表示；几何体Geometry的顶点位置坐标在在三维空间笛卡尔坐标系中中坐标需要xyz三个分量，所以顶点坐标使用Vector3对象表示;Three.js模型对象的缩放属性可以在xyz三个方向上进行缩放，也就是说有三个分量需要表达，自然使用Vector3对象。

控制台查看Threejs对象位置、缩放属性的值

var mesh = new THREE.Mesh()
mesh.position.set(100,20,330);//设置网格模型的位置
console.log('对象位置属性',mesh.position);
console.log('对象缩放属性',mesh.scale);

控制台查看几何体相关数据的表示方式

var geometry = new THREE.BoxGeometry(50,25,25);//立方体
console.log('几何体顶点位置坐标数据',geometry.vertices);
console.log('几何体三角形',geometry.faces);
console.log('几何体UV坐标',geometry.faceVertexUvs[0]);

创建向量对象

通过向量构造函数创建向量对象，查看向量对象的结构。

// 创建一个三维向量，xyz分量分别为3, 5, 4
var v1 = new THREE.Vector3(3, 5, 4)
console.log('向量x分量', v1.x);
// 重置向量的y分量
v1.y = 80;
// 重新设置三个分量
v1.set(2,4,8);

克隆.clone()和复制.copy()

对象执行克隆方法.clone()，返回一个新的对象，和原来对象属性的值一样。

var p1 = new THREE.Vector3(10,20,15);
var v1 = p1.clone();
console.log(`查看克隆的结果`,v1);

执行.copy()方法，向量p1三个分量xyz的值覆盖向量p2三个分量

var p1 = new THREE.Vector3(10,42,28);
var p2 = new THREE.Vector3();
p2.copy(p1);
console.log(`查看复制的结果`,p2);

向量和标量

如果你有一定的数学基础，肯定对向量和标量有一定的概念，比如说空间中一个点的位置是标量，两个点构成一个有方向的量是向量，在Three.js中，不一定要严格区分向量和标量的概念，THREE.Vector3对象既可以表示一个顶点位置，比如网格模型Mesh的位置坐标，也可以表示一个有方向的向量，比如顶点的法向量或光线的方向。虽然Vector字面意思是向量，但是THREE.Vector3对象表示的是向量还是标量，要看它的具体含义。

向量减法.sub()和向量长度.length()

通过.sub()方法可以对两个向量进行减法运算，比如两个表示顶点坐标的Vector3对象进行减法运算返回一个新的Vector3对象就是两个点构成的向量。

直接执行p1.sub(p2)会改变p1，所以先克隆然后再执行减法运算p1.clone().sub(p2)。

向量对象执行.length()方法会返回向量的长度。

已知直线两个顶点的坐标，计算直线的长度.

// 点1坐标
var p1 = new THREE.Vector3(10,8,12);
// 点2坐标
var p2 = new THREE.Vector3(20,30,-10);
// .clone()方法克隆p1，直接执行向量减法.sub()会改变p1向量本身
// .sub()：向量减法运算
// .length()：返回向量的长度
var L = p1.clone().sub(p2).length();
console.log('两点之间距离',L);

点乘.dot()

向量的.dot()方法用来计算两个向量的点积，计算光线和几何体顶点夹角，几何体体积等等都会用到该方法。

已知三角形三个顶点的坐标，计算其中一个顶点对应角度余弦值。

// 三角形的三个点坐标p1，p2，p3
var p1 = new THREE.Vector3(0,0,0);// 点1坐标
var p2 = new THREE.Vector3(20,0,0);// 点2坐标
var p3 = new THREE.Vector3(0,40,0);// 点3坐标

// p1，p2两个点确定一个向量
var v1 = p1.clone().sub(p2);
// p1，p3两个点确定一个向量
var v2 = p1.clone().sub(p3);
// .dot()计算两个向量点积    .length()计算向量长度
// 返回三角形顶点p1对应夹角余弦值
var CosineValue = v1.dot( v2 ) /(v1.length()*v2.length())
console.log('三角形两条边夹角余弦值',CosineValue);
// .acos()：反余弦函数，返回结果是弧度
console.log('三角形两条边夹角',Math.acos(CosineValue)*180/Math.PI);

叉乘.cross()

.crossVectors()和.cross()都是向量对象的叉乘计算方法，功能一样，只是使用的细节有些不同，向量对象叉乘的结果仍然是向量对象。

计算向量v1和v2的叉乘结果

// 声明一个向量对象，用来保存.crossVectors()方法结果
  var v3 = new THREE.Vector3();
  v3.crossVectors(v1,v2)

向量v2直接执行.cross()方法，叉乘的结果会覆盖向量v2的xyz分量

  v2.cross(v1)

克隆v2避免叉乘后改变原来的v2变量。

  var v3 = v2.clone();
  v3.cross(v1)

已知三角形的三个顶点p1, p2, p3的坐标值，利用三个顶点的坐标计算三角形的面积

//三角形面积计算
function AreaOfTriangle(p1, p2, p3){
  var v1 = new THREE.Vector3();
  var v2 = new THREE.Vector3();
  // 通过两个顶点坐标计算其中两条边构成的向量
  v1 = p1.clone().sub(p2);
  v2 = p1.clone().sub(p3);

  var v3 = new THREE.Vector3();
  // 三角形面积计算
  v3.crossVectors(v1,v2);
  var s = v3.length()/2;
  return s
}