vue+threejs+threeBSP 创建墙

安装

npm install three@0.110.0 --save          （版本太高，使用threebsp会报错）

npm i --save three-js-csg

npm i tthreebsp

相关函数

类型	描述
intersect（交集）	基于两个现有几何体的重合的部分定义此几何体的形状。
union（并集）	将两个几何体联合起来创建出一个新的几何体。
subtract（差集）	在第一个几何体中移除两个几何体重叠的部分来创建新的几何体。

应用例子

import * as THREE from 'three'
const ThreeBSP = require('three-js-csg')(THREE)


……
methods:{
    initWall(){
      //透明墙体材质
      let wallMaterial = new THREE.MeshStandardMaterial({
          color:0xFFFFFF,
          opacity:0.4,
          transparent:true,
      })
      //墙
      let wall = this.createWall(20,2.6,0.2,10,1.3,20,wallMaterial,0,0,0)
      //门洞
      let wallHole = this.createWall(2.3,2.15,0.2,15.25,1,20,wallMaterial,0,0,0)
      let wallBSP = new ThreeBSP(wall)
      let wallHoleBSP = new ThreeBSP(wallHole)

      let resultwallBSP = wallBSP.subtract(wallHoleBSP)
      let resultwall = resultwallBSP.toMesh()
      resultwall.material = wallMaterial
      this.scene.add(resultwall)

      //TODO 添加门模型等操作
    },
    //创建墙面
    //width:x轴方向-宽度* height:y轴方向-高度* depth:z轴方向-深度* 
    //x:距离（0,0,0）x坐标位置, y：距离（0,0,0）y坐标位置, z：距离（0,0,0）z坐标位置
    //material:材质
    //rotation 旋转角度(-逆时针旋转,+顺时针)
    createWall(width, height, depth, x, y, z,material, rotationX, rotationY, rotationZ){
        let geometry = new THREE.BoxGeometry(width,height,depth)
        let wall = new THREE.Mesh(geometry, material)
        wall.position.set(x,y,z)
        if (rotationX) {
          wall.rotation.x += rotationX * Math.PI;
        }
        if (rotationY) {
          wall.rotation.y += rotationY * Math.PI;
        }
        if (rotationZ) {
          wall.rotation.z += rotationZ * Math.PI;
        }
        return wall
    }
}