Skip to main content

OCCT Assemblies: Manage Professional CAD Assets

OCCT category icon with a stylized logo representation

What Are Assemblies?​

If you've ever worked with CAD software like SolidWorks, Fusion 360, or FreeCAD, you've likely encountered assemblies. An assembly is simply a collection of individual parts that come together to form a complete product. Think of a bicycle - it's made up of wheels, a frame, handlebars, pedals, and countless other components. Each part is designed separately, but they all fit together in a structured way to create the final product.

In the CAD world, assemblies are essential because real-world products are rarely made from a single piece. Instead, engineers and designers create individual components and then assemble them digitally to verify that everything fits correctly, moves as expected, and can be manufactured efficiently.

Why Are STEP Files Important?​

STEP (Standard for the Exchange of Product Data) is the most widely used file format for sharing 3D CAD models between different software applications. When you export an assembly from professional CAD software, it's often saved as a STEP file because:

  • Universal compatibility – Almost every CAD program can read and write STEP files
  • Preserves geometry – The exact shapes, dimensions, and relationships between parts are maintained
  • Industry standard – It's the go-to format for manufacturing, engineering, and product design workflows

However, STEP files are designed for precision CAD work, not for web visualization. That's where Bitbybit comes in - we help you bridge the gap between engineering-grade CAD data and interactive 3D experiences in the browser.

What You'll Learn in This Section​

Throughout these tutorials, you'll discover how to work with OCCT assemblies in Bitbybit. We'll cover:

  • Loading and previewing – Import STEP files and display them in your 3D scene
  • Format conversion – Transform CAD data into web-friendly formats like glTF
  • Parsing structure – Extract individual parts, names, colors, and hierarchy information
  • Creating assemblies – Build your own multi-part models from scratch
  • Editing and transforming – Modify positions, rotations, and properties of assembly components

Whether you're building a product configurator, an interactive documentation viewer, or a design review tool, understanding assemblies is fundamental to working with professional CAD data.

Your First Assembly Preview​

Let's start with something practical! The example below demonstrates the core workflow for loading a STEP file and displaying it in the browser. Click the play button to see a real CAD assembly - a soil sensor device - rendered in 3D.

How the script works:

  1. Fetch the file – We download a compressed STEP file (.stpZ) from a URL using the fetchFile function
  2. Convert to glTF – The STEP data is processed by OCCT and converted to glTF/GLB format, which is optimized for real-time 3D rendering. The meshPrecision parameter controls the quality of the mesh - lower values mean finer detail but larger file sizes
  3. Load into scene – The converted GLB is loaded into a BabylonJS scene where you can rotate, zoom, and explore the model
  4. Scene setup – We configure lighting, camera position, and a gradient background to make the model look polished

This simple pattern - fetch, convert, display - is the foundation for everything else you'll learn about assemblies. Once you understand this workflow, you can build upon it to create sophisticated CAD viewers and interactive applications.

Bitbybit Platform

STEP OCCT Assembly to gLTF Preview

rete logoRete
Script Source (rete)
{
  "id": "rete-v2-json",
  "nodes": {
    "e0e94797745b9499": {
      "id": "e0e94797745b9499",
      "name": "bitbybit.asset.fetchFile",
      "customName": "fetch file",
      "async": true,
      "drawable": false,
      "data": {
        "genericNodeData": {
          "hide": false,
          "oneOnOne": false,
          "flatten": 0,
          "forceExecution": false
        },
        "url": "https://learn.bitbybit.dev/files/3d/Soil-Sensor.stpZ"
      },
      "inputs": {},
      "position": [
        447.0390625,
        364.58203125
      ]
    },
    "948b052a506ccf73": {
      "id": "948b052a506ccf73",
      "name": "bitbybit.occt.io.convertStepToGltf",
      "customName": "convert step to gltf",
      "async": true,
      "drawable": false,
      "data": {
        "genericNodeData": {
          "hide": false,
          "oneOnOne": false,
          "flatten": 0,
          "forceExecution": false
        },
        "meshPrecision": 0.05
      },
      "inputs": {
        "stepData": {
          "connections": [
            {
              "node": "e0e94797745b9499",
              "output": "result",
              "data": {}
            }
          ]
        }
      },
      "position": [
        840.12109375,
        360.81640625
      ]
    },
    "1718e41af5f83534": {
      "id": "1718e41af5f83534",
      "name": "bitbybit.babylon.io.loadGlbFromArrayBuffer",
      "customName": "load glb from array buffer",
      "async": true,
      "drawable": true,
      "data": {
        "genericNodeData": {
          "hide": false,
          "oneOnOne": false,
          "flatten": 0,
          "forceExecution": false
        },
        "fileName": "model.glb",
        "hidden": false
      },
      "inputs": {
        "glbData": {
          "connections": [
            {
              "node": "948b052a506ccf73",
              "output": "result",
              "data": {}
            }
          ]
        }
      },
      "position": [
        1227.234375,
        358.921875
      ]
    },
    "824be0f956f86e07": {
      "id": "824be0f956f86e07",
      "name": "bitbybit.babylon.scene.drawDirectionalLight",
      "customName": "draw directional light",
      "async": false,
      "drawable": false,
      "data": {
        "genericNodeData": {
          "hide": false,
          "oneOnOne": false,
          "flatten": 0,
          "forceExecution": false
        },
        "direction": [
          -100,
          -100,
          -100
        ],
        "intensity": 3,
        "diffuse": "#ffffff",
        "specular": "#ffffff",
        "shadowGeneratorMapSize": 6000,
        "enableShadows": true,
        "shadowDarkness": 0,
        "shadowUsePercentageCloserFiltering": true,
        "transparencyShadow": false,
        "shadowContactHardeningLightSizeUVRatio": 0.2,
        "shadowBias": 0.01,
        "shadowNormalBias": 0.02,
        "shadowMaxZ": 100,
        "shadowMinZ": 0,
        "shadowRefreshRate": 6
      },
      "inputs": {
        "direction": {
          "connections": [
            {
              "node": "1cf530bc3b05cd75",
              "output": "result",
              "data": {}
            }
          ]
        }
      },
      "position": [
        220.90978154060178,
        1141.4474910149524
      ]
    },
    "d737b03aa186cfde": {
      "id": "d737b03aa186cfde",
      "name": "bitbybit.babylon.scene.adjustActiveArcRotateCamera",
      "customName": "adjust active arc rotate camera",
      "async": false,
      "drawable": false,
      "data": {
        "genericNodeData": {
          "hide": false,
          "oneOnOne": false,
          "flatten": 0,
          "forceExecution": false
        },
        "position": [
          10,
          10,
          10
        ],
        "lookAt": [
          0,
          0,
          0
        ],
        "lowerBetaLimit": 1,
        "upperBetaLimit": 179,
        "angularSensibilityX": 1000,
        "angularSensibilityY": 1000,
        "maxZ": 1000,
        "panningSensibility": 1000,
        "wheelPrecision": 3
      },
      "inputs": {
        "position": {
          "connections": [
            {
              "node": "09ff71828df19896",
              "output": "result",
              "data": {}
            }
          ]
        },
        "lookAt": {
          "connections": [
            {
              "node": "a2753a0a68a97354",
              "output": "result",
              "data": {}
            }
          ]
        }
      },
      "position": [
        1140.4592129965072,
        1279.8313039785085
      ]
    },
    "09ff71828df19896": {
      "id": "09ff71828df19896",
      "name": "bitbybit.point.pointXYZ",
      "customName": "point xyz",
      "async": false,
      "drawable": true,
      "data": {
        "genericNodeData": {
          "hide": true,
          "oneOnOne": false,
          "flatten": 0,
          "forceExecution": false
        },
        "x": 70,
        "y": 50,
        "z": 70
      },
      "inputs": {},
      "position": [
        714.6847345665905,
        1143.2908329012987
      ]
    },
    "a2753a0a68a97354": {
      "id": "a2753a0a68a97354",
      "name": "bitbybit.point.pointXYZ",
      "customName": "point xyz",
      "async": false,
      "drawable": true,
      "data": {
        "genericNodeData": {
          "hide": true,
          "oneOnOne": false,
          "flatten": 0,
          "forceExecution": false
        },
        "x": 0,
        "y": -5,
        "z": 0
      },
      "inputs": {},
      "position": [
        720.7524355897118,
        1488.399577959778
      ]
    },
    "1cf530bc3b05cd75": {
      "id": "1cf530bc3b05cd75",
      "name": "bitbybit.point.pointXYZ",
      "customName": "point xyz",
      "async": false,
      "drawable": true,
      "data": {
        "genericNodeData": {
          "hide": true,
          "oneOnOne": false,
          "flatten": 0,
          "forceExecution": false
        },
        "x": 40,
        "y": -40,
        "z": -40
      },
      "inputs": {},
      "position": [
        -142.37939449872056,
        1144.5669505658402
      ]
    },
    "f0d4e9ea3cd24449": {
      "id": "f0d4e9ea3cd24449",
      "name": "bitbybit.babylon.scene.twoColorLinearGradientBackground",
      "customName": "two color linear gradient background",
      "async": false,
      "drawable": false,
      "data": {
        "genericNodeData": {
          "hide": false,
          "oneOnOne": false,
          "flatten": 0,
          "forceExecution": false
        },
        "colorFrom": "#1a1c1f",
        "colorTo": "#93aacd",
        "direction": "to top",
        "stopFrom": 0,
        "stopTo": 100
      },
      "inputs": {},
      "position": [
        326.1284717805745,
        2031.466101347526
      ]
    }
  }
}

About the Model​

The soil sensor assembly used in this example comes from FarmBot - an open-source CNC farming robot project. FarmBot is unique in the hardware world because they release all their CAD files under the CC0 Public Domain Dedication, meaning you can use, modify, and share these files freely without any restrictions.

This makes FarmBot's models perfect for learning and experimentation. Feel free to download the file and use it in your own projects!

📥 Download: Soil-Sensor.stpZ