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.
Importing
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.
Button To Manage Local Assets
Now you should be able to click "Upload Local Asset" button as seen in the next picture.
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.
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.
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"
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.
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.
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:
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.