在Vue中使用ThreeCSG（对3D模型网络合并）

ThreeCSG的Github地址：https://github.com/chandlerprall/ThreeCSG

1、下载之后，可以看到里面有一个threeCSG.es6文件，把它放到项目中。

2、打开threeCSG.es6文件，在首行加入对three.js的引用：

import * as THREE from "three";

3、在项目中引用ThreeCSG和Three.js：

import * as THREE from "three";
import ThreeBSP from "three/threeCSG.es6";

4、然后就可以在代码中求两个3D网络的差值、交集和并集了。

var m = new THREE.MeshPhongMaterial({
  color: 0x00ff00,
});

var g1 = new THREE.CylinderGeometry(2, 2, 20, 100, 100);
var mesh1 = new THREE.Mesh(g1, m);

var g2 = new THREE.CylinderGeometry(1, 1, 20, 100, 100);
var mesh2 = new THREE.Mesh(g2, m);

var bsp1 = new ThreeBSP(mesh1);
var bsp2 = new ThreeBSP(mesh2);
var bsp = bsp1.subtract(bsp2);
var mesh = bsp.toMesh(m);

scene.add(mesh);

上面的代码，我们使用两个圆柱体相减，得到了一条空心的管道：