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