Upload
adam-nagy
View
590
Download
5
Embed Size (px)
Citation preview
PHP Hampshire – Portsmouth
Make the Web 3D
Adam NagySenior Developer EvangelistAutodesk@AdamTheNagy
PHP Hampshire – Portsmouth
PHP Hampshire – Portsmouth
2d and/or 3d
PHP Hampshire – Portsmouth
WebGL and three.js
PHP Hampshire – Portsmouth
Autodesk Large Model Viewer
Add 3D viewing to your web application
http://autode.sk/m3w
PHP Hampshire – Portsmouth
Autodesk View & Data API
PHP Hampshire – Portsmouth
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
PHP Hampshire – Portsmouth
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
PHP Hampshire – Portsmouth
Getting StartedServer side
PHP Hampshire – Portsmouth
http://developer.autodesk.com
Getting Started
PHP Hampshire – Portsmouth
PHP Hampshire – Portsmouth
Getting Started – Server/Management Workflow
PHP Hampshire – Portsmouth
Header Content-Type: application/x-www-form-urlencoded
Bodyclient_id=xxxxxxxxxxxx&client_secret=xxxxxxxxxxxx&grant_type=client_credentials
POST https://developer.api.autodesk.com/authentication/v1/authenticate
Step 2: Get your access token
PHP Hampshire – Portsmouth
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
PHP Hampshire – Portsmouth
Transient: persists for only 24 hours
Temporary: persists for 30 days
Persistent: persists until it’s deleted
Bucket policy
PHP Hampshire – Portsmouth
Header "Authorization: Bearer xxxxxxxxxxxxxxxx" "Content-Length: 308331" "Content-Type: application/octet-stream"
Body File content
PUT https://developer.api.autodesk.com/oss/v1/buckets/{bucketkey}/objects/{objectkey}
Step 4: Upload a file
PHP Hampshire – Portsmouth
Get the URN
URN = Base64 encoded id
Upload response
PHP Hampshire – Portsmouth
Header "Content-Type: application/json " "Authorization:Bearer xxxxxxxxxxxx“
Body "{\"urn\":\“{base64 encoded id in previous step}\"}“
POST https://developer.api.autodesk.com/viewingservice/v1/register
Step 5: Register your file for viewing
PHP Hampshire – Portsmouth
Header "Authorization: Bearer xxxxxxxxxxxx"
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
PHP Hampshire – Portsmouth
Header "Authorization: Bearer xxxxxxxxxxxx"
GET https://developer.api.autodesk.com/viewingservice/v1/thumbnails/{URN}
Thumbnail
PHP Hampshire – Portsmouth
http://fast-shelf-9177.herokuapp.com/
PHP Hampshire – Portsmouth
Getting StartedClient side
PHP Hampshire – Portsmouth
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
PHP Hampshire – Portsmouth
http://caniuse.com/#feat=webgl
The numbers in the boxes are the version numbers of given product
PHP Hampshire – Portsmouth
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
PHP Hampshire – Portsmouth
Add a html container<body onload="initialize()">
<div id="viewer"></div>
</body>
Must be a div
Load URN in JavaScript viewer
PHP Hampshire – Portsmouth
Initialize Viewer
Load URN in JavaScript 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) ; }) ;}
PHP Hampshire – Portsmouth
ExtendClient side API
PHP Hampshire – Portsmouth
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
PHP Hampshire – Portsmouth
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
PHP Hampshire – Portsmouth
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
PHP Hampshire – Portsmouth
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
PHP Hampshire – Portsmouth
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);});
PHP Hampshire – Portsmouth
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 tokenrouter.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;
PHP Hampshire – Portsmouth
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
PHP Hampshire – Portsmouth
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>
PHP Hampshire – Portsmouth
Step 5: Include required script/css dependencies
Add in the <head> section
<!-- jquery --><script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Viewer --><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"></script>
PHP Hampshire – Portsmouth
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(); });
PHP Hampshire – Portsmouth
Step 7: Run your server locally
Tidy things using proper folder hierarchy
Run node server.js from command line
PHP Hampshire – Portsmouth
Step 8: Connect to your local server
Using a WebGL-compatible browser
PHP Hampshire – Portsmouth
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);
PHP Hampshire – Portsmouth
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');
PHP Hampshire – Portsmouth
Resources
PHP Hampshire – Portsmouth
http://developer.autodesk.com/
Resource & Documents
PHP Hampshire – Portsmouth
GitHub repos
Resource & Documents
PHP Hampshire – Portsmouth
API Console: https://developer.autodesk.com/api-console
Test the API online
PHP Hampshire – Portsmouth
http://adndevblog.typepad.com/cloud_and_mobile/ http://adndevblog.typepad.com/cloud_and_mobile/2015/01/what-is-this-view-data-api-thing-a
nyway.html
Blog
PHP Hampshire – Portsmouth
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
PHP Hampshire – Portsmouth
Virtual reality
http://autode.sk/gcbv http://vr.autodesk.io
PHP Hampshire – Portsmouth