Innovación Tecnologica de Diseño y 3D

Acerca de mi

Jaime Rosales

Sr. Technical Evangelist at Autodesk

@AfroJme

Quien es ?

3 ejemplos de diseño

Pedal Logic - ECO+

SmartFlower - Paneles Fotovoltaicos Inteligentes

Uncharted Play - Soccket

Diseño, un pilar para la educacion?

La familia de Software de 123D Apps

Web 3D

Jelly Fish Demo

3D Water Demo

Particles Demo

3D Kia motors Demo

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!

Compremos una silla Aeron...
https://360.autodesk.com/viewer

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
LMV Nav 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
Quick Start Guide

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