3D Web powered by..

View Github Repository Open presentation in a new window

jaimerosales

See all presentation from jaimerosales

3D Web powered by..

1 0

jsconf-budapest-workshop

Presentation for JS Conf Budapest Workshop on Three.js Autodesk Viewer API

On Github jaimerosales / jsconf-budapest-workshop

View and Data API

Jaime Rosales

Developer Advocate at Autodesk

@AfroJme

Adam Nagy

Developer Advocate at Autodesk

@AdamTheNagy

Sorry B.O.B

My First experiece with 3D on the Web

2D vs 3D

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

Or go find us @AfroJme - @AdamTheNagy

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

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.

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

More links about the API

Ok, Let's Start with our 3D web

Tutorial How to get Started