3D Web powered by..

Jaime Rosales

Developer Advocate at Autodesk

@AfroJme

Sorry B.O.B

My First experiece with 3D on the Web

Photoshop/Illustrator for visual designers

AutoCAD for interior designers

Rhino/Solidworks/Fusion for industrial designer

Revit for architects

Traditionally

The designer makes up a design

they send it over to their client

client needs to download a software to view the file

Outputs are proprietary formats

Universal formats out there

The problem?

  • Extremely lossy
  • Often lose meta data like quantity, width, height
  • Rendered images and pdf are 3D into 2D

Are we from the Past?

WebGL

JavaScript API that lets browsers render 3D

It's not a W3C standard...

but every browser supports it

It's a difficult technology to master

Three.JS

Yes, it is simpler to create the same cube with less code.

Simple Three.js Cube

Autodesk came out with a 3D/2D viewer...

Upload your CAD file

REST API

View on a browser

JavaScript API

It's free!

Would you rather see this on your e-commerce website..

or this?

Supported File Formats

ipt, neu, stla, stl, xlsx, jt, jpg, skp, prt, dwf, xls, png, sldasm, step, dwg, zip, nwc, model, sim, stp, ste, f3d, pdf, iges, dwt, catproduct, csv, igs, sldprt, cgr, 3dm, sab, obj, pptx, cam360, jpeg, bmp, gbxml, exp, ppt, doc, wire, ige, rcp, txt, dae, x_b, 3ds, rtf, rvt, g, sim360, iam, asm, dlv3, x_t, pps, session, xas, xpr, docx, catpart, stlb, tiff, nwd, sat, fbx, smb, smt, ifc, dwfx, tif

Yes I'm sold, How do I get Started???

developer.autodesk.com

Tweet me @AfroJme

The Stack

Server-Side REST API

  • Upload
  • Translation
  • Storage

Client-Side JavaScript API

  • Viewing - THREE.js
  • Embed in Webpage
  • Various JavaScript APIs

Server-Side

REST API

Server-side Workflow

  • Register + create app
  • Get access token
  • Create bucket
  • Upload file/object to bucket
  • Request translation
  • Access from client
$ npm install view-and-data

Request your own API keys from our developer portal.

Replace the credentials placeholders with your own keys in `config-view-and-data.js` or use ENV variables:

Replace

ConsumerKey: process.env.CONSUMERKEY || 'replace with your consumer key>',

ConsumerSecret: process.env.CONSUMERSECRET || 'replace with your consumer secret>'

Set up the default bucket name defined by the `defaultBucketKey` variable.

Copy the file `config-view-and-data.js` to your server config directory.

Client-Side

JavaScript API

On your page

Reference the following JavaScript Libraries:

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

Create a div with id "viewer"

<div id="viewer"></div>

Initialize with JavaScript


                function initialize() {
                var options = {
                'document' : 'urn:(Your own URN)',
                '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);
                });
                }

token

function getToken() {
                            return "GX6OONHlQ9qoVaCSmBqJvqPFUT5i";
                            }

You should write your own token service or use our NPM

loadDocument


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

Resources

Links during presentation