ThreeBSP布尔运算

ThreeBSP.js下载

  three.js本身并没有提供用于几何体布尔运算的构造函数,需要借助一个库ThreeBSP.js实现。几何体的布尔运算可以借助数学中学习的差集、并集、交集概念去理解, 几何体之间的运算本质上就是两个顶点集合的运算,具体运算的算法可以查看计算几何学的理论内容,多数的三维软件基本都有布尔运算的相关命令, 尤其是机械类的三维建模软件,对于计算机辅助设计有兴趣的可以多研究。

两个几何体位置关系

ThreeBSP布尔运算

差集(相减)

ThreeBSP布尔运算_差集、相减

并集(组合、相加)

ThreeBSP布尔运算_并集(组合、相加)

交集(两几何体重合的部分)

ThreeBSP布尔运算_交集(两几何体重合的部分)

外圆内方铜钱

  绘制一个简易铜钱形状几何体很简单,绘制一个扁圆柱减去一个立方体就可以。

    /**
     * 创建网格模型
     */
    //几何体对象
    var cylinder = new THREE.CylinderGeometry(50,50,5,40);//圆柱
    var box = new THREE.BoxGeometry(40,5,40);//立方体
    //材质对象
    var material=new THREE.MeshPhongMaterial({color:0x0000ff});
    //网格模型对象
    var cylinderMesh=new THREE.Mesh(cylinder,material);//圆柱
    var boxMesh=new THREE.Mesh(box,material);//立方体
    //包装成ThreeBSP对象
    var cylinderBSP = new ThreeBSP(cylinderMesh);
    var boxBSP = new ThreeBSP(boxMesh);
    var result = cylinderBSP.subtract(boxBSP);
    //ThreeBSP对象转化为网格模型对象
    var mesh = result.toMesh();
    scene.add(mesh);//网格模型添加到场景中

  网格Mesh模型对象作为构造函数ThreeBSP()的参数,可以把three.js的普通Mesh模型包装为ThreeBSP对象,表示对应Mesh对象的ThreeBSP对象可以进行布尔运算 ,计算结果在执行toMesh()方法可以把ThreeBSP对象重新转化为Mesh对象。

布尔计算方法

方法 作用
intersrct 交集、重合的部分
union 并集、组合、相加
subtract 差集、相减