make the web 3d
TRANSCRIPT
![Page 1: Make the Web 3D](https://reader035.vdocuments.mx/reader035/viewer/2022062514/55b3924fbb61eb6a3a8b47ae/html5/thumbnails/1.jpg)
PHP Hampshire – Portsmouth
Make the Web 3D
Adam NagySenior Developer EvangelistAutodesk@AdamTheNagy
![Page 2: Make the Web 3D](https://reader035.vdocuments.mx/reader035/viewer/2022062514/55b3924fbb61eb6a3a8b47ae/html5/thumbnails/2.jpg)
PHP Hampshire – Portsmouth
![Page 3: Make the Web 3D](https://reader035.vdocuments.mx/reader035/viewer/2022062514/55b3924fbb61eb6a3a8b47ae/html5/thumbnails/3.jpg)
PHP Hampshire – Portsmouth
2d and/or 3d
![Page 4: Make the Web 3D](https://reader035.vdocuments.mx/reader035/viewer/2022062514/55b3924fbb61eb6a3a8b47ae/html5/thumbnails/4.jpg)
PHP Hampshire – Portsmouth
WebGL and three.js
![Page 5: Make the Web 3D](https://reader035.vdocuments.mx/reader035/viewer/2022062514/55b3924fbb61eb6a3a8b47ae/html5/thumbnails/5.jpg)
PHP Hampshire – Portsmouth
Autodesk Large Model Viewer
Add 3D viewing to your web application
http://autode.sk/m3w
![Page 6: Make the Web 3D](https://reader035.vdocuments.mx/reader035/viewer/2022062514/55b3924fbb61eb6a3a8b47ae/html5/thumbnails/6.jpg)
PHP Hampshire – Portsmouth
Autodesk View & Data API
![Page 7: Make the Web 3D](https://reader035.vdocuments.mx/reader035/viewer/2022062514/55b3924fbb61eb6a3a8b47ae/html5/thumbnails/7.jpg)
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
![Page 8: Make the Web 3D](https://reader035.vdocuments.mx/reader035/viewer/2022062514/55b3924fbb61eb6a3a8b47ae/html5/thumbnails/8.jpg)
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
![Page 9: Make the Web 3D](https://reader035.vdocuments.mx/reader035/viewer/2022062514/55b3924fbb61eb6a3a8b47ae/html5/thumbnails/9.jpg)
PHP Hampshire – Portsmouth
Getting StartedServer side
![Page 10: Make the Web 3D](https://reader035.vdocuments.mx/reader035/viewer/2022062514/55b3924fbb61eb6a3a8b47ae/html5/thumbnails/10.jpg)
PHP Hampshire – Portsmouth
http://developer.autodesk.com
Getting Started
![Page 11: Make the Web 3D](https://reader035.vdocuments.mx/reader035/viewer/2022062514/55b3924fbb61eb6a3a8b47ae/html5/thumbnails/11.jpg)
PHP Hampshire – Portsmouth
![Page 12: Make the Web 3D](https://reader035.vdocuments.mx/reader035/viewer/2022062514/55b3924fbb61eb6a3a8b47ae/html5/thumbnails/12.jpg)
PHP Hampshire – Portsmouth
Getting Started – Server/Management Workflow
![Page 13: Make the Web 3D](https://reader035.vdocuments.mx/reader035/viewer/2022062514/55b3924fbb61eb6a3a8b47ae/html5/thumbnails/13.jpg)
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
![Page 14: Make the Web 3D](https://reader035.vdocuments.mx/reader035/viewer/2022062514/55b3924fbb61eb6a3a8b47ae/html5/thumbnails/14.jpg)
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
![Page 15: Make the Web 3D](https://reader035.vdocuments.mx/reader035/viewer/2022062514/55b3924fbb61eb6a3a8b47ae/html5/thumbnails/15.jpg)
PHP Hampshire – Portsmouth
Transient: persists for only 24 hours
Temporary: persists for 30 days
Persistent: persists until it’s deleted
Bucket policy
![Page 16: Make the Web 3D](https://reader035.vdocuments.mx/reader035/viewer/2022062514/55b3924fbb61eb6a3a8b47ae/html5/thumbnails/16.jpg)
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
![Page 17: Make the Web 3D](https://reader035.vdocuments.mx/reader035/viewer/2022062514/55b3924fbb61eb6a3a8b47ae/html5/thumbnails/17.jpg)
PHP Hampshire – Portsmouth
Get the URN
URN = Base64 encoded id
Upload response
![Page 18: Make the Web 3D](https://reader035.vdocuments.mx/reader035/viewer/2022062514/55b3924fbb61eb6a3a8b47ae/html5/thumbnails/18.jpg)
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
![Page 19: Make the Web 3D](https://reader035.vdocuments.mx/reader035/viewer/2022062514/55b3924fbb61eb6a3a8b47ae/html5/thumbnails/19.jpg)
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
![Page 20: Make the Web 3D](https://reader035.vdocuments.mx/reader035/viewer/2022062514/55b3924fbb61eb6a3a8b47ae/html5/thumbnails/20.jpg)
PHP Hampshire – Portsmouth
Header "Authorization: Bearer xxxxxxxxxxxx"
GET https://developer.api.autodesk.com/viewingservice/v1/thumbnails/{URN}
Thumbnail
![Page 21: Make the Web 3D](https://reader035.vdocuments.mx/reader035/viewer/2022062514/55b3924fbb61eb6a3a8b47ae/html5/thumbnails/21.jpg)
PHP Hampshire – Portsmouth
http://fast-shelf-9177.herokuapp.com/
![Page 22: Make the Web 3D](https://reader035.vdocuments.mx/reader035/viewer/2022062514/55b3924fbb61eb6a3a8b47ae/html5/thumbnails/22.jpg)
PHP Hampshire – Portsmouth
Getting StartedClient side
![Page 23: Make the Web 3D](https://reader035.vdocuments.mx/reader035/viewer/2022062514/55b3924fbb61eb6a3a8b47ae/html5/thumbnails/23.jpg)
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
![Page 24: Make the Web 3D](https://reader035.vdocuments.mx/reader035/viewer/2022062514/55b3924fbb61eb6a3a8b47ae/html5/thumbnails/24.jpg)
PHP Hampshire – Portsmouth
http://caniuse.com/#feat=webgl
The numbers in the boxes are the version numbers of given product
![Page 25: Make the Web 3D](https://reader035.vdocuments.mx/reader035/viewer/2022062514/55b3924fbb61eb6a3a8b47ae/html5/thumbnails/25.jpg)
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
![Page 26: Make the Web 3D](https://reader035.vdocuments.mx/reader035/viewer/2022062514/55b3924fbb61eb6a3a8b47ae/html5/thumbnails/26.jpg)
PHP Hampshire – Portsmouth
Add a html container<body onload="initialize()">
<div id="viewer"></div>
</body>
Must be a div
Load URN in JavaScript viewer
![Page 27: Make the Web 3D](https://reader035.vdocuments.mx/reader035/viewer/2022062514/55b3924fbb61eb6a3a8b47ae/html5/thumbnails/27.jpg)
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) ; }) ;}
![Page 28: Make the Web 3D](https://reader035.vdocuments.mx/reader035/viewer/2022062514/55b3924fbb61eb6a3a8b47ae/html5/thumbnails/28.jpg)
PHP Hampshire – Portsmouth
ExtendClient side API
![Page 29: Make the Web 3D](https://reader035.vdocuments.mx/reader035/viewer/2022062514/55b3924fbb61eb6a3a8b47ae/html5/thumbnails/29.jpg)
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
![Page 30: Make the Web 3D](https://reader035.vdocuments.mx/reader035/viewer/2022062514/55b3924fbb61eb6a3a8b47ae/html5/thumbnails/30.jpg)
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
![Page 31: Make the Web 3D](https://reader035.vdocuments.mx/reader035/viewer/2022062514/55b3924fbb61eb6a3a8b47ae/html5/thumbnails/31.jpg)
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
![Page 32: Make the Web 3D](https://reader035.vdocuments.mx/reader035/viewer/2022062514/55b3924fbb61eb6a3a8b47ae/html5/thumbnails/32.jpg)
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
![Page 33: Make the Web 3D](https://reader035.vdocuments.mx/reader035/viewer/2022062514/55b3924fbb61eb6a3a8b47ae/html5/thumbnails/33.jpg)
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);});
![Page 34: Make the Web 3D](https://reader035.vdocuments.mx/reader035/viewer/2022062514/55b3924fbb61eb6a3a8b47ae/html5/thumbnails/34.jpg)
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;
![Page 35: Make the Web 3D](https://reader035.vdocuments.mx/reader035/viewer/2022062514/55b3924fbb61eb6a3a8b47ae/html5/thumbnails/35.jpg)
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
![Page 36: Make the Web 3D](https://reader035.vdocuments.mx/reader035/viewer/2022062514/55b3924fbb61eb6a3a8b47ae/html5/thumbnails/36.jpg)
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>
![Page 37: Make the Web 3D](https://reader035.vdocuments.mx/reader035/viewer/2022062514/55b3924fbb61eb6a3a8b47ae/html5/thumbnails/37.jpg)
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>
![Page 38: Make the Web 3D](https://reader035.vdocuments.mx/reader035/viewer/2022062514/55b3924fbb61eb6a3a8b47ae/html5/thumbnails/38.jpg)
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(); });
![Page 39: Make the Web 3D](https://reader035.vdocuments.mx/reader035/viewer/2022062514/55b3924fbb61eb6a3a8b47ae/html5/thumbnails/39.jpg)
PHP Hampshire – Portsmouth
Step 7: Run your server locally
Tidy things using proper folder hierarchy
Run node server.js from command line
![Page 40: Make the Web 3D](https://reader035.vdocuments.mx/reader035/viewer/2022062514/55b3924fbb61eb6a3a8b47ae/html5/thumbnails/40.jpg)
PHP Hampshire – Portsmouth
Step 8: Connect to your local server
Using a WebGL-compatible browser
![Page 41: Make the Web 3D](https://reader035.vdocuments.mx/reader035/viewer/2022062514/55b3924fbb61eb6a3a8b47ae/html5/thumbnails/41.jpg)
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);
![Page 42: Make the Web 3D](https://reader035.vdocuments.mx/reader035/viewer/2022062514/55b3924fbb61eb6a3a8b47ae/html5/thumbnails/42.jpg)
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');
![Page 43: Make the Web 3D](https://reader035.vdocuments.mx/reader035/viewer/2022062514/55b3924fbb61eb6a3a8b47ae/html5/thumbnails/43.jpg)
PHP Hampshire – Portsmouth
Resources
![Page 44: Make the Web 3D](https://reader035.vdocuments.mx/reader035/viewer/2022062514/55b3924fbb61eb6a3a8b47ae/html5/thumbnails/44.jpg)
PHP Hampshire – Portsmouth
http://developer.autodesk.com/
Resource & Documents
![Page 46: Make the Web 3D](https://reader035.vdocuments.mx/reader035/viewer/2022062514/55b3924fbb61eb6a3a8b47ae/html5/thumbnails/46.jpg)
PHP Hampshire – Portsmouth
GitHub repos
Resource & Documents
![Page 47: Make the Web 3D](https://reader035.vdocuments.mx/reader035/viewer/2022062514/55b3924fbb61eb6a3a8b47ae/html5/thumbnails/47.jpg)
PHP Hampshire – Portsmouth
API Console: https://developer.autodesk.com/api-console
Test the API online
![Page 48: Make the Web 3D](https://reader035.vdocuments.mx/reader035/viewer/2022062514/55b3924fbb61eb6a3a8b47ae/html5/thumbnails/48.jpg)
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
![Page 49: Make the Web 3D](https://reader035.vdocuments.mx/reader035/viewer/2022062514/55b3924fbb61eb6a3a8b47ae/html5/thumbnails/49.jpg)
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
![Page 50: Make the Web 3D](https://reader035.vdocuments.mx/reader035/viewer/2022062514/55b3924fbb61eb6a3a8b47ae/html5/thumbnails/50.jpg)
PHP Hampshire – Portsmouth
Virtual reality
http://autode.sk/gcbv http://vr.autodesk.io
![Page 53: Make the Web 3D](https://reader035.vdocuments.mx/reader035/viewer/2022062514/55b3924fbb61eb6a3a8b47ae/html5/thumbnails/53.jpg)
PHP Hampshire – Portsmouth