Introduction To Programming 3D In TypeScript

We made this course for people interested in creating parametric geometry and 3D models in TypeScript programming language. Follow these lecture series to understand how things work and how to achieve your goals.

Made For Beginners
Free
TypeScript
Image showing TypeScript coding editor

Functions And Solids

Creating and using functions is such a life saver that you must learn it as soon as possible

In this lecture we will discuss how functions work and how to use them. We will explain the concepts of inputs and outputs. We will also create a small boxy robot model that you can configure further.

The Code

This is the code that you should copy and paste into the editor. You can also type it in yourself. The code is explained in the video.

type Point3 = Bit.Inputs.Base.Point3; const start = async () => { bitbybit.draw.drawGridMesh(new Bit.Inputs.Draw.SceneDrawGridMeshDto()); const robot1 = await createRobot([0, 0, 0], 0.7); const robot2 = await createRobot([0, 0, 4], 1); const robot3 = await createRobot([0, 0, 8], 0.3); const robot4 = await createRobot([0, 0, -4], 0.4); const robot5 = await createRobot([0, 0, -8], 1.5); const robot6 = await createRobot([0, 0, 12], 0.9); const drawOptions = new Bit.Inputs.Draw.DrawOcctShapeOptions(); drawOptions.edgeWidth = 1; drawOptions.faceColour = "#ff00ff"; const compoundedRobots = await bitbybit.occt.shapes.compound.makeCompound({ shapes: [robot1, robot2, robot3, robot4, robot5, robot6] }); bitbybit.draw.drawAnyAsync({ entity: compoundedRobots, options: drawOptions }); } const createRobot = async (centerInput: Point3, headHeight: number) => { const robotBody = await bitbybit.occt.shapes.solid.createBox({ width: 1, length: 1, height: 2, center: [centerInput[0], 2 + centerInput[1], centerInput[2]] }); const robotHead = await bitbybit.occt.shapes.solid.createBox({ width: 0.5, length: 0.5, height: headHeight, center: [centerInput[0], 3 + (headHeight / 2) + centerInput[1], centerInput[2]] }); const robotLeg1 = await bitbybit.occt.shapes.solid.createBox({ width: 0.25, length: 0.25, height: 1, center: [0.2 + centerInput[0], 0.5 + centerInput[1], centerInput[2]] }); const robotLeg2 = await bitbybit.occt.shapes.solid.createBox({ width: 0.25, length: 0.25, height: 1, center: [-0.2 + centerInput[0], 0.5 + centerInput[1], centerInput[2]] }); const robotArms = await bitbybit.occt.shapes.solid.createBox({ width: 3, length: 0.25, height: 0.25, center: [centerInput[0], 2.55 + centerInput[1], centerInput[2]] }); const robotUnion = await bitbybit.occt.booleans.union({ shapes: [robotBody, robotHead, robotLeg1, robotLeg2, robotArms], keepEdges: false }); const robot = await bitbybit.occt.fillets.filletEdges({ shape: robotUnion, radius: 0.07 }); return robot; } start();
< PreviousNext >

Course lectures

These are all the lectures of the course. Navigate freely between them by clicking.

Approximate Time Required: 171 minutes