Develop WebVR with Tridify

Tridify has opensourced a simple-to-use base web application that loads Tridify processed BIM/CAD models to your own web application. The base application uses Tridify API to get the data from our servers and Babylon.js to render and manipulate the model. The repository includes JavaScript and TypeScript examples.

The opensource base application provides functionalities like loading the BIM/CAD model to web viewer, centering the model in the view and an Arc Rotate Camera. You’ll need to have basic knowledge of Babylon.js to further develop your own application. More information about the Babylon.js can be found at https://www.babylonjs.com/

How to get started?

 

  1. Go to our public GitHub repository to clone the opensource project
  2. Publish your model in Tridify Service. This will give you a share key that can be found in the published model’s URL. Here is an example of published model’s URL:
    https://view.tridify.com/floorplan/index.html#/conversion/k7qzlm5tuhjxelQkz3RMUVtTy5rQCZTnmYFmcvUiyxA
    where the share key is “k7qzlm5tuhjxelQkz3RMUVtTy5rQCZTnmYFmcvUiyxA”.
  3. Once your Babylon.js development environment is up and running, add your own share key (or the example one on this page) to the localhost url for example http://localhost:8080/index.html#SHAREKEY
  4. Now you can run the basic application and the model will automatically load to the view.

More information in the Readme file in the repository.

Our tutorial of the process: How to Develop Your First BIM Viewer

 

Embed viewer to a webpage

 

Once your application is ready you can easily embed a window containing your web viewer into your own website.

Choose whichever HTML example code is best for your situation. Paste in your web viewer link within the quotation marks:

Example 1:
changing values of width and height will allow you to choose size of the web viewer window

<iframe src="your link here" style="border: 0" width="1000" height="800" frameborder="0" scrolling="no" allowfullscreen></iframe>

Example 2:
using this sample you will get a web viewer window that will scale with your page size

<div style="padding: 56.25% 0 0 0; position: relative;"><iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="your link here" frameborder="0" allowfullscreen></iframe></div>

 

Babylon.js website

Find out more

Explore the benefits of Tridify immediately 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