make the web 3d

PHP Hampshire – Portsmouth

Make the Web 3D

Adam NagySenior Developer EvangelistAutodesk@AdamTheNagy


2d and/or 3d


WebGL and three.js


Autodesk Large Model Viewer

Add 3D viewing to your web application

http://autode.sk/m3w



https://s3.amazonaws.com/FastViewer/index.html?file=frontloader/0.svf

https://s3.amazonaws.com/FastViewer/index.html?file=Waltham/0.svf



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 StartedServer side


http://developer.autodesk.com

Getting Started

http://developer.autodesk.com/


Getting Started – Server/Management Workflow


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

https://developer.api.autodesk.com/authentication/v1/authenticate


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

https://developer.api.autodesk.com/oss/v1/buckets


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/{bucketkey}/objects/{objectkey}

Step 4: Upload a file

https://developer.api.autodesk.com/oss/v1/buckets/%7Bbucketkey%7D/objects/%7Bobjectkey%7D




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/register

Step 5: Register your file for viewing

https://developer.api.autodesk.com/viewingservice/v1/register




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

https://developer.api.autodesk.com/viewingservice/v1/%7BURN%7D




Header "Authorization: Bearer xxxxxxxxxxxx"

GET https://developer.api.autodesk.com/viewingservice/v1/thumbnails/{URN}

Thumbnail

https://developer.api.autodesk.com/viewingservice/v1/thumbnails/%7BURN%7D




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



Getting StartedClient 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) ; }) ;}


ExtendClient 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

http://nodejs.org/download

http://nodejs.org/download

http://brackets.io/

https://www.jetbrains.com/webstorm



https://developer.autodesk.com/

https://developer.autodesk.com/


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 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;


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"></script>


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



Resource & Documents




http://autodesk360.com

http://autodesk360.com/


GitHub repos

Resource & Documents


API Console: https://developer.autodesk.com/api-console

Test the API online

https://developer.autodesk.com/api-console




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

http://adndevblog.typepad.com/cloud_and_mobile/

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

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


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

http://through-the-interface.typepad.com/through_the_interface/2014/05/a-sneak-peek-at-the-new-autodesk-360-viewer.html



https://www.facebook.com/a360viewer



http://adndevblog.typepad.com/cloud_and_mobile/stephens-test-page.html

http://adndevblog.typepad.com/cloud_and_mobile/stephens-test-page.html

http://gallery.autodesk.io/

http://gallery.autodesk.io/

http://sapdemo.autodesk.io/



https://bldng360.nl/


Virtual reality

http://autode.sk/gcbv http://vr.autodesk.io

http://autode.sk/gcbv

http://vr.autodesk.io/


http://www.3dwebfest.com

http://www.3dwebfest.com/

make the web 3d

Software