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

Draw and extrude

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.

Extruded using x, y, and z makes it skewed to one side.

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

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

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

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);
Nicely rounded

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!

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));
}
That could be a street in my neighborhood.

And finally, translate it

That’s it

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.

Just a common guy