3d

Transcription

1 3d

2 Today the web is fairly flat Our goal is to bring 3D to the web!

3 3d web Examples

4 Autodesk Large Model Viewer

5 WebGL Easy? Not so much but very powerful, and lightweight Sample code from here: WebGL Lesson 4 with pyramid removed Tony Parisi Tip: get the reference card from here:

6 THREE.js Easier A bit easier than pure WebGL Sample code from here:

7 But what about this?

8 Or these?

9 WebGL Based tools and viewers Three.js Cl3ver Sketch fab Autodesk Large Model Viewer

10 What if 3D on the web was really EASY?

11 View and Data web API services Translation large models into lightweight web viewable data Examples: Large Revit or Inventor models Supports 70± formats including others Viewing Uses WebGL on back end Easily hosted in HTML 5 browsers and clients Searching Includes meta data Can be searched later Storage We store it

12 The Stack Server-Side REST API Upload Translation Storage Viewables stored in the cloud No WebGL knowledge needed Client-Side JavaScript API Viewing - THREE.js based Embed in Webpage Various JavaScript APIs

13 Server-side Workflow Register + create app Get access token Create bucket Upload file/object to bucket Request translation Access from client

14 Server-side Workflow A quick-start guide is provided

15 Client-Side JavaScript API reference the JS lib and style sheet make a Div tag with the viewer instance id token handler document properties create an instance of viewer

16 Client-Side JavaScript API On your page, reference the following: <link rel="stylesheet href=" type="text/css"> <script src=" </script>

17 Client-Side JavaScript API On your page, Create a <div> tag with viewer id: <div id="viewer"></div>

18 Client-Side JavaScript API Setup document and viewer instance 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(); loaddocument(viewer, options.document); });

19 Client-Side JavaScript API A note about the Token: function gettoken() { return The Token ; } You will need to write your own token service. The samples provide approaches.

20 Client-Side JavaScript API Load document / setup properties function loaddocument(viewer, documentid) { // Find the first 3d geometry and load that. Autodesk.Viewing.Document.load(documentId, function(doc) { var geometryitems = []; geometryitems = Autodesk.Viewing.Document.getSubItemsWithProperties(doc.getRootItem(), { 'type' : 'geometry', 'role' : '3d' }, true); if (geometryitems.length > 0) { viewer.load(doc.getviewablepath(geometryitems[0])); } }, function(errormsg) {// onerrorcallback alert("load Error: " + errormsg); }); }

21 Client-Side JavaScript API A sample is provided ~ 60 lines of JavaScript + HTML

22 Autodesk View and Data API one option for 3D on the web Free programming tools: try it out with your models:

23 Autodesk View and Data API additional resources tutorial style in addition to the other official resources Running instance of Debug tools General cloud blog from ADN perspective.