three.js ThreeBSP（多个模型组合：差集、交集、并集附带demo）

本文链接：https://blog.csdn.net/qq_42936527/article/details/121694801

本文介绍了ThreeBSP库在Three.js中的应用，用于实现三维模型的交集、并集和差集运算。通过代码示例展示了如何使用ThreeBSP对象对立方体和球体进行布尔运算，生成新的几何体。并提供了相应的HTML代码演示了三种运算的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

一、什么是模型运算
- 1 . 函数属性介绍
- 2. 代码示例
二、模型组合demo（需要在我的第一节中找到对应的库，或者私信我）
- 2.代码效果

一、什么是模型运算

我所理解的ThreeBSP就是模型运算，将两个或者多个立方体模型通过交集（intersect）、差集（subtract）、并集（union）运算生成新的运算后立方体，这个与我们高中必学几何体那一部分的三个函数运算一样

1 . 函数属性介绍

属性	描述
intersect（交集）	返回两个立方体重合部分
union（并集）	返回两个立方体联合部分
subtract（差集）	在第一个集合体中移除两个重叠的集合体部分来创建新的集合体

2. 代码示例

//生成threeBSP对象  (可以对模型进行布尔运算)
        var cubeBSP = new ThreeBSP(cube);
        var sphereBSP = new ThreeBSP(sphere);


        //进行差集运算
        // var resultBSP = sphereBSP.subtract(cubeBSP).toMesh();

        //并集运算
        var resultBSP = sphereBSP.union(cubeBSP).toMesh();

        //进行交集运算
        // var resultBSP = sphereBSP.intersect(cubeBSP).toMesh();

二、模型组合demo（需要在我的第一节中找到对应的库，或者私信我）

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    body{
        margin: 0;
        height: 100%;
    }
    canvas{
        display: block;
    }
</style>
<script src="../../../lib/three.js"> </script>
<script src="../../../lib/dat.gui.min.js"> </script>
<script src="../../../lib/OrbitControls.js"> </script>
<script src="../../../lib/ThreeBSP.js"> </script>
<body onload="draw()">

</body>
<script>
    var renderer,scene,camera,controls;
    //初始化渲染器
    function initRender(){
        renderer = new THREE.WebGLRenderer({
            antialias:true
        })
        renderer.setSize(window.innerWidth,window.innerHeight)
        document.body.appendChild(renderer.domElement)
    }
    //初始化场景
    function initScene(){
        scene = new THREE.Scene();
    }
    //初始化摄像机
    function initCamera (){
        camera = new THREE.PerspectiveCamera(
            45,
            window.innerWidth/window.innerHeight,
            0.1,
            10000
        )
        camera.position.set(0,200,500)
    }
    //初始化灯光
    function initLight(){
        var ambitlight = new THREE.AmbientLight(0x404040);
        scene.add(ambitlight)

        var sunlight = new THREE.DirectionalLight(0xffffff);
        sunlight.position.set(-20,1,1);
        scene.add(sunlight)
    }
    // 初始化模型
    function initModel(){
        var object = new THREE.AxesHelper(500);
        scene.add(object)
        //创建立方体对象
        var boxgeometry = new THREE.BoxGeometry(30,30,30);
        var cube = createMesh(boxgeometry);
        cube.position.x = -50

        //创建球形几何体
        var sphereGeometry = new THREE.SphereGeometry(50,20,20)
        var sphere = createMesh(sphereGeometry);

        //生成threeBSP对象  (可以对模型进行布尔运算)
        var cubeBSP = new ThreeBSP(cube);
        var sphereBSP = new ThreeBSP(sphere);


        //进行差集运算
        // var resultBSP = sphereBSP.subtract(cubeBSP).toMesh();

        //并集运算
        var resultBSP = sphereBSP.union(cubeBSP).toMesh();

        //进行交集运算
        // var resultBSP = sphereBSP.intersect(cubeBSP).toMesh();
        scene.add(resultBSP)

    }
    //创建材质
    function createMesh(geomodel){
        //创建法向量纹理
        var meshMaterial = new THREE.MeshLambertMaterial({
            flatShading : THREE.FlatShading, //平滑着色
            transparent:true,
            opacity:0.5,
            depthTest:true,
        })
        var mesh = new THREE.Mesh(geomodel,meshMaterial)
        return mesh;
    }
    //初始化相机控制参数
    function initControls(){
        controls = new THREE.OrbitControls(camera,renderer.domElement)
        controls.enableDamping = true;
        controls.dampingFactor = 0.25;
        controls.enableZoom = true;
        controls.autoRotate = false;
        controls.minDistance = 20;
        controls.maxDistance = 10000;
        controls.enablePan = true;
    }
    function animate(){
        //更新控制器
        controls.update();
        render();
        requestAnimationFrame(animate)
    }
    function render(){
        renderer.render(scene,camera)
    }
    function draw(){
        initRender();
        initScene();
        initCamera();
        initLight();
        initModel();
        initControls();

        animate()
    }
</script>
</html>