Parametric Cube

In this short tutorial we will create a cube by using OpenCascade OCCT kernel and we will control its size by using a variable. This is a very simple example, but it shows how TypeScript can be used to create variables and parametric relationships with geometry.

Start The Application

First thing we will need to do is open up our Application on https://bitbybit.dev/app?editor=typescript. This will immediately start an empty TypeScript workspace. You can also just use the embedded example editor in the tutorial.

Script explained

While the script shown in the editor below is quite self-explanatory, let's go through it step by step. Feel free to hit Run before we dive deeper.

TypeScript

Parametric cube

So first we make a start boilerplate function and assign it to start constant. After we define the asynchronous arrow function we do call that start function for its body to execute. This is a very common pattern in bitbybit.dev scripts. We do this so that we could use await keyword inside the function body.

Inside the start function you see a constant called "size" being defined. This is a variable that we will use to control the size of the cube. We then define the options of the cube and assign size to it's size property.

Finally we create the cube by calling "bitbybit.occt.shapes.solid.createCube" function and passing the options to it. We then call "bitbybit.draw.drawAnyAsync" function and pass the cube to it as entity. This will create a visible BabylonJS Mesh on your screen. We are now finished and you can Run the code. After you run the script click Swap Canvas button marked with two arrows to enter 3D scene and inspect the results.