Skip to content


 Zabbix
 Grafana
 Prometheus
 React Three Fiber
 Threejs and TypeScript
 SocketIO and TypeScript
 Blender Topological Earth
 Sweet Home 3D
 Design Patterns Python
 Design Patterns TypeScript
   
 Course Coupon Codes
Three.js and TypeScript
Kindle Edition
$6.99 $9.99 Paperback 
$22.99 $29.99




Design Patterns in TypeScript
Kindle Edition
$6.99 $9.99 Paperback
$11.99 $19.99




Design Patterns in Python
Kindle Edition
$6.99 $9.99 Paperback
$11.99 $19.99




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.

git clone https://github.com/Sean-Bradley/Three.js-TypeScript-Boilerplate.git

cd Three.js-TypeScript-Boilerplate

git checkout csg 

npm install

npm run dev

Union

Return a new CSG solid consisting of A and B

A.union(B)

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

Subtract

Return a new CSG solid where B is subtracted from A

A.subtract(B)

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

Intersect

Return a new CSG solid where both A and B overlap

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