three.js 06-06 之 Binary Operations 几何体

2018-01-13 11:04:14来源:网络收集作者:纳米程序员人点击

分享

阿里云爆款

    本篇将要介绍的是在 three.js 中如何使用二元操作来自由组合物体。为此,我们需要引入一个 three.js 的扩展 ThreeBSP.js 库,你可以从网上找到这个库,譬如从 http://download.csdn.net/download/zhulx_sz/10202730 中下载,这个资源里面提供的这个
ThreeBSP.js 库,已经针对 three.js r8x 进行了小小的修复,包括一些警告信息都消除了,建议从这里下载。当然,你可以从官方下载,但必须自己来编译,这样才能引入到你的工程中使用,网址为 https://github.com/skalnik/threebsp。


    所谓的二元操作是指,将各种标准的几何体(如 THREE.BoxGeometry、THREE.SphereGeometry 等)组合在一起,并通过 subtract(相减)、intersect(相交)、union(联合)等运算操作后创建出一个新的几何体。下面我们给出这几种运算操作的大致定义:


操作
描述
intersect(相交)
此运算操作可以在两个几何体的交集上创建出新的几何体。两个几何体相互交叠的部分就是新的几何体subtract(相减)
此运算操作可以在第一个结合体中减去两个几何体交叠的部分,剩下的部分就是新的几何体union(联合)
此运算操作可以将两个几何体联合在一起,从而创建出新的几何体    为了便于理解以上这几种操作,我们先给出一个完整的示例,代码如下:



示例 06.08 - Binary Operations Geometry


    在这个示例中,我们首先添加了三个物体:一个立方体和两个球体。初始场景里中间那个 sphere1 球体,所有操作都会在这个对象上进行。它的右边是 sphere2 球体,左边是 cube 立方体。读者可以在 sphere2 及 cube 上指定四种操作中的一种,即:subtract、intersect、union 和 none(无操作)。这些操作都是基于 sphere1 的。

    其中的 showSpinner() 函数主要作用是在耗时的二元操作期间显示一个等待画面,以便向用户提示操作正在进行中。用到的一个 js 扩展库可以从这里下载 http://download.csdn.net/download/zhulx_sz/10202976


    其中最核心的部分是 showResult() 函数,在这个函数中,我们首先将各种待运算操作的网格对象包装成 ThreeBSP 对象,只有这样才能进行 subtract、intersect 和 union 操作。随后我们在操作结果对象 resultBSP 上调用 toMesh() 函数,并通过调用 computeFaceNormals() 和 computeVertexNormals() 函数以确保所有的法向量可以正确的计算出来。之所以要调用这两个函数,是因为在执行二元操作后,几何体中顶点和面的法向量可能会被改变,而
three.js 在着色时会用到面法向量和顶点法向量。所以显式调用这两个函数可以保证新生成的对象着色光滑、渲染正确,并能加入到场景 scene 中。


    特别地,这种 union 操作的方法并不是很好的,我们后面将会给出一种更好的 three.js 的合并方法。因为此处这种方法,你在旋转时会发现,中心还是在原来 sphere1 那个球上,而不在 union 后的新几何体的中心。其实另外两种操作也存在类似的问题。

未完待续···


最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台