Learn to build a BabylonJS app using the Tridify BIM Publishing Service and the Tridify API.
Explore the benefits of the Tridify BIM Publishing Service and start a free one year trial (no credit card required)
This tutorial is for developers. If you want to create a Viewer using our automated service, check this out: How to publish BIM to web
Please note that due to the fast development of our software, some parts of this tutorial may be outdated.
Getting started with the Tridify API
Log in to the Tridify BIM Publishing Service and process your IFC file. After the process is complete, enable Web Publish to generate a unique hash code. That will be used later when we have set up the Tridify API.
Install the latest Node.js
To build your BIM viewer, download and install the latest version of Node.js.
Download Visual Studio Code
You need also a code editor. If you don’t already have one, you can download Visual Studio Code (VS Code editor) which is used in this tutorial.
Install and open GitHub Desktop
You can use your favourite version control, we’ll be using GitHub Desktop.
Launch GitHub Desktop.
Go to the Tridify API GitHub project. In GitHub Tridify API samples click Clone or download button and copy the URL.
Go back to the GitHub Desktop. Click Clone a repository from internet… and paste the URL.
You can choose which one you prefer, but in this tutorial we're going to use TypeScript. Select the babylon-model-render-ts folder (Menu: File > Open Folder).
Open terminal in VS Code (Menu: Terminal > New Terminal).
Getting your project running
These following commands need to be run in the terminal (instructions can also be found in README.md in the VS Code Explorer).
This command has to be run in the same directory that includes the package.json file, either in the JS or in the TS subfolder.
Running the project
npm run dev
Check the port that your project is running on. In our case it’s http://localhost:8080/
Now we need to get the published viewer’s Share key from Tridify BIM Publishing Service. Go to your project, select Published links tab and click Show link.
Copy the Share key.
Insert your port address and the Share key to your web browser:
The URL in our example, running locally, is as follows:
Your first web viewer is up and running! Next you can start developing your own features to your viewer.