three.js 几何体-组合网格

Posted 郭先生的博客

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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分段数多的几何体速度较慢建议转换后保存模型。

 

转载请注明地址:郭先生的博客

以上是关于three.js 几何体-组合网格的主要内容,如果未能解决你的问题,请参考以下文章

Three.js - 变形几何和细化三角形网格

渲染后将几何图形添加到 three.js 网格

如何使用 three.js r71 合并两个几何图形或网格?

Three.js建模基础

使用Three.js的材质

使用Three.js的材质