In this blog, our Head of Cloud Infrastructure, Keif Gwinn, sets out the steps involved in setting up a 3D Repo viewer that will allow anyone with the right credentials to view a chosen model.

Head over to our Support Centre if you need any further help.

Before beginning, you will need to gather some information that will be useful throughout the following steps.

  • Which 3D Repo model/federation will you use?
  • Which 3D Repo account details will you use?
  • What URL should you publish this on?
  • What credentials should be set up to protect access?
  • What default viewpoint should be set?

1. The Setup Process

  • Log into 3drepo.io and choose a model and then go to model settings. Take a note of the Teamspace and the Model ID. We’re also going to be back here for the GIS information later.

  • Next, set up a new free starter 3D Repo account to get an API key with read-only access for the chosen model. Invite the new account to the Teamspace and grant the necessary permissions to the chosen model. Click here for more info on user management.
  • Set up htaccess passwords and a webserver on the URL you wish to use. You may choose to use an s3 bucket and HTTP authentication like this.
  • Next, set up a default view in the model. This will be useful later on.

2. Building the Site

  • Head over to our API page and download the 3D Repo Viewer API Web Unity package.
  • Extract the zip file locally.
  • Edit the index.html file to remove the input boxes, as we want to load a specific model each time.

  • Next, edit the demo.js file to set up the API key for the read-only account and configure the unity loader to load the selected model. This is the line UnityUtil.setAPIKey(‘yourapikey’).

  • I recommend choosing a federation where models can be changed underneath in the future, without having to redeploy the website. This is the line UnityUtil.loadModel(“teamspace”,”modelID”)
  • I also recommend commenting out the login function to stop the prompts from appearing.
  • You can enable mapping so that the model is placed in the context of the surrounding area. This requires a little translation from the 3drepo.io UI to the UnityUtils as it uses a structure of:

{
    angleFromNorth: num,
    elevation: num,
    surveyPoints: [{position: [x, z, -y], latLong: [lat,long]}]
}
  • To create that for your model, check out these guides for GIS Setup and Model Coordinates. Once that is done, you should end up with something like the below snippet:

    var mapSettings = {
        angleFromNorth: 1.49,
        elevation: 0,
        surveyPoints: [{position: [539314166.945,-1000,-179685118.11], latLong: 
[51.49895,0.0055]}]
    }


    UnityUtil.addMapSource("HERE")
    UnityUtil.addMapSource("HERE_TRAFFIC")
    UnityUtil.addMapSource("HERE_TRAFFIC_FLOW")
    var mapSettings = {
        angleFromNorth: 1.49,
        elevation: 0,
        surveyPoints: [{position: [539314166.945,-1000,-179685118.11], latLong: 
[51.49895,0.0055]}]
    }
    
    UnityUtil.mapInitialise(mapSettings)
    UnityUtil.mapStart()
  • You can then open this HTML file in your local browser and you should see the model begin to load the default view you set in 3D Repo along with the maps information.
  • Once that is working you can publish your static HTML to your website and you’re good to go.

Share this resource