3D Content on the Web - View and Data API

Acerca de mi

Jaime Rosales

Developer Advocate at Autodesk

@AfroJme

Photoshop/Illustrator para diseñadores visuales

AutoCAD para diseñadores de interiores

Rhino/Solidworks/Fusion para diseñadores industriales

Revit para arquitectos

Tradicionalmente

El diseñador crea un modelo

lo envia a su cliente

El cliente necesitara bajar el software requerido para ver el modelo

Los resultados son de formatos exclusivos

Unos cuantos formatos Universales

Cual es el Problema?

  • Extremadamente "lossy"
  • A menudo pierden el Meta-data como sus medidas, cantidad, altura
  • Las imagenes y pdf se convierten en renders de 3D a 2D

WebGL

JavaScript API que permite a los navegadores web hacer render de 3D

No es W3C standard...

Pero todos los navegadores lo soportan

Es una tecnologia bastante dificil dominar

Autodesk ha creado un viewer en 3D/2D ...

Suben un archivo CAD

REST API

Vizualizamos en el navegador

JavaScript API

Es gratis!

Preferirian ver esto en su e-commerce website..

o esto?

Formatos Soportados

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

LMV Rocks demo

Ok, yo quiero un website asi, Como empiezo???

developer.autodesk.com

Tweet me @AfroJme

The Stack

Server-Side REST API

  • Upload del modelo
  • Traduccion
  • Almacenamiento

Client-Side JavaScript API

  • Vizualisacion - THREE.js
  • Embed en pagina web
  • Varias 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

Client-Side

JavaScript API

En su pagina

Hacemos referencia a las siguiente librerias de JavaScript:

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

Creamos in div con id "viewer"

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

Iniciamos el 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";
                            }

Es aconsejable escribir su propio servicio de Token

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