Integrate Autodesk Viewer with Vault
The viewer requires the 2D/3D model to be translated into SVF or SVF2 format for optimal viewing. This translation is efficiently handled by the Model Derivative service. Although Vault does not utilize the Model Derivative service for model translation, it still manages to support essential translation features.
For any model, the DWF or DWFx visualization attachment is generated during file check-in or through the job processor. The Vault server includes an embedded translator that converts DWF/DWFx files to the SVF format.
How to activate or deactivate creating .DWF during Check In to Vault
Retrieve visualization files (DWF, DWFx) for the 2D/3D model, Use the Get file version visualization attachments endpoint
Translate DWF, DWFx file to SVF format. Use the Get the LMV root file endpoint.
Prerequisites
- Vault Components: Familiarize yourself with different Vault components such as Client, Server, Job Processor, etc. Learn More
- Autodesk Viewer: Understand the Autodesk Viewer, a JavaScript library for viewing and interacting with design models on websites. Learn More
- Model Derivative APIs: Grasp the concepts of converting source design files into various formats compatible with the Viewer SDK. Learn More
Getting Started with Autodesk Viewer
Follow the steps below to display supported file types (DWF, DWFX, and PDF) in your web application using Autodesk Viewer. For the most up-to-date and detailed information, refer to the original documentation.
Step 1: Include Viewer JavaScript and CSS
Include the Autodesk Viewer JavaScript and CSS files in your HTML file:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Autodesk Viewer</title>
<link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/style.min.css?v=v7.*">
<script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/viewer3D.min.js?v=v7.*"></script>
</head>
<body>
<div id="viewerDiv" style="width: 800px; height: 600px;"></div>
<script src="viewer.js"></script>
</body>
</html>
Step 2: Initialize the Viewer
Create a JavaScript file (e.g., viewer.js
) and initialize the viewer:
var Autodesk = Autodesk || {};
Autodesk.Viewing = Autodesk.Viewing || {};
var viewer;
function initializeViewer() {
var options = {
env: 'AutodeskProduction',
// Refer to the notes below for the usage of accessToken and getAccessToken.
getAccessToken: function(onGetAccessToken) {
var accessToken = 'YOUR_ACCESS_TOKEN'; // Replace with your access token
var expireTimeSeconds = 3600;
onGetAccessToken(accessToken, expireTimeSeconds);
},
accessToken: 'YOUR_ACCESS_TOKEN'
};
Autodesk.Viewing.Initializer(options, function() {
var viewerDiv = document.getElementById('viewerDiv');
viewer = new Autodesk.Viewing.GuiViewer3D(viewerDiv);
var startedCode = viewer.start();
if (startedCode > 0) {
console.error('Failed to create a Viewer: WebGL not supported.');
return;
}
console.log('Initialization complete, loading a document.');
loadDocument();
});
}
Step 3: Load a Document
Define the loadDocument
function to load a document into the viewer:
function loadDocument() {
var documentUrl = '/file-versions/{id}/content'; // For PDF files
// or
// var documentUrl = '/file-versions/{id}/svf/bubble.json'; // For DWF/DWFX files
Autodesk.Viewing.Document.load(documentUrl, function(doc) {
var items = doc.getRoot().search({'type':'geometry'});
if (items.length === 0) {
console.error('Document contains no viewables.');
return;
}
viewer.loadDocumentNode(doc, items[0]);
}, function(errorMsg) {
console.error('Loading document failed: ' + errorMsg);
}, {
/*
1) This additional option allows you to override the access token for a specific document retrieved from another system.
2) The accessToken provided in Autodesk.Viewing.Initializer(options) will be ignored
*/
headers: {
'Authorization': 'Bearer ' + accessToken // Pass the access token in the request header
}
});
}
Step 4: Start the Viewer
Call the initializeViewer
function when the page loads:
document.addEventListener('DOMContentLoaded', function() {
initializeViewer();
});
Notes
- The
documentUrl
should be/file-versions/{id}/content
for PDF files and/file-versions/{id}/svf/bubble.json
for DWF/DWFX files. - The
env
variable in the configuration is set to AutodeskProduction to ensure the viewer includes the authorization header when making document requests. - The
accessToken
can be either a Vault Token or a 3-legged OAuth token. TheBearer
scheme should be removed before passing theaccessToken
. Refer Vault Data API Authentication. option.getAccessToken
: A function that provides an access token asynchronously. The function signature isgetAccessToken(onSuccess)
, whereonSuccess
is a callback that thegetAccessToken
function should invoke when a token is granted. The token is the first input parameter for theonSuccess
function, and the token expire time (in seconds) is the second input parameter. The viewer relies on bothgetAccessToken
and the expire time to automatically renew the token, so it is critical thatgetAccessToken
must be implemented as described.option.accessToken
: An access token. This is not needed whenoptions.getAccessToken
is provided. Pass only the token; theauth-scheme
should be removed.