Constructive Solid Geometry (CSG)

Description

The CSG branch demonstrates,

  • Using the Union method to return a new Mesh consisting of Mesh A and Mesh B
  • Using the Intersects method to return a new Mesh where Mesh A and Mesh B overlap each other.
  • using the Subtract method to return a new Mesh where Mesh B is subtracted from Mesh A

To load the CSG example, checkout the csg branch.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
git clone https://github.com/Sean-Bradley/Three.js-TypeScript-Boilerplate.git

cd Three.js-TypeScript-Boilerplate

git checkout csg 

npm install

npm install -g typescript

npm run dev

Union

Return a new CSG solid consisting of A and B

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
A.union(B)

+-------+            +-------+
|       |            |       |
|   A   |            |       |
|    +--+----+   =   |       +----+
+----+--+    |       +----+       |
     |   B   |            |       |
     |       |            |       |
     +-------+            +-------+

Subtract

Return a new CSG solid where B is subtracted from A

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
A.subtract(B)

+-------+            +-------+
|       |            |       |
|   A   |            |       |
|    +--+----+   =   |    +--+
+----+--+    |       +----+
     |   B   |
     |       |
     +-------+

Intersect

Return a new CSG solid where both A and B overlap

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
A.intersect(B)

+-------+
|       |
|   A   |
|    +--+----+   =   +--+
+----+--+    |       +--+
     |   B   |
     |       |
     +-------+

CSG Tree CSG Tree Image By User:Zottie - Own work, CC BY-SA 3.0, https://commons.wikimedia.org/w/index.php?curid=263170

Constructive Solid Geometry