3d web powered by nodejs & angularjs
TRANSCRIPT
3D web powered by
Augusto GoncalvesAPI Evangelist @ Autodesk
@augustomaia
The web is flat!So is the Earth!
Why live on a flat-web?Can I fit on
my car?
Does it fit my room?
What about the engine?
Enough! It’s time for 3DAnd make it easy, please!And mobile!With support for my models!
With real-world information!
There is the engine!
And information about the objects!
Yes, perfect fit!
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/
The e-commerce is getting onboard• http://customiser.pennyskateboards.com/us/ • https://human.biodigital.com/index.html • http://www.ford.com/cars/mustang/customizer
But what about developers?(repeat clapping hands!)
https://youtu.be/Vhh_GeBPOhs
Here it is!• WebGL: HTML5 + JavaScript
• Compatible with mostbrowsers
• And supported on mobile
Choose your weaponEasy
Customizable
File format
Library
Pure/raw
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
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
OBJFBX
DXF
IGES
STEP
STL
Back-end: NodeJS• As usual:
npm install view-and-data(this package contains the REST API methods: upload, translate, etc.)
• Need a developer key & secrethttp://developer.autodesk.com
Front-end: AngularJSHTML5 + JavaScript• The viewer goes here
<div id="viewer"></div>
• JavaScriptautodeskviewer.com/viewers/2.2/viewer3D.min.js
• CSSdeveloper.api.autodesk.com/viewingservice/v1/viewers/style.css
Give me some sample code!• Check lot’s of samples at
https://github.com/Developer-Autodesk
• Gallery (NodeJS + AngularJS)http://viewer.autodesk.io/node/gallerySource: https://github.com/Developer-Autodesk/ng-gallery
• Get your key & secrethttp://developer.autodesk.com
17
June 15-16 at Fort Mason in San Francisco
Pre DevCon DevCon Post DevConJune 13-14 June 15-16 June 17-19
Accelerator
June 20-24
Come Early Stay Late
