Make the Web 3D

PHP Hampshire – Portsmouth
Make the Web 3D
Adam Nagy
Senior Developer Evangelist
Autodesk
@AdamTheNagy

2d and/or 3d

WebGL and three.js

Autodesk Large Model Viewer
Add 3D viewing to your web application
http://autode.sk/m3w

Autodesk View & Data API

 Server & management API
 Upload and Translate files
 Access rights
 oAuth 2.0 - REST API
 WEB Client API
 Viewing technology based on THREE.js
 Embed and control the viewer into HTML5 applications
 Access document, manipulate objects, camera, …
 JavaScript API
2 API available

 ipt, neu, stla, stl, jt, skp, prt, dwf, sldasm,
step, dwg, zip, nwc, model, sim, stp, ste,
f3d, iges, dwt, catproduct, igs, sldprt, cgr,
3dm, sab, obj, cam360, exp, wire, ige,
rcp, dae, x_b, 3ds, rvt, g, sim360, iam,
asm, dlv3, x_t, session, xas, xpr, catpart,
stlb, nwd, sat, fbx, smb, smt, dwfx.
 More coming …
Supported formats

Getting Started
Server side

 http://developer.autodesk.com
Getting Started

Getting Started – Server/Management Workflow

 Header
Content-Type: application/x-www-form-urlencoded
 Body
client_id=xxxxxxxxxxxx
&client_secret=xxxxxxxxxxxx
&grant_type=client_credentials
 POST https://developer.api.autodesk.com/authentication/v1/authenticate
Step 2: Get your access token

 Header
 "Content-Type: application/json"
 "Authorization: Bearer xxxxxxxxxxxx"
 Body '{"bucketKey":"mybucket","policy":"transient"}'
 POST https://developer.api.autodesk.com/oss/v1/buckets
Step 3: Create a bucket

 Transient:
persists for only 24 hours
 Temporary:
persists for 30 days
 Persistent:
persists until it’s deleted
Bucket policy

 Header
 "Authorization: Bearer xxxxxxxxxxxxxxxx"
 "Content-Length: 308331"
 "Content-Type: application/octet-stream"
 Body
 File content
 PUT
https://developer.api.autodesk.com/oss/v1/buckets/{buc
ketkey}/objects/{objectkey}
Step 4: Upload a file

 Get the URN
 URN = Base64 encoded id
Upload response

 Header
 "Content-Type: application/json "
 "Authorization:Bearer xxxxxxxxxxxx“
 Body
 "{"urn":“{base64 encoded id in previous step}"}“
 POST
https://developer.api.autodesk.com/viewingservice/v1/r
egister
Step 5: Register your file for viewing

 Header
 GET https://developer.api.autodesk.com/viewingservice/v1/{URN}
 Note that even if only some parts have a status of
“complete”, you can still start viewing the object in the
viewer.
Check progress

 Header
 GET
https://developer.api.autodesk.com/viewingservice/v1/t
humbnails/{URN}
Thumbnail

http://fast-shelf-9177.herokuapp.com/

Getting Started
Client side

 The A360 Viewer requires a WebGL canvas compatible
browser, such as:
 Chrome 18.0+
 Opera 15.0+
 Firefox 4.0+
 Safari 8.0+
 Internet Explorer 11.0+
 iOS 8.0 started supporting it too
Compatibility

http://caniuse.com/#feat=webgl
The numbers in the boxes are the version numbers of given product

 Create a html5 page or web application
 Add reference to CSS & JavaScript
<link rel="stylesheet"
href="https://developer.api.autodesk.com/viewingservice/v1/viewers
/style.css" type="text/css">
<script
src="https://developer.api.autodesk.com/viewingservice/v1/viewers/
viewer3D.min.js"></script>
Load URN in JavaScript viewer

 Add a html container
<body onload="initialize()">
<div id="viewer"></div>
</body>
 Must be a div

 Initialize Viewer
function initialize () {
var options = { "document" : "urn:XXXXXXXXXX“ } ;
var viewerElement = document.getElementById ("viewer") ;
var viewer = new Autodesk.Viewing.Viewer3D (viewerElement, {}) ;
viewer.initialize () ;
Autodesk.Viewing.Initializer (options, function () {
loadDocument (
viewer,
getURLParameterByName ("accessToken"),
options.document) ;
}) ;
}

Extend
Client side API

 Model hierarchy
 Metadata / Properties
 Events
 Camera / Zoom / Navigation
 Access to geometry, textures, …
 …
 http://developer.api.autodesk.com/documentation/v1/viewers/index.html
Client side API

 Following tutorial uses Node.js as the server side
technology, but it could be anything else
 You’ll need the urn/id of a file uploaded to the Autodesk
server - e.g. by using http://fast-shelf-9177.herokuapp.com/
Step-by-step tutorial

 Install Node.js on your platform:
 http://nodejs.org/download
 Grab an HTML/JavaScript IDE:
 http://brackets.io - FREE
 Some other non-free editors:
 Visual Studio
 https://www.jetbrains.com/webstorm
 Get cloud credentials for View & Data API
 https://developer.autodesk.com
Pre-requisites

 Pick a model saved in one of the supported format by
the View & Data API
 Create a bucket, upload model and start translation
 This step can be achieved using existing samples
 Once your model is successfully translated, grab its
URN
Step 1: Upload a model

Step 2: Create a node.js server
 Create server.js script file:
var api = require('./routes/api');
var express = require('express');
var app = express();
app.use('/node/basic', express.static(__dirname + '/www/views'));
app.use('/node/basic/api', api);
app.set('port', process.env.PORT || 3000);
var server = app.listen(app.get('port'), function() {
console.log('Server listening on port ' +
server.address().port);
});

Step 3: Add a REST API to your server
 Create api.js script file:
var express = require('express');
var request = require('request');
var router = express.Router();
// Generates access token
router.get('/token', function (req, res) {
var params = {
client_id: <your client id>,
client_secret: <your client secret>,
grant_type: 'client_credentials'
}
request.post('https://developer.api.autodesk.com/authentication/v1/authenticate',
{ form: params },
function (error, response, body) {
if (!error && response.statusCode == 200) {
var authResponse = JSON.parse(body);
res.send(authResponse.access_token);
}
});
});
module.exports = router;

Step 4: Resolve package dependencies
 Create package.json file:
{
"name": “DevDaysViewer",
"version": “1.0.0",
"dependencies": {
"express": "*",
"request": "*"
}
}
 Run npm install in the command line

Step 5: Add an HTML page
 Create index.html file:
<html>
<head>
<title>ADN DevDays Viewer</title>
<script>
</script>
</head>
<body style="margin:0">
<div id="viewerDiv">
</div>
</body>
</html>

Step 5: Include required script/css dependencies
 Add in the <head> section

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link type="text/css" rel="stylesheet"
href="https://viewing.api.autodesk.com/viewingservice/v1/viewers/style.css"/>
<script
src="https://developer.api.autodesk.com/viewingservice/v1/viewers/viewer3D.min.js"></sc
ript>

Step 6: Add some JavaScript code
 Add in the <script> section
$(document).ready(function () {
var getToken = function() {
var xhr = new XMLHttpRequest();
xhr.open("GET", 'http://' + window.location.host + '/api/token', false);
xhr.send(null);
return xhr.responseText;
}
function initializeViewer(containerId, documentId, role) {
var viewerContainer = document.getElementById(containerId);
var viewer = new Autodesk.Viewing.Private.GuiViewer3D(
viewerContainer);
viewer.start();
Autodesk.Viewing.Document.load(documentId,
function (document) {
var rootItem = document.getRootItem();
var geometryItems =
Autodesk.Viewing.Document.getSubItemsWithProperties(
rootItem,
{ 'type': 'geometry', 'role': role },
true);
viewer.load(document.getViewablePath(geometryItems[0]));
},
// onErrorCallback
function (msg) {
console.log("Error loading document: " + msg);
}
);
}
function initialize() {
var options = {
env: "AutodeskProduction",
getAccessToken: getToken,
refreshToken: getToken
};
Autodesk.Viewing.Initializer(options, function () {
initializeViewer('viewerDiv', urn, '3d');
});
}
initialize();
});

Step 7: Run your server locally
 Tidy things using proper folder hierarchy
 Run node server.js from command line

Step 8: Connect to your local server
 Using a WebGL-compatible browser

Step 9: Create a viewer extension
 Create an extension script:
 Company.Viewing.Extension.MyFirstExtension.js
AutodeskNamespace("Autodesk.ADN.Viewing.Extension");
Autodesk.ADN.Viewing.Extension.Basic = function (viewer, options) {
Autodesk.Viewing.Extension.call(this, viewer, options);
_self = this;
_self.load = function () {
alert('Autodesk.ADN.Viewing.Extension.Basic loaded');
return true;
};
_self.unload = function () {
console.log('Autodesk.ADN.Viewing.Extension.Basic unloaded');
return true;
};
};
Autodesk.ADN.Viewing.Extension.Basic.prototype =
Object.create(Autodesk.Viewing.Extension.prototype);
Autodesk.ADN.Viewing.Extension.Basic.prototype.constructor =
Autodesk.ADN.Viewing.Extension.Basic;
Autodesk.Viewing.theExtensionManager.registerExtension(
'Autodesk.ADN.Viewing.Extension.Basic',
Autodesk.ADN.Viewing.Extension.Basic);

Step 10: Load your extension in the viewer
function initializeViewer(containerId, documentId, role) {
var viewerContainer = document.getElementById(containerId);
var viewer = new Autodesk.Viewing.Private.GuiViewer3D(
viewerContainer);
viewer.start();
viewer.loadExtension('Autodesk.ADN.Viewing.Extension.Basic');

Resources

 http://developer.autodesk.com/
Resource & Documents

http://autodesk360.com

 GitHub repos
Resource & Documents

 API Console: https://developer.autodesk.com/api-console
Test the API online

 http://adndevblog.typepad.com/cloud_and_mobile/
 http://adndevblog.typepad.com/cloud_and_mobile/2015/01/what-is-this-view-data-api-thing-
anyway.html
Blog

 Blog embedding:
http://through-the-interface.typepad.com/through_the_interface/2014/05/a-sneak-peek-at-the-new-
autodesk-360-viewer.html
 Facebook: https://www.facebook.com/a360viewer
 TypePad: http://adndevblog.typepad.com/cloud_and_mobile/stephens-test-page.html
 Gallery: http://gallery.autodesk.io
 Database Integration: http://sapdemo.autodesk.io
 3rd party: https://bldng360.nl
Demos

Virtual reality
 http://autode.sk/gcbv
 http://vr.autodesk.io

https://bldng360.nl/

http://www.3dwebfest.com

Make the Web 3D

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Make the Web 3D (20)

Recently uploaded (20)

Make the Web 3D