How to develop your first BIM viewer

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 14-day trial (no credit card required)

 

 

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.

 

API_BIM_Viewer_pic1

 

Go back to the GitHub Desktop. Click Clone a repository from internet… and paste the URL.

 

API_BIM_Viewer_pic2

 

Launch your external editor from within the GitHub Desktop. In the Explorer section of VS Code there are two examples to go with, JavaScript and TypeScript.

 

API_BIM_Viewer_pic3

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).

Installing dependencies

npm install

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.

 

API_BIM_Viewer_pic4

Insert your port address and the Share key to your web browser:

http://localhost:8080/index.html#SHAREKEY

 

The URL in our example running locally is as follows:

http://localhost:8080/index.html#k7qzlm5tuhjxelQkz3RMUVtTy5rQCZTnmYFmcvUiyxA

 

Your first web viewer is up and running! Next you can start developing your own features to your viewer.

 

API_BIM_Viewer_pic5