Developer tools   /   Tutorials   /   Developing Your First BIM Viewer

Developing Your First BIM Viewer

Learn to build a BabylonJS app using Tridify BIM Publishing Service and Tridify API.

Getting started with Tridify API

The first thing you should do is to create an account in Tridify BIM Publishing Service.
Next you need to process your BIM model in the Service. After the process is complete, enable web publish to generate unique hash code. That will be used later when we have set up Tridify API. Our tutorial on How to Publish BIM to Web.

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 favorite 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 URL.

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

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

You can choose which one you prefer, but in this tutorial we’re going to use TypeScript. To select JS or TS, open and select the folder (Menu: File > Open Folder).

Open terminal in VS Code (Menu: Terminal > New Terminal). Now we need to install dependencies, run the project and finally build the project.

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 this case it’s http://localhost:8080/

Now we need to get the published viewer’s Share key from Tridify BIM Publishing Service. Log in and go to your project. If you haven’t published your model yet, just tick the Publish box next to your file and click Publish To Web. If you have already published your model, 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

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.

Explore the benefits of the Tridify BIM Publishing Service right now, starting with our FREE 14 day trial.

No credit card required

How It Works
Case Studies
Developers
Pricing
News
Support
Contact
Log in Sign up for free