View and data api

in 10 mins

About Me

Shiya Luo

Developer Evangelist @ Autodesk

@ShiyaLuo

What does View and Data API do?

Desktop
Desktop
See it live
Drag & Drop App

It's easy and powerful

  • Supports over 70 formats(dwg, rvt, obj, stl, etc.)
  • Viewables stored in the cloud
  • No WebGL knowledge needed

The Stack

Server-Side REST API

  • Upload
  • Translation
  • Storage

Client-Side JavaScript API

  • Viewing - THREE.js
  • Embed in Webpage
  • Various JavaScript APIs

Server-Side

REST API

Server-side Workflow

  • Register + create app
  • Get access token
  • Create bucket
  • Upload file/object to bucket
  • Request translation
  • Access from client
Quick Start Guide

Client-Side

JavaScript API

On your page

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();
        viewer.load(options.document);
    });
}

token

function getToken() {
    return "GX6OONHlQ9qoVaCSmBqJvqPFUT5i";
}

You should write your own token service.

To do stuff in the viewer

viewer.addEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT, function () {
      // your code here, e.g. viewer.setLightPreset(2);
});

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

Resources