View and Data API
Shiya Luo
Developer Evangelist @ Autodesk
@ShiyaLuoI'm going to tell a story that's been haunting the design industry for years.
Buying an Aeron chair...
a mess since the 80s.
Runs on most devices
No need for plug-in or install
Cheap/free
Has direct access to GPU (3D rendering)
JavaScript API that lets browsers render 3D
It's not a W3C standard... yet
but every browser supports it
It's a difficult technology to master
Upload your CAD file
REST API
View on a browser
JavaScript API
Reference the following JavaScript Libraries:
<link rel="stylesheet" href="https://viewing.api.autodesk.com/viewingservice/v1/viewers/style.css" type="text/css">
<script src="https://viewing.api.autodesk.com/viewingservice/v1/viewers/viewer3D.min.js"></script>
Create a div with id "viewer"
<div id="viewer"></div>
Initialize with JavaScript
function initialize() {
var options = {
'document' : 'urn:dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6bXlidWNrZXQvc2t5c2NwcjEuM2Rz',
'env':'AutodeskProduction',
'getAccessToken': getToken,
'refreshToken': getToken,
};
var viewerElement = document.getElementById('viewer');
var viewer = new Autodesk.Viewing.Viewer3D(viewerElement, {});
Autodesk.Viewing.Initializer(options,function() {
viewer.initialize();
loadDocument(viewer, options.document);
});
}
function getToken() {
return "GX6OONHlQ9qoVaCSmBqJvqPFUT5i";
}
You should write your own token service.
function loadDocument(viewer, documentId) {
// Find the first 3d geometry and load that.
Autodesk.Viewing.Document.load(documentId, function(doc) {
var geometryItems = [];
geometryItems = Autodesk.Viewing.Document.getSubItemsWithProperties(doc.getRootItem(), {
'type' : 'geometry',
'role' : '3d'
}, true);
if (geometryItems.length > 0) {
viewer.load(doc.getViewablePath(geometryItems[0]));
}
}, function(errorMsg) {// onErrorCallback
alert("Load Error: " + errorMsg);
});
}
The minimal sample code can be found on GitHub https://github.com/Developer-Autodesk/View-and-Data-Barebone
It's less than 60 lines of JavaScript + HTML