three.js 幾何體-組合網格

這一篇郭先生就說說ThreeBSP（組合網格）的使用，先上圖，在線案例點擊原文鏈接查看

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

名稱	描述
intersect（相交）	使用該函數可以在兩個幾何體的交集上創建新的幾何體。兩個幾何體相互交疊的部分就是新的幾何體
union（聯合）	union函數可以將兩個幾何體聯合在一起創建出新的幾何體。
subtract（相減）	subtract與union函數相反。通過這個函數你可以在第一個幾何體中減去兩個幾何體交疊的部分，從而創建出新的幾何體

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分段數多的幾何體速度較慢建議轉換后保存模型。

 

轉載請注明地址：郭先生的博客