3D Content on the Web

View Github Repository Open presentation in a new window

jaimerosales

See all presentation from jaimerosales

3D Content on the Web

0 0

trianglejs

Slides for Triangle JS Meetup

On Github jaimerosales / trianglejs

3D Content on the Web

About Me

Jaime Rosales

DevTech Engineer at Autodesk

@AfroJme

First apperance of 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 you 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

WebGL Cube

Are you sure you want to see this code??

Seriously last chance...

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

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

Links during presentation

3D Content on the Web