Three CSG in Codepen
// Intro
One of the biggest pain points i had working with csg (constructive solid geometry) in codepen was, well, getting it to work!
And that's not a dig at Codepen, I just couldn't find any good docs online for even the most basic stuff.
I think it's safe to say I spent way too long trying to get it to function, so here’s a quick run through on what I learned. Also, a bit of insight into how I used csg in my Design Tools Dashboard pen.
// Getting Started
If you search in Codepen’s cdn list for “csg” you will find the “three-js-csg” module. If you're like me, you might think “Oh sweet I can just import this and Bob’s your uncle!”.
Yeah nah...
This is purely a wrapper for the actual three-csg module (which I wish I had realised sooner). You will need to use the cdn for the core three-csg module from here as well. Once you’ve whacked both of those in, you should now be on the right track.
// Usage
The boolean operation/subtraction code example for three-js-csg, can be found here .
In my example I used a third cube to visualise the subtraction being made, so It's completely optional.
If you’re unsure of anything I've mentioned though, feel free to checkout the example to the right, or drop a comment and I'll do my best to hopefully avoid a situation of the blind leading the blind haha. Good luck! 🤙