three.js-binary operator

Three.js学习笔记 本篇使用three.js的扩展库THREEBSP来操做标准的几何体来创造出新的几何体。
learn more from https://github.com/skalnik/ThreeBSP

ThreeBSP

因为three.js提供的标准几何体有限，自定义几何体的构造比较麻烦。因此咱们也许能够使用three.js的扩展库ThreeBSP来构造几何体。
Three.js提供了三种函数：intersect（相交） 、union（联合） 和 substract（相减）

• 相交函数能够将几个几何体联合起来造成新的几何体。

• 联合函数能够基于两个几何体的交集建立出新的几何体，即两个几何体的重叠部分。

• 相减函数和联合函数正好相反能够在第一个几何体的基础上减去两个几何体的重叠部分。

how to use

ThreeBSP库是使用coffee-script写的,因此须要添加coffee-script文件在运行时编译。或是使用编译好的JavaScript文件。

• 添加coffee-script

<script type="text/javascript" src="js/Three/coffee-script.js"></script>  
    <script type="text/javascript" src="js/Three/ThreeBSP.coffee"></script>

• 使用编译好的JavaScript文件

<script type="text/javascript" src="js/Three/ThreeBSP.js"></script>

//实例化两个须要进行操做的物体 （cube1,cube2为两个cube）
    var BSP1 = new ThreeBSP(cube1);
    var BSP2 = new ThreeBSP(cube2);
    
    //将两个物体相交操做，操做完的`resultBSP`为一个`ThreeBSP`对象
    var resultBSP = BSP1.subtract(BSP2);
    
    //能够使用`ThreeBSP`的`toMesh()`方法将`ThreeBSP`转为一个`Mesh`对象
    var result = resultBSP.toMesh();
    
    //使用`geometry`的computeFaceNormals()和computeVertexNormals()来确保生成的`Mesh`对象的全部面和顶点的法向量能够正确计算
    result.geometry.computeFaceNormals();
    
    result.geometry.computeVertexNormals();
    scene.add(result);

other way

three.js也是提供了将几何体组合和合并的方法相似于union（联合）函数。

• 对象组合

你能够经过新建一个THREE.Object3D对象，而后经过push()方法将想要组合的对象放入这个container 中。
而后你能够经过控制这个THREE.Object3D对象，而后来控制组合了的全部对象（避免了单独操做的尴尬）。

var container =new THREE.Object3D();
    
    container.push(cube);
    
    container.push(sphere);

---

• source code obj