Skip to main content

Introduction to Bitbybit Runner with TypeScript: Your First 3D Website

Make Your Own 3D Website with TypeScript​

TypeScript is a powerful programming language that enables the expression of complex ideas in a concise and type-safe manner. In this tutorial, Matas Ubarevičius demonstrates building a simple 3D cube using TypeScript with the Bitbybit libraries and then integrating this code into a web application using the bitbybit-runner.js library.

The focus is on a simple OCCT cube geometry. The primary goal is to illustrate how you can integrate your 3D TypeScript code, developed with Bitbybit, into standard JavaScript web development workflows, leveraging the Bitbybit Runner for execution.

Final Result & Code​

You can either check live demo of the completed StackBlitz project or use the code snippets below to recreate it on your own website.

Bitbybit Platform

StackBlitz - Bitbybit Runner With TypeScript

TypeScript Code (The Program)​

The following is the Bitbybit TypeScript script we'll be creating. The JavaScript code used in the StackBlitz example is what gets generated (or is very similar to what you'd write directly) when you use the "Export to Runner" feature from this TypeScript script, or adapt it for the runner environment.

Bitbybit Platform

Bitbybit TypeScript Editor - Simple Cube for Runner Tutorial

typescript logoTypescript
Script Source (typescript)
type Inputs = {
    size: number;
}

Bit.mockBitbybitRunnerInputs({ size: 1 });
const inputs: Inputs = Bit.getBitbybitRunnerInputs();

const { occt } = bitbybit;

const start = async () => {
    const cube = await occt.shapes.solid.createCube({
        size: inputs.size,
        center: [0, 0, 0],
    });
    const filletCube = await occt.fillets.filletEdges({
        shape: cube,
        radius: 0.4
    });
    const drawOptions = new Bit.Inputs.Draw.DrawOcctShapeSimpleOptions();
    drawOptions.faceColour = "#0000ff";
    drawOptions.edgeWidth = 1;
    drawOptions.precision = 0.005;
    const cubeMesh = await bitbybit.draw.drawAnyAsync({
        entity: filletCube,
        options: drawOptions,
    });
    return { cubeMesh };
}

const runnerOutput = start();
Bit.setBitbybitRunnerResult(runnerOutput);

Complete Code for Your Website​

Below are the index.html and script.js files you would use on StackBlitz or your own website. The index.html remains largely the same as the previous examples, with the primary difference being the script.js content, which will now execute the code adapted from or exported from the TypeScript editor.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Home</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="styles.css" />
    <script src="https://cdn.jsdelivr.net/gh/bitbybit-dev/bitbybit-assets@0.20.4/runner/bitbybit-runner-babylonjs.js"></script>
    <script type="module" src="script.js"></script>
</head>
<body>
    <div class="myCanvasZone">
    <canvas id="myCanvas"></canvas>
    </div>
    <label for="size">Size</label>
    <input
    id="size"
    type="number"
    value="1"
    min="1"
    max="10"
    step="1"
    onchange="changeSize(+event.target.value)"
    />
</body>
</html>

This tutorial showcases how TypeScript, combined with Bitbybit's libraries and the Bitbybit Runner, provides a robust and flexible environment for developing sophisticated 3D web applications. By exporting or adapting your TypeScript logic, you can integrate complex 3D operations and CAD functionalities into any standard web project.