Three.js 向量 Vector3

Question

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

几维向量就有几个分量，二维向量 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
}