3d web powered by NodeJS & AngularJS
- 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
Editor's Notes
- #3: If the world we live is 3D, why do we still leaving on a flat 2D web?
- #4: We can see it everywhere!
- #12: There are lots of 3D viewers available – especially if you only want to display OBJ files. I’ve selected 8 of the more popular (and more polished) tools to quickly show you today. Some I’ll spend more time on than others.