The web is being flat for long enough, it’s time for 3D! Powered by WebGL and Three.js, let’s navigate through some cool interactive 3D web experiences and, finally, learn how to share your own 3D designs with JavaScript & AngularJS front-end and NodeJS back-end. What it at https://www.youtube.com/watch?v=f_BvdgUSVWM

1. 3D web powered by
Augusto Goncalves
API Evangelist @ Autodesk
@augustomaia

2. The web is flat!
So is the Earth!

3. Why live on a flat-web?
Can I fit on
my car?
Does it fit my
room?
What about the
engine?

4. Enough!
It’s time for 3D
And make it easy, please!
And mobile!
With support for my models!

5. With real-world information!
There is the engine!

6. And information about the objects!
Yes, perfect fit!

7. The web is full of cool samples!
• http://madebyevan.com/webgl-water/
• http://www.iamnop.com/particles/
• http://www.visualiser.fr/Babylon/character/
• http://seemore.playcanvas.com/
• http://www.mountainsofmouthness.com/
• http://lights.helloenjoy.com/

8. The e-commerce is getting onboard
• http://customiser.pennyskateboards.com/us/
• https://human.biodigital.com/index.html
• http://www.ford.com/cars/mustang/customizer

9. But what about developers?
(repeat clapping hands!)
https://youtu.be/Vhh_GeBPOhs

10. Here it is!
• WebGL: HTML5 + JavaScript
• Compatible with most
browsers
• And supported on mobile

11. Choose your weapon
Easy
Customizable
File format
Library
Pure/raw

12. Give me some samples!
• Three.js http://threejs.org/
• Cl3ver https://www.cl3ver.com/
• Sketch fab https://sketchfab.com/
• Autodesk View & Data http://lmv.rocks/
Try Autodesk V&D

13. Autodesk View & Data API
• Back-end: REST API
• Upload
• Translation
• Storage
• Any language
(no WebGL equired)
• Many formats
• Front-end: JavaScript
• Three.js based
• Embed on any page
• Various APIs
IFC
OBJ
FBX
DXF
IGES
STEP
STL

14. Back-end: NodeJS
• As usual:
npm install view-and-data
(this package contains the REST API methods: upload, translate, etc.)
• Need a developer key & secret
http://developer.autodesk.com

15. Front-end: AngularJS
HTML5 + JavaScript
• The viewer goes here
<div id="viewer"></div>
• JavaScript
autodeskviewer.com/viewers/2.2/viewer3D.min.js
• CSS
developer.api.autodesk.com/viewingservice/v1/viewers/style.css

16. Give me some sample code!
• Check lot’s of samples at
https://github.com/Developer-Autodesk
• Gallery (NodeJS + AngularJS)
http://viewer.autodesk.io/node/gallery
Source: https://github.com/Developer-Autodesk/ng-gallery
• Get your key & secret
http://developer.autodesk.com

17. 17
June 15-16 at Fort Mason in San Francisco
Pre DevCon DevCon Post DevCon
June 13-14 June 15-16 June 17-19
Accelerator
June 20-24
Come Early Stay Late

18. Thank you!
@augustomaia
augusto.goncalves@autodesk.com
http://developer.autodesk.com