Bit By Bit Developers

Importing STEP Files

Intro to STEP

STEP files are commonly used in CAD applications. These files can represent various complex geometries. Many well known CAD applications, including Autodesk Fusion 360, Dassault Systemes SolidWorks, McNeel RhinoCeros and IMSI TurboCAD, can read and write STEP files. Through the use of OpenCascade Technology kernel we are able to interpret and manipulate STEP files as well. The process of importing these files is similar to what we already saw with glTF file format, but we will need to use some custom OCCT kernel components to parse the data before it will be drawn as BabylonJS Meshes.

As with the previous glTF tutorial, please download the provided STEP file.



Next you will need to open up our Application. Then click the small folder like button called "Assets" seen in the picture below to open up the local asset manager.

Image showing the menu button to manage your local assets

Button To Manage Local Assets

Now you should be able to click "Upload Local Asset" button as seen in the next picture.

Image showing the button to upload local assets

Button To Upload Local Assets

This will activate an asset creation part of the modal. Here you need to enter the name of the asset by typing "KukaRobot" into the input. Then click the "Choose files" button. File navigator will pop up and you will need to navigate to your Downloads folder where KukaRobot.glb file was saved.

Image showing the local asset form

Form For Local Asset

Now you should be seeing KukaRobot.glb in the modal, which indicates that you've chosen the file correctly. Hit the "Upload" button which will return you to the list of all your Local Assets. In this list you can delete and upload more assets if you need to or download the files of your local assets from the browser to your file system.

Image showing the local asset manager with one kuka robot file in it

Local Asset Manager With Created KukaRobot Asset

If you see the KukaRobot asset in the list, you can close the modal by clicking anywhere on its background canvas.

Using Local Asset In The Script

Now we will be importing the model we've just uploaded to the browser memory into the scene. Follow this category path to get to your component. "IO" -> "Asset" -> "Get local asset file by name"

Find the Get local asset file by name component

Finding the "Get local asset file by name" component

After you did this, enter text "KukaRobot" into the input field of this component. Because we deal with STEP file it is important that we use OCCT category components to parse it. Follow the path "OCCT" -> "IO" -> "OCCT Shape from STEP or IGES asset file" as seen in the next picture.

Image showing how to create OCCT shape from the step asset file

Load Asset Component And Create OCCT Shape

After all of this is done we will need to add both of these components to a "Draw babylon mesh" component which you can find under "Drawing" -> "Draw" -> "Draw babylon mesh". Finished script should look like this.

Image showing finished script of STEP asset import

Finished Script

Now you can hit the "Run The Code" arrow button. Interpreting and parsing STEP files takes longer than glTF files because they are not meshes and need much more processing to happen before they can end up on the screen. Be patient and you will see the finished result. After you "Run The Code" your components will turn blue - this means that script is being processed. Wait till it completes and then click "Swap The Canvas" button to enter the 3D space. If you don't know where to find those buttons, please follow our "Hello World" tutorial first. You shouldn't worry about the initial loading time speeds as the next time you will run the script it will load quite a lot of data from the cache and will be much faster. After computations are finished, you should see this result:

Image showing loaded kuka robot from STEP file

Loaded And Rendered 3D Model

Congrats, you have succeeded in loading the STEP file. Notice that the same strategy should work for IGES (igs) files as well.