(This is a continuation from the previous post: Lab3 “Forge API Web Intro”)
In this lab, we make a basic viewer, which is based on Basic Viewer Step-by-Step Tutorial and is slightly modified to put it in the context of our lab and make it easier to built on top of what we have built in the previous lab.
Let’s take a look at them one by one.
viewer3D.min.js and three.min.js
The first two are the libraries that Autodesk provides. You can find the latest from the hosted location:
The first set of xxx.min.js is the version without any formatting, while the second, tree.js and viewer3D.js, are human-eyes friendly version.
To use them with our application, we include them in HTML page. e.g.,
here we included the style sheet css file for the viewer.
Typically, we use these files as is. Since it is open source, it is also possible to modify for your needs. You can download from the location mentioned above.
As of this writing, the latest version of the viewer is 3.3.5. For production usage, it is recommended to include the version number so that it won’t be affected by changes: e.g.,
If you omit the version number, it will pick up the latest.
This is the code based from the Basic Viewer Tutorial, which I have re-structured as an “utility” function for our minimum project. It assumes for a display of a single 3D model, such as Revit file, with the basic UI in the viewer. The code looks like below:
The above code defines a function called viewByTokenAndUrn(). It takes three arguments: 1) token, 2) urn of an uploaded model, and 3) div id of html element where the viewer to be embedded.
onDocumentLoadSuccess() defines the most of the processes once it successfully gets the document pointed by the given urn. This is where a view-able is selected and finally starts rendering a targeted model in the viewer.
Actual loading of a document happens in the callback defined for Autodesk.Viewing.Initializer(), which you see at the bottom of the code. Autodesk.Viewing.Initializer() takes the above onDocumentLoadSuccess() callback as the second argument.
We can include this file to your HTML page, e.g.,
Later on, when you are ready to explore more features, such as displaying 2D drawing, you can come back to this file and modify for your needs. For now, let’s move on and call this function from your web form.
Embedding the Viewer in a Web Form
In your web page, include style sheet for the viewer. I’m also using ajax library to make it easy to get a handle on an html element I’m interested in. For example:
Add the following scrip to include the necessary libraries and functions for the viewer:
here buttonViewClick() calls viewByTokenAndUrn() which we defined in viewerBasic.js. The first and second arguments of viewByTokenAndUrn() are token and urn. In our Intro project, we simply get necessary values from the text boxes of the web page that we have defined in the previous lab. “MyViewerDiv” is the id of div where we embed the viewer.
Finally, add a div section to embed the viewer, and name it “MyViewerDiv”. And add a button that triggers the viewing function, buttonViewClicked(). e.g.,
An example of final web page might look like this:
Tips: The REST call to translate a model for viewing will return the status OK. But the actual process may be still in progress. You can check the status by calling GET :urn/manifest. In the sample labs code, “Status” button is added to check the status of the translation. To give you an idea how long it takes, with my environment, rst_basic_sample_project.rvt (which comes with Revit install, 6.44 MB of size) takes about 3 min. rac_advanced_sample_project.rvt (13.4 MB) takes about 10 min.
Troubleshoot: When the model is not ready, errorCode:9 will be returned in the browser’s console. If this happens, wait a little bit, and try again. If you see errorCode:4, a problem might be with getting valid access token. Make sure you have the scope defined correctly. (Error code is defined in viewer3D.js. If you are getting a different error code, try searching a keyword “ErrorInfoData”.)
You can get the source code of Lab4 from here: Lab4
This concludes the first tour of Forge API Intro Labs. I hope you will find it helpful to get started with the Forge API.
Update 2/8/2018: I’ve migrated one more lab’s exercise showing how to access and search objects properties using the viewer API. Please take a look at this post if you are interested in continuing with the tutorial: Lab5 Forge API Intro – Get Properties & Search