Skip to main content

105 docs tagged with "Getting Started"

First steps with Bitbybit - setting up your account, creating projects, and building your first 3D application.

View all tags

3D Inspector

The 3D inspector on bitbybit.dev opens glTF, GLB and STL files in your browser - its scene tree and model information, warnings about heavy models, wireframe, exploded view, opacity, up axis and material variants.

3D Model Configurators

Customize parametric 3D models easily and export them in standard formats like STEP, IGES, STL, or GLTF.

A Tour of the Blockly Editor

The Blockly editor's window part by part - the toolbox and its search, the blocks on the workspace, the trash can, the 3D view, Run The Code, the toolbox button and the More menu - numbered as in the picture.

A Tour of the Rete Editor

The Rete editor's window part by part - the palette, the toolbar, a node and its parts, a wire, the 3D view, Run The Code and the More menu - numbered as in the picture.

A Tour of the TypeScript Editor

The TypeScript editor's window part by part - the files of the script, the tabs, the code, the 3D view, the console, Run The Code and the More menu - numbered as in the picture.

Adding Components in Rete

Find a Rete component by searching with a right-click on the canvas or by browsing the palette, the short names search knows, and what the Beta and Deprecated badges mean.

Basics

What every bitbybit.dev editor has in common: projects and scripts, assets, running code and reading its console, how drawing works, and what to do when a script fails.

Blockly Editor

What the Blockly editor on bitbybit.dev is and what you can build with it - interlocking blocks that turn into a program - with a detailed drone built step by step, the showcase scripts and where to start.

Blockly Keyboard Shortcuts

Every key and mouse gesture of the Blockly editor - copying, pasting and deleting blocks, undo and redo, swapping the canvas, saving - on Windows, Linux and macOS.

Blockly Showcases

Larger Blockly scripts - a detailed drone, a hexagon hive, an advanced loft and a twisted polygon ornament - with what each one shows, the script file to download and open, and the page that explains it in every editor.

Build a drone: a module that repeats

The second chapter of the Rete drone - a module named Around that repeats one shape evenly around the drone, built from list components, a code component that works out the angles, and rotate shapes; its first uses cut the leg openings and place the standoffs with their bolts.

Build a drone: arms around the frame

The fourth chapter of the Blockly drone - the arm's parts repeated around the frame by calls of around, an async function that alternates the propellers' spin, and another that sorts the lights into green and red by the side they are on.

Build a drone: arms around the frame

The fourth chapter of the Rete drone - one Arm instance and Around instances repeat the arms, motors, stators, propellers, bolts and lights, a code component alternates the propellers' spin, two more sort the lights into green and red, and draw components colour each material.

Build a drone: arms around the frame

The fourth chapter of the TypeScript drone - the arm's parts repeated around the frame by the around function, propellers that alternate their spin, and lights sorted by the side they are on into green and red.

Build a drone: around, bolts and standoffs

The second chapter of the Blockly drone - a function with a count loop that repeats one shape evenly around the drone, its first use cutting the leg openings, an M3 bolt revolved from a profile with a hexagon socket, and the standoffs with their bolts between the arms.

Build a drone: around, bolts and standoffs

The second chapter of the TypeScript drone - a function that repeats one shape evenly around the drone, its first use cutting the leg openings, an M3 bolt revolved from a profile with a hexagon socket, and the standoffs with their bolts between the arms.

Build a drone: canopy and electronics

The fifth chapter of the Blockly drone - a canopy lofted through rounded rectangles, an async function that traces a honeycomb of hexagon wires on its sides, a hatch with the bitbybit logo read from a STEP file cut into it, and the GPS mast and antennas.

Build a drone: canopy and electronics

The fifth chapter of the Rete drone - a canopy lofted through rounded rectangles, a honeycomb of hexagon wires traced on its sides by a code component, a hatch on its crown with the bitbybit logo read from a STEP file cut into it, and the GPS mast and antennas.

Build a drone: canopy and electronics

The fifth chapter of the TypeScript drone - a canopy lofted through rounded rectangles, a honeycomb of hexagon wires traced on its sides, a hatch on its crown with the bitbybit logo read from a STEP file cut into it, and the GPS mast and antennas.

Build a drone: landing gear

The sixth chapter of the Blockly drone - a landing leg swept along a bent path, a revolved damper with a helical spring, a lofted rubber foot and the leg's bolts, each a function whose result around repeats for every leg.

Build a drone: landing gear

The sixth chapter of the Rete drone - a landing leg swept along a bent path, a revolved damper with a helical spring, a lofted rubber foot and the leg's bolts, each made once and repeated four times by Around.

Build a drone: landing gear

The sixth chapter of the TypeScript drone - a landing leg swept along a bent path, a revolved damper with a helical spring, a lofted rubber foot and the leg's bolts, each made once and repeated for every leg.

Build a drone: one arm

The third chapter of the Blockly drone - functions for the arm with a pad for the motor and hexagonal cut-outs made in a loop, a motor revolved from a profile with cooling slots and its stator, a lofted two-blade propeller from a list of stations, and the bolts and the light, drawn one arm at a time.

Build a drone: one arm

The third chapter of the TypeScript drone - a folder for the arm with its body with a pad for the motor and hexagonal cut-outs, a motor revolved from a profile with cooling slots and its stator, a lofted two-blade propeller, and the bolts and the light, each a function in a file of its own, drawn one arm at a time.

Build a drone: payload and sizes

The last chapter of the Blockly drone - the camera on its gimbal, its lens and the strapped battery, then one number changed to rebuild the drone with six arms and a propeller that shrinks to fit.

Build a drone: payload and sizes

The last chapter of the TypeScript drone - the camera on its gimbal, its lens and the strapped battery, then one number changed to rebuild the drone with six arms and a propeller that shrinks to fit.

Build a drone: payload and sliders

The last chapter of the Rete drone - the camera on its gimbal, its lens and the strapped battery, then the arms slider rebuilding the drone with six arms and a propeller that shrinks to fit.

Build a drone: sizes, stage and the frame

The first chapter of the Blockly drone - variables for the drone's sizes, a function that keeps the propeller in bounds, a lit stage and a function that makes each material's drawing options, then the carbon frame plate from a function with hexagon vents cut through it, and a second plate above it.

Build a drone: sizes, stage and the frame

The first chapter of the TypeScript drone - the drone's sizes in a file of their own with a function that keeps the propeller in bounds, a lit stage and the materials, then the carbon frame plate from a rounded rectangle, a face and an extrusion with hexagon vents cut through it, and a second plate above it.

Build a drone: sliders and the frame

The first chapter of the Rete drone - number sliders for the drone's sizes, a code component that keeps the propeller in bounds and a lit stage, then the carbon frame plate from a rounded rectangle, a face and an extrusion, with hexagon vents cut through it and a second plate above it, each part in a group with a comment.

Build a drone: the arm module

The third chapter of the Rete drone - a module named Arm that makes one arm with hexagonal cut-outs, a motor with cooling slots and its stator, a lofted two-blade propeller, its bolts and an LED, sized by its length and propeller inputs, with one output per material.

Building a Script in Blockly

How to find a Blockly block in the toolbox by category or by search, drag it onto the workspace, stack blocks that do something, plug in blocks that give a value, and change the values they start with.

Code Nodes in Rete

How to write TypeScript, JavaScript or JSON inside a Rete node - what the node receives in inputs, what it gives out, how to run and copy its code - and when a few lines of code are clearer than a graph.

Creating a New Project in Bitbybit

Create a project on bitbybit.dev - in the cloud with its first script, or in this browser - from My Projects or without leaving the editor.

Creating a Parametric Cube with Blockly

Size an OCCT cube with a variable in Blockly, step by step with a picture of the editor after every step - make the variable, set it, draw the cube and read the variable into its size.

Creating a Parametric Cube with Rete

Wire a number slider into an OCCT cube in Rete, step by step with a picture of the editor after every step, and drag the slider to resize the solid live.

Creating a Parametric Cube with TypeScript

Size an OCCT cube from one constant in TypeScript, step by step with a picture of the editor after every step, then change the number and run again to watch the solid follow.

Creating Scripts in Bitbybit

Start a script without a project and find it again in Drafts, or add a script to a project in the cloud or in this browser, and read where a script lives from its address.

Editor settings

The settings every coding editor on bitbybit.dev shares - split screen, monochrome wires, right-angled wires, labelled ends for wires between groups, the camera gizmo, the language, the rendering engine and the CAD kernel's 32 or 64-bit architecture - what each changes and which ones reload the editor.

Files and Imports

How a TypeScript script spans several files and folders - main.ts as the file the run starts from, making, renaming, moving and deleting files, importing your own files and JSON data, and the limits a script keeps to.

Files of a Project

The recommended way to give scripts their files - add them to the project, kept in this browser or in the cloud, load them by name or title, and take them along when a project in this browser moves to the cloud.

Finding Your Scripts in Bitbybit

Find your scripts again in My Projects or without leaving the editor - in the cloud, in this browser and among the community projects - and search them by name.

Flow and Interactivity in Rete

Rete's flow components - start, triggers, keys and mouse buttons, intervals and delays, counters, gates, loops and the render loop - how their green action wires run a script step by step and over time, and why such scripts cannot be exported to a runner yet.

Getting Started Overview

What bitbybit.dev offers and where to begin - projects and scripts, the Rete, Blockly and TypeScript coding editors, the Designer, the free npm packages, CAD Cloud, 3D Bits for Shopify and the model configurators.

Getting Started with BabylonJS

Get started with Bitbybit and BabylonJS - our fully integrated 3D game engine. Learn about integration approaches including visual editors, NPM packages, and runners.

Getting Started with PlayCanvas

Get started with Bitbybit and PlayCanvas - a powerful WebGL game engine. Learn about NPM packages and runners integration approaches.

Getting Started with ThreeJS

Get started with Bitbybit and ThreeJS - the world's most popular WebGL library. Learn about NPM packages and runners integration approaches.

Glossary

The words the Bitbybit documentation uses, from kernel, shape and wire to runner, design document, CAD Cloud task and platform algorithm, each in a sentence or two with a link to the page that teaches it.

How Bitbybit Works

The ideas under every Bitbybit product - CAD kernels in web workers, shapes as handles, geometry versus drawing, the three renderers, where each product runs your code, and what is open source.

Importing Local STEP Files into Bitbybit

Learn how to upload a local STEP (.stp) file to your browser storage and then import, parse, and display it in Bitbybit using OCCT with Rete, Blockly, and TypeScript editors.

IntelliSense, Hovers and Errors

How the TypeScript editor helps as you type - suggestions at every dot, a function's documentation on hover, mistakes underlined before the run with a count on the file - and where the errors of a run appear.

Lists and Node Options in Rete

How a Rete component runs once per value when several wires feed one input, every value against every value or paired 1:1, and the node options force exec, 1:1 and flatten out.

Modules in Rete

How to make a Rete module - a graph of its own with inputs and outputs - use it as a component through a module instance, and save it to a file to bring into other scripts.

Nodes, Wires and Values in Rete

How to wire a Rete component's output into another's input, why the editor refuses some wires and what it says, how to read a socket's value, which geometry a node made, and what the red wires of an opened script mean.

Organising a Rete Script

How to keep a large Rete script readable - select several nodes, put them in a group, read wires between groups by their labelled ends, write Markdown comments, auto-arrange and fit the graph, find any node on the canvas, undo and redo.

Plans and What They Unlock

What the Free, Silver and Gold plans of bitbybit.dev include - cloud projects and storage, backups, the Designer, the platform algorithms, communities, the converter and the 3D inspector - and how CAD Cloud and 3D Bits are priced apart.

Platform & Products

A complete guide to Bitbybit's products - npm packages, runners, the coding editors, the Designer, CAD Cloud and Studio, the plans, the converter and inspector, 3D Bits and the MCP servers - with what each costs and when to choose it.

Publishing Your Projects in Bitbybit

Share a cloud project with everyone or with a plan's community by changing its visibility, after giving it a cover image, and what that means for your code.

Rete Editor

What the Rete node editor on bitbybit.dev is and what you can build with it - components wired into a graph that runs as you change it - with a detailed drone built step by step, the showcase scripts and where to start.

Rete Keyboard Shortcuts

Every key and mouse gesture of the Rete editor - undo and redo, selecting, copying and pasting a script, swapping the canvas, search keys and the double-clicks - on Windows, Linux and macOS.

Rete Showcases

Larger Rete scripts - a detailed drone, a hexagon hive, an advanced loft and a twisted polygon ornament - with what each one shows, the script file to download and open, and the page that explains it.

Running your code

When a Rete, Blockly or TypeScript script runs on bitbybit.dev, where its 3D result and its console appear, how the split view and Swap Canvas work, and how to tell the kernels are still working.

Saving Your Scripts to a Local File

Export a script from its editor as a .bitbybit file, or every project in this browser as one zip, to keep a copy, share it privately or move it to another browser.

Start Your Journey

Bitbybit is a platform for parametric 3D on the web - CAD kernels in the browser and on servers, four editors, runners, npm packages, CAD Cloud, AI agents and 3D Bits for Shopify. Find what it offers and where to start.

STEP to glTF Converter

The converter on bitbybit.dev turns a STEP model into a GLB file for the web, in your browser - who can use it, the files it takes, the meshing and Draco options of its simple and advanced modes, and its limits.

The 3D View

Working with the 3D view of the coding editors - turning, panning and zooming the camera, the camera gizmo's views, split screen and full screen, and exporting what is drawn as GLB, STL or a picture.

The Bitbybit API in TypeScript

How the bitbybit API looks in TypeScript - the bitbybit constant that holds every function, the Bit namespace of option objects and types, the BabylonJS context - with a worked example to run on the page.

The Browser Asset Catalog

The browser asset catalog keeps files in this browser for every script you open here - the quick way to test a file in any project - why it cannot move to the cloud, and when to add the file to its project instead.

The Code Behind the Blocks

How to see the JavaScript a Blockly script turns into, with Export to runner, and copy or download it to run the script in your own web app.

The Designer

The Designer is bitbybit.dev's parametric CAD modeller on the Gold plan - parts and assemblies made by clicking instead of code - and where its own documentation starts.

TypeScript Editor

What the TypeScript editor on bitbybit.dev is and what you can build with it - the whole Bitbybit API in code, with IntelliSense, several files and imports - with a detailed drone written step by step, the showcase scripts and where to start.

TypeScript Editor Keyboard Shortcuts

The keys of the TypeScript editor - suggestions, going to a definition, renaming a name everywhere, comments, formatting, the command palette, swapping the canvas and saving - on Windows, Linux and macOS.

TypeScript Showcases

Larger TypeScript scripts - a detailed drone of many files, a hexagon hive, an advanced loft and a twisted polygon ornament - with what each one shows, the script file to download and open, and the page that explains it in every editor.

Understanding and handling errors

Where Rete, Blockly and TypeScript scripts on bitbybit.dev tell you what went wrong - the console, the node or block marked in red, the underlined code - and how to find and fix the cause.

Understanding Auto Save in Bitbybit

How bitbybit.dev saves a script as you work - in this browser at once and in the cloud seconds later - what the status beside the title says, and how history and cloud backups bring back an earlier version.

Understanding Projects in Bitbybit

What a project on bitbybit.dev holds, where it can live - in the cloud or in this browser - who can open it, and how many your plan keeps.

Unit Testing in Bitbybit

Learn about the importance of unit testing in Bitbybit, our practical approach to testing 3D algorithms (including E2E-like tests), and explore our live unit test reports.

Uploading Cloud Assets to Your Projects

Add files to a cloud project on bitbybit.dev - Add files under the project's Files, a title for each file or one for all, the limits your plan sets - and copy a file's address to use it elsewhere.

Uploading Local Assets to Browser Storage

Upload a file to this browser's local asset storage with the editor's Assets dialog - name it, choose or drop the file, upload - and read it in any script you open in the same browser.

Using Cloud Assets in Bitbybit

What cloud assets are on bitbybit.dev - the files of a cloud project, which every script of that project can load - what they are good for, who can read them once a project is shared, and which file formats to prefer.

Using Script Preview Mode in Bitbybit

Open a script's preview - the result alone, full screen, without the editor - share its link or embed it, and make it load faster with the kernels it needs.

Using Your Uploaded Cloud Assets in Bitbybit

Load the files of a cloud project in Rete, Blockly and TypeScript scripts on bitbybit.dev - a glTF model straight into the scene and a STEP part through the CAD kernel - with a running preview of each script.

Variables and Functions in Blockly

How to make a Blockly variable and set, change and read it, and how to wrap blocks into a function of your own that does something or gives a value back.

What a Script Runs In

What a TypeScript or Blockly script can reach when it runs in the editor - bitbybit, Bit, BABYLON and its GUI - what it cannot, top-level await, the console, how runs start and end, and why imports are limited to the script's own files.

Working with Assets in Bitbybit

What an asset is on bitbybit.dev, the file types it can be, and where to keep one - with its project, in the cloud or in this browser, which is the recommended way, or in the browser asset catalog for quick tests.

Working with Blocks in Blockly

What a Blockly block's right-click menu offers - duplicate, comment, inline inputs, collapse, disable, delete and help - what the workspace's own menu does, how a block's tip explains it, and what a failed block looks like.

Your First 3D "Hello World" with Blockly

Build a first Blockly script step by step - a grid and 3D text stacked under it, values changed and plugged in - with a picture of the editor after every step and the finished script to run on the page.

Your First 3D "Hello World" with Rete

Build a first Rete script step by step - a grid, 3D text and a vector wired into it - with a picture of the editor after every step and the finished script to run on the page.

Your First 3D "Hello World" with TypeScript

Write a first TypeScript script step by step - a grid and 3D text made with the bitbybit API and drawn - with a picture of the editor after every step and the finished script to run on the page.