Three.js - 使用 ThreeBSP 对模型进行布尔运算

ThreeBSP.js 是 three.js 的一个扩展库，可以实现对模型的数学布尔运算，实际上就是个个点的重新组合和拆分，来重新生成 几何体对象和网格模型。
本实示例浏览地址:https://ithanmang.gitee.io/threejs/home/201806/20180626/01-threeBSPdemo.html

ThreeBSP构造函数

function ThreeBSP(treeIsh, matrix) {
   
  this.matrix = matrix;
  // 求两个几何体的重合部分
  this.intersect = __bind(this.intersect, this);
  // 两个几何体联合成的部分
  this.union = __bind(this.union, this);
  // 一个几何体中移除另一个几何的剩余部分
  this.subtract = __bind(this.subtract, this);
  // 将BSP对象转换成几何对象
  this.toGeometry = __bind(this.toGeometry, this);
  // 将BSP对象转换成网格模型
  this.toMesh = __bind(this.toMesh, this);
  // 将BSP对象
  this.toTree = __bind(this.toTree, this);
  if (this.matrix == null) {
   
    this.matrix = new THREE.Matrix4();
  }
  this.tree = this.toTree(treeIsh);
}

常用方法

方法	描述
intersect(交集)	使用这个方法可以从获取两个几何体的共同部分
union (并集)	使用这个方法、可以把两个几何体联合在一起
subtract (差集)	使用这个方法可以从一个几何体中移除另一个几何体与这个几何体的重复部分

示例

创建两个几何体

圆柱和立方体

// 创建几何体
var cylinderGeometry = new THREE.CylinderGeometry(100,100,20,100,20);
var boxGeometry = new THREE.BoxGeometry(100,100,100,50,50);

// 创建材质
var materials = new THREE.MeshNormalMaterial({
   wireframe:true});

// 创建Mesh
var cylinder = new THREE.Mesh(cylinderGeometry,materials);
var box = new THREE.Mesh(boxGeometry, materials);

并且这两个模型交织在一起

将这两个Mesh对象转换成 BSP 对象

• 引入 库文件
  <script src="../libs/extend/ThreeBSP.js"></script>
  下载地址:https://github.com/sshirokov/ThreeBSP
• 转换对象

// 将网格模型对象包装成可以进行buer运算的对象(BSP对象)
var cylinderBSP = new ThreeBSP(cylinder);
var boxBSP = new ThreeBSP(</