Three.js（四）ThreeBSP的使用

基礎

demo基於上一篇博文的basic.js配置，所以需要先引入上一篇文章的文件:通過簡單使用光源提供一個基礎封裝類

介紹（ThreeBSP）

名稱	描述
intersect（交集）	使用該函數可以基於兩個現有幾何體的重合的部分定義此幾何體的形狀。
union（並集）	使用該函數可以將兩個幾何體聯合起來創建出一個新的幾何體。
subtract（差集）	使用該函數可以在第一個幾何體中移除兩個幾何體重疊的部分來創建新的幾何體。

使用

html文件

<style>
    body {
        margin: 0;
    }
    canvas {
        width: 100%;
        height: 100%
    }
</style>
<div id="room" style="position: absolute; left: 0px; top: 0px"></div>
<script src="./build/three.min.js"></script>
<script src="./build/OrbitControls.js"></script>
<script src="./build/stats.min.js"></script>
<script src="./build/ThreeBSP.js"></script>
<script src="./js/basic.js"></script>

初期效果

class bsp extends basicThree {
    constructor(props) {
        super(props) 
        this.initBsp()
    }
    initBsp() {
        //添加網格輔助
        this.gridHelper()
        //設置攝像頭      
        this.setCamera()
        //創建兩個幾何體
        var cube1 = this.createMesh(3, 3, 2.8, '#EE11EE', 1, 3, 0);
        var cube2 = this.createMesh(3, 6, 3, '#58ACFA', 0, 3, 0);
        //添加對比
        this.addCompared()
    }
    setCamera() { //c重新設置攝像頭
        this.camera.position.set(0, 15, 15) 
        this.camera.lookAt(this.scene.position);
        this.camera.lookAt(0, 0, 0);;
    }
    //對比
    addCompared() {
        var cube1 = this.createMesh(3, 3, 2.8, '#EE11EE', 1, 3, 4);
        var cube2 = this.createMesh(3, 6, 3, '#58ACFA', 0, 3, 4);
        this.scene.add(cube1)

        this.scene.add(cube2)
    }
    createMesh(width, height, depth, color, x, y, z) { //返回網格對象
        var cubeGeometry = new THREE.BoxGeometry(width, height, depth);
        var glass_material = new THREE.MeshBasicMaterial({
            color: color,
            wireframe: true
        });
        var cube = new THREE.Mesh(cubeGeometry, glass_material);
        cube.position.set(x, y, z) return cube;
    }
}
let demo = new bsp()

這裏是單純的添加兩個幾何體所形成的效果。接下來就一個一個看使用了ThreeBSP所形成的幾何體

交集

initBsp() {
	/*-------------------*/
	this.addBSP(cube1, cube2, "#716699", 'intersect') //交集
}
addBSP(cube1, cube2, color, type) {
    let resultBSP;
    var cubeBSP1 = new ThreeBSP(cube1);
    var cubeBSP2 = new ThreeBSP(cube2);
    let handle = {
        'intersect': () = >{
            resultBSP = this.intersectBsp(cubeBSP1, cubeBSP2, color)
        },
        'union': () = >{
            resultBSP = this.unionBsp(cubeBSP1, cubeBSP2, color)
        },
        'subtract': () = >{
            resultBSP = this.subtractBsp(cubeBSP1, cubeBSP2, color)
        }
    }
    handle[type]()
    //重新賦值一個紋理
    var material = new THREE.MeshBasicMaterial({
        color: color,
        wireframe:true
    });
    //從BSP對象內獲取到處理完後的mesh模型數據
    var result = resultBSP.toMesh(material);
    //更新模型的面和頂點的數據
    result.geometry.computeFaceNormals();
    result.geometry.computeVertexNormals();
    result.material.flatshading = THREE.FlatShading;
    result.geometry.computeFaceNormals(); //重新計算幾何體側面法向量
    result.geometry.computeVertexNormals();
    result.material.needsUpdate = true; //更新紋理
    result.geometry.buffersNeedUpdate = true;
    result.geometry.uvsNeedUpdate = true;
    //將計算出來模型添加到場景當中
    this.scene.add(result);
}
intersectBsp(cubeBSP1, cubeBSP2, color) { //處理網格對象(交集)
    //進行交集計算
    var resultBSP = cubeBSP1.intersect(cubeBSP2);
    return resultBSP;
}
unionBsp(cubeBSP1, cubeBSP2, color) {
    //進行並集計算
    var resultBSP = cubeBSP1.union(cubeBSP2);
    return resultBSP;
}
subtractBsp(cubeBSP1, cubeBSP2, color) {
    //進行缺集計算
    var resultBSP = cubeBSP1.subtract(cubeBSP2);
    return resultBSP;
}

並集

initBsp() {
	/*-------------------*/
	this.addBSP(cube1, cube2, "#716699", 'union') //交集
}

缺集

initBsp() {
	/*-------------------*/
	this.addBSP(cube1, cube2, "#716699", 'subtract') //交集
}