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.
First steps with Bitbybit - setting up your account, creating projects, and building your first 3D application.
View all tagsThe 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.
Customize parametric 3D models easily and export them in standard formats like STEP, IGES, STL, or GLTF.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Learn to build a simple 3D table configurator using the Blockly visual editor on Bitbybit and then deploy it as an interactive website on StackBlitz using Bitbybit Runner.
Learn to build a simple 3D table configurator using the Rete visual editor on Bitbybit and then deploy it as an interactive website on StackBlitz using Bitbybit Runner.
Learn to build a 3D table configurator by exporting TypeScript code from Bitbybit and integrating it into a web application on StackBlitz using Bitbybit Runner.
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.
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.
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.
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.
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.
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.
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.
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.
Embed a public script's preview in your own website with the iframe code bitbybit.dev writes for you, and why the editors themselves cannot be embedded.
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.
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.
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.
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.
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.
Get started with Bitbybit and BabylonJS - our fully integrated 3D game engine. Learn about integration approaches including visual editors, NPM packages, and runners.
Get started with Bitbybit and PlayCanvas - a powerful WebGL game engine. Learn about NPM packages and runners integration approaches.
Get started with Bitbybit and ThreeJS - the world's most popular WebGL library. Learn about NPM packages and runners integration approaches.
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.
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.
Learn how to upload a local glTF (.glb) file to your browser storage and then import and display it in Bitbybit using Rete, Blockly, and TypeScript editors.
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.
Import a .bitbybit file into the editor it was made in, or a zip of projects or a single script into this browser from My Projects.
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.
Discover Bitbybit Runner, a powerful tool to execute your Bitbybit 3D scripts on any website using a single JavaScript file, now with support for BabylonJS, ThreeJS, and PlayCanvas.
Learn how to create a simple 3D website using Bitbybit Runner & Rete editor, controlling a 3D cube's size with a UI input on StackBlitz.
Learn how to create a 3D website using Bitbybit Runner by integrating a visual program built with the Blockly editor into a StackBlitz project.
Learn how to create a 3D website using Bitbybit Runner by integrating a TypeScript program built with Bitbybit into a StackBlitz project.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Search the scripts of public projects on bitbybit.dev by title, author, editor, project and even the code they contain.
Learn how to turn on configurator pricing, set a base price, price your first option, preview it and publish.
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.
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.
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.
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 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.
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 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.
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.
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.
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.
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.
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.
Why a shape on bitbybit.dev only appears once it is drawn, what drawing turns it into, which game engine draws it, and what you can do with a drawn object.
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.
What a script is on bitbybit.dev, the four editors a script can be written in, who can open it, and how scripts of different editors work together in one project.
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.
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.
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.
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.
Why a cloud project needs a cover image before it can be shared, and how to upload one for the project and for each of its scripts.
Use an image from a cloud project's files as a texture on bitbybit.dev - load the file, make an object URL, a texture and a material, and put it on a mesh - in Rete, Blockly and TypeScript.
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.
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.
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 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.
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.
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.
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.
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.
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.