专栏首页郭先生的博客three.js 几何体-组合网格

three.js 几何体-组合网格

这一篇郭先生就说说ThreeBSP(组合网格)的使用,先上图,在线案例点击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分段数多的几何体速度较慢建议转换后保存模型。

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • three.js 数学方法之Vector3

    今天郭先生来说一说three.js的Vector3,该类表示的是一个三维向量(3D vector)。 一个三维向量表示的是一个有顺序的、三个为一组的数字组合(标...

    郭先生的博客
  • three.js 对象绕任意轴旋转--模拟门转动

    今天郭先生说说对象如何绕任意轴旋转。说一说其中一种方法,也是比较容易理解的一种,它的原理就是将子对象放到一个盒子中,然后改变子对象相对于父对象的位置(因为子对象...

    郭先生的博客
  • three.js之初探骨骼动画

    今后的几篇郭先生主要说说three.js骨骼动画。three.js骨骼动画十分有意思,但是对于初学者来说,学起来要稍微困难一些,官方文档比较少,网上除了用圆柱体...

    郭先生的博客
  • 4.爬虫框架Clawler 爬取优酷电影名 分页+多线程

    基于文章三我们实现了爬虫框架单页面应用程序的代码,那么在这一章节我们将使用框架进行内容分页和多线程的操作

    小狐狸
  • 认识一下 Java 11

    可能很多人现在 Java8 的新特性还没用熟呢,Java 11 就已经来了,下面一起来看下 Java 11 的几个新特性:

    dys
  • Java11震撼发布了,我们该怎么办?

    Java11已经发布了,我们今天聊聊大家还停留在哪个版本呢?大家对于新版本的迅速的发布有什么想说的呢?

    好好学java
  • SEO的html劫持和html劫持代码

    这段时间有个人问我SEO的html劫持是怎么做的,代码又是什么样子的,然后就有了这篇文章。大家可以看看,学习一下。

    开心分享
  • 用 Function.apply() 的参数数组化来提高 JavaScript程序性能

    deepcc
  • 《JavaScript程序设计》第2课:JS类型系统

    JS类型系统可以分为标准类型和对象类型,进一步标准类型又可以分为原始类型和引用类型,而对象类型又可以分为内置对象类型、普通对象类型、自定义对象类型。 ? 1. ...

    陈树义
  • java10系列(二)Local-Variable Type Inference

    本文主要解读下java10的Local-Variable Type Inference

    codecraft

扫码关注云+社区

领取腾讯云代金券