Three.js 几何计算 Line3、Triangle、Ray、Plane

Question

Threejs 封装了一些和几何计算相关的 API，比如线段 Line3、三角形 Triangle、射线 Ray、平面 Plane。

线段 Line3

通过起始点定义一条线段。

// 创建一个线段对象Line3
var line3 = new THREE.Line3();
// 线段起点坐标
line3.start = new THREE.Vector3(0, 0, 0);
// 线段终点坐标
line3.end = new THREE.Vector3(10, 10, 10);

计算线段中点，或者说计算两点的中点

// 创建一个三维向量对象表示线段中点
var center = new THREE.Vector3();
// 执行getCenter方法计算线段中点，结果保存到参数
line3.getCenter(center)
console.log('查看线段中点', center);

计算线段的距离，或者说计算两点之间的距离

// 计算线段长度
var L = line3.distance();
console.log('查看线段距离', L);
// 计算线段长度平方
var L2 = line3.distanceSq();
console.log('查看线段距离平方', L2);

可以通过向量对象Vector3的.distanceTo()方法计算两点之间距离

// 线段起点坐标
var p1 = new THREE.Vector3(0, 0, 0);
// 线段终点坐标
var p2 = new THREE.Vector3(10, 10, 10);
// Vector3的方法distanceTo()计算两点之间距离
var length = p1.distanceTo(p2)
console.log('两点之间距离', length);

射线 Ray

// 创建射线对象Ray
var ray = new THREE.Ray()
// 设置射线起点
ray.origin = new THREE.Vector3(1,0,3);
// 设置射线方向
ray.direction = new THREE.Vector3(1,1,1).normalize();

通过射线Ray的.intersectTriangle()方法判断射线和一个三角形区域是否相交,如果相交返回交点坐标，不相交返回null。

// 三角形三个点坐标
var p1 = new THREE.Vector3(20, 0, 0);
var p2 = new THREE.Vector3(0, 0, 10);
var p3 = new THREE.Vector3(0, 30, 0);
// 相交返回交点，不相交返回null
var result = ray.intersectTriangle(p1,p2,p3)
console.log('查看是否相交', result);

通过射线Ray的.intersectsBox(Box3)方法判断射线和一个包围盒Box3是否相交，通过射线Ray的.intersectsSphere(Sphere)方法判断射线和一个包围球Sphere是否相交...

三角形 Triangle

// 创建一个三角形对象
var Triangle = new THREE.Triangle()
// 三角形顶点1
Triangle.a = new THREE.Vector3(20, 0, 0);
// 三角形顶点2
Triangle.b = new THREE.Vector3(0, 0, 10);
// 三角形顶点3
Triangle.c = new THREE.Vector3(0, 30, 0);

通过三角形对象Triangle的.getArea()方法可以计算一个三角形区域的面积，如果你想计算一个网格模型的表面，就可以遍历网格模型对应几何体所有的三角形区域计算面积然后累加。

// .getArea()方法返回三角形面积
var S = Triangle.getArea();
console.log('三角形面积', S);

通过三角形对象Triangle的.getMidpoint()方法计算三角形重心，封装的算法就是三个顶点坐标的算术平均值。

var Midpoint = new THREE.Vector3();
// 计算三角形重心，结果保存在参数Midpoint
Triangle.getMidpoint(Midpoint);
console.log('三角形重心', Midpoint);

通过三角形对象Triangle的.getNormal()方法计算三角形法线方向，封装的算法简单说就是两条边构成的向量叉乘后获得垂直三角形面的向量。

var normal = new THREE.Vector3();
// 计算三角形法线方向，结果保存在参数normal
Triangle.getNormal(normal);
console.log('三角形法线', normal);

平面 Plane

通过平面法线方向.normal和平面到坐标原点距离.constant来定义一个平面对象Plane

// 创建一个平面对象Plane
var plane = new THREE.Plane();
// 设置平面法线方向
plane.normal = new THREE.Vector3(0, 1, 0);
// 坐标原点到平面的距离，区分正负
plane.constant = 30;

执行平面对象方法 .setFromCoplanarPoints(a,b,c) 通过三个顶点坐标来设置一个平面对象Plane，三个点按照逆时针顺序来确定平面对象的法向量normal方向。

// 创建一个平面对象Plane
var plane = new THREE.Plane();
// 三个点坐标
var p1 = new THREE.Vector3(20, 0, 0);
var p2 = new THREE.Vector3(0, 0, 10);
var p3 = new THREE.Vector3(0, 30, 0);
// 通过三个点定义一个平面
plane.setFromCoplanarPoints(p1,p2,p3);
console.log('plane.normal', plane.normal);
console.log('plane.constant', plane.constant);

通过平面对象的 .distanceToPoint(point) 方法计算点到平面的垂线距离。

var point = new THREE.Vector3(20, 100, 330);
// 计算空间中一点到平面的垂直距离
var L = plane.distanceToPoint(point);
console.log('点到平面距离', L);