這一篇郭先生就說說ThreeBSP（組合網格）的使用，先上圖，線上案例點選ThreeBSP案例。

組合網格允許我們使用二元操作函式操作網格，但是提前需要引入threeBSP.js,它提供瞭如下三個函式。

1. 繪製所需網格

我們先繪製所需的幾何體

var material = new THREE.MeshPhongMaterial({color: 0x2C85E1, shininess: 60, specular: 0x2C85E1})

var cylinGeom1 = new THREE.CylinderGeometry(40, 40, 10, 50)
var cylinMesh1 = new THREE.Mesh(cylinGeom1, material); //最大的圓柱

var cylinGeom2 = new THREE.CylinderGeometry(28, 28, 14, 50)
var cylinMesh2 = new
 
 THREE.Mesh(cylinGeom2, material); //第二大的圓柱

var cylinGeom3 = new THREE.CylinderGeometry(20, 20, 22, 50)
var cylinMesh3 = new THREE.Mesh(cylinGeom3, material); //第三大的圓柱

var cylinGeom4 = new THREE.CylinderGeometry(10, 10, 24, 50)
var cylinMesh4 = new THREE.Mesh(cylinGeom4, material); //最小的圓柱

var pointsArr = [[5, -1, 33], [5, 11, 33], [-5, -1, 33], [-5, 11, 33], [20, -1, 66], [20, 11, 66], [-20, -1, 66], [-20, 11, 66]];
 
var points = pointsArr.map(d => new THREE.Vector3(d[0],d[1],d[2]));
var tixing = new ConvexGeometry(points);
var tixingMesh = new THREE.Mesh(tixing, material); //通過ConvexGeometry凸包繪製一個梯臺，當然也可以使用ExtrudeGeometry擠壓幾何體，
var meshArray = [];
for(var i=0; i<8; i++) {
    tixingMesh.rotation.y = Math.PI / 4 * i;
    meshArray[i] = tixingMesh.clone()
} //通過旋轉，得到各個方向的梯臺

現在我們得到了四個圓柱和若干梯臺，如下圖。

2. 構造BSP模型，使用二元操作函式

var cylinBSP1 = new ThreeBSP(cylinMesh1); // 由大到小四個網格的BSP模型
var cylinBSP2 = new ThreeBSP(cylinMesh2);
var cylinBSP3 = new ThreeBSP(cylinMesh3);
var cylinBSP4 = new ThreeBSP(cylinMesh4);
//前三個模型相加減去第四個模型得到新的BSP模型，允許鏈式呼叫
var resultBSP = cylinBSP1.union(cylinBSP2).union(cylinBSP3).subtract(cylinBSP4);
for(var i=0; i<8; i++) {
        //新的BSP模型分別減去各個方向的梯臺模型得到結果模型
    resultBSP = resultBSP.subtract( new ThreeBSP(meshArray[i]) );
}

這個結果模型物件並不是一個網格，但是他有很多方法，包括toGeometry、toMesh、toTree以及intersect、union、subtract方法，使用toMesh或者toGeometry即可得到我們所需的網格或者幾何體。
注意使用ThreeBSP.js操作segments分段數多的幾何體速度較慢建議轉換後儲存模型。

轉載請註明地址：郭先生的部落格