Introduction To Programming 3D In TypeScript
bitbybit.dev logo

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.

Beginner
Free
TypeScript

Iterations And Loops

Iterating code in loops is one of the most important concepts in programming, lets learn how they work!

Iterations make it easy to create multiple entities easily. In this lecture we will discuss how for loops look like and how they function. We will create multiple points that would be impossible to make manually.

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.

const start = async () => {

    const gridOptions = new Bit.Inputs.Draw.SceneDrawGridMeshDto();
    bitbybit.draw.drawGridMesh(gridOptions);

    type Point3 = Bit.Inputs.Base.Point3;

    const colors: string[] = [];
    const vectors: Point3[] = [];

    for (let i = 0; i < 255; i += 5){

        const color = bitbybit.color.rgbToHex({
            r: i,
            g: 255,
            b: i
        });
        colors.push(color);

        const vector: Point3 = [0, i / 30, 0];
        vectors.push(vector);
    }

    const drawOptions = new Bit.Inputs.Draw.DrawBasicGeometryOptions();
    drawOptions.colours = colors;
    drawOptions.size = 20;

    bitbybit.draw.drawAnyAsync({
        entity: vectors,
        options: drawOptions
    });

}

start();
< PreviousNext >

Course Lectures

Navigate freely between lectures by clicking on them. Approximate time required: 171 minutes.