Cascade Studio Tutorial
OpenCascade.js is a port of the amazing CAD library OpenCascade to Javascript. It’s the tool that powers CascadeStudio and CadHub.
Nice, but… what does that mean?
It means you can build models for a 3D printer or CNC inside your browser using code and cutting-edge technology.
Kurt Hutten has a nice article here about the benefits of code for creating 3D models (and a nicely curated software list for that). Check that out.
Getting started
Open CadHub or CascadeStudio, that’s it. No need to download or install anything.
Draw and extrude
Let’s draw something in 2D first then extrude it into the third dimension. Delete the sample content in the editor and create a 10 units radius circle.
Circle(10);Hit F5 and the scene at the right-hand side should show this:
It’s a flat circle, like Earth🌎, right? 😝
So what are “units” here? Centimeters? Millimeters? Inches? Actually, CascadeStudio couldn’t care less. It’s whatever your CAM Software wants it to be when you convert it to GCode for printing or milling.
Build models for a 3D printer or CNC inside your browser using code.
Now, to give it volume, extrude it and hit F5 again:
Extrude(Circle(10), [0, 0, 10]);
A small line, but that’s a lot going on.
What does [0, 0, 10]mean?
Points and directions in Cascade Studio are arrays of 3 elements: [x, y, z] . The x-axis is how “wide” it is, the y-axis is “deep”, and the z-axis is the “height”. We are asking it to make the circle 10 units tall.
If you are familiar with the term, those 3 element arrays are vectors. Sometimes, when we are modelling 2D shapes to be extruded, we don’t need the z-axis so we have 2 element arrays [x, y].
What does Extrude do?
It projects 2D shapes in a 3D space by “stretching” them in the direction of the vector we provided. In the case above, it “stretched” the circle up. Try to use negative values for z or adding something to y and see what happens.
Don’t worry, you’re not going to break anything. The worst that can happen is to get an error message.
It’s just Javascript
We are coding in plain Javascript, so everything Javascript applies. For example, we can use variables:
let my_stuff = Circle(10);
let this_tall = [0, 0, 10];Extrude(my_stuff, this_tall);
Don’t forget to hit F5 to apply your changes.
Sketch and extrude
What if we want something more complex? Let’s try a roof.
new Sketch([0, 0])
.LineTo([30, 0])
.LineTo([15, 15])
.End(true)
.Face();
Well… that’s more complex for sure, but it doesn’t look like a roof 🤔. Fret not, we’ll get there, but first let me explain what all that crazy stuff means.
Sketch is the starting point for a new 2D shape, we are going to use it a lot. Notice the new keyword before it. That’s a bit different from the Circle before and it’s the only thing in Studio that uses it, everything else is created by functions.
After Sketch, we chain a bunch of methods. they do what you think they should do: they create a line connecting the previous point to the next. So new Sketch([0, 0]).LineTo([30, 0]) creates a horizontal line from [0, 0] to [30, 0] , then the next method goes from [30, 0] to [15, 15].
At last, but not least, we have End(true) . It finishes the Sketch. The true argument means “close the shape”, so we don’t have to draw the last line from [15, 15] back to [0, 0]. It’s just convenient, but if you like, you could create the last line yourself, like this:
new Sketch([0, 0])
.LineTo([30, 0])
.LineTo([15, 15])
.LineTo([0, 0]) // Manually closing the shape
.End(). // Look Ma'! No "true".
.Face();The last command is Face() , which tells Cascade Studio that we want a filled polygon (so we can extrude it). The other option is Wire() . Try it! Just pay attention because it’s there, but it’s hard to see.
Now, with that stuff out of the way, let’s make it at least looks like a roof.
let roofSide = new Sketch([0, 0])
.LineTo([30, 0])
.LineTo([15, 15])
.End(true)
.Face();let roofVolume = Extrude(roofSide, [0, 0, -50]);Rotate([1, 0, 0], 90, roofVolume);
Ohh… that’s more like it.
You can see I’ve used some variables to make the code more readable, and I’ve introduced Rotate to the game. Yeah, it does what you think it does.
The only trick is the vector [1, 0, 0] . The 1 there means that the volume is going to be rotated over the x-axis. The 90 is the rotation in degrees.
Rounded corners
We can easily round corners. Just add Fillet to the point you want rounded:
let roofSide = new Sketch([0, 0])
.LineTo([30, 0])
.LineTo([15, 15]).Fillet(4) // <=== This is new!
.End(true)
.Face();let roofVolume = Extrude(roofSide, [0, 0, -50]);Rotate([1, 0, 0], 90, roofVolume);
Not bad for such a small addition.
Notice that we’ve added the rounded corner to the Sketch, so when we extrude it the rounded corner also follows.
The joys of Code CAD!
Are you down for making this thing cool? I am!
It’s Javascript, so why not build a function to create roofs?
function roof(width, depth, height) {
let roofSide = new Sketch([0, 0])
.LineTo([width, 0])
.LineTo([width / 2, height])
.End(true)
.Face(); let roofVolume = Extrude(roofSide, [0, 0, -depth]); return Rotate([1, 0, 0], 90, roofVolume);
}roof(30, 60, 10);
Now we can have a bunch of roofs:
function roof(width, depth, height) {
let roofSide = new Sketch([0, 0])
.LineTo([width, 0])
.LineTo([width / 2, height])
.End(true)
.Face(); let roofVolume = Extrude(roofSide, [0, 0, -depth]); return Rotate([1, 0, 0], 90, roofVolume);
}for (let i = 0; i < 10; i++) {
let height = Math.random() * 20 + 5;
let width = Math.random() * 25 + 10; Translate([i * 50, 0 ,0],
roof(width, 60, height));
}
And finally, translate it
In line 17 in the code above, you see Translate. That’s the fancy way of say “move”. If you remember our talk about 3 element arrays (or vectors), you can see we are moving the roofs on the x-axis by 50 units each loop cycle.
That’s it
For now, at least.
There are more examples in CadHub. Just scroll the initial page to the bottom, click on any project there, and then on the button “Open IDE”. Inscribed Polygon and Vacuum Heads are my favorites.
