3d web powered by NodeJS & AngularJS

3d web powered by NodeJS & AngularJS

• 1.
  3D web poweredby Augusto Goncalves API Evangelist @ Autodesk @augustomaia
• 2.
  The web isflat! So is the Earth!
• 3.
  Why live ona flat-web? Can I fit on my car? Does it fit my room? What about the engine?
• 4.
  Enough! It’s time for3D And make it easy, please! And mobile! With support for my models!
• 5.
  With real-world information! Thereis the engine!
• 6.
  And information aboutthe objects! Yes, perfect fit!
• 7.
  The web isfull 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 isgetting onboard • http://customiser.pennyskateboards.com/us/ • https://human.biodigital.com/index.html • http://www.ford.com/cars/mustang/customizer
• 9.
  But what aboutdevelopers? (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 Fileformat Library Pure/raw
• 12.
  Give me somesamples! • 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 • Asusual: 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 somesample 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 atFort 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