Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Three.js WebGL

Three.js WebGL

3D in the web

Deep Focus

March 04, 2015
Tweet

More Decks by Deep Focus

Other Decks in Technology

Transcript

  1. All content contained herein is property of Deep Focus. ©2012

    All Rights Reserved. MARCH 3RD, 2015 THREE.JS & WEBGL Kathy Wu
  2. PAGE 8 25 JANUARY 2012 •  Javascript  API   • 

    Works  with  computer’s  GPU   •  No  plugins  needed    
  3. PAGE 9 25 JANUARY 2012 Supported Browsers Support  listed  as

     "par@al"  refers  to  the  fact  that  not  all  users  with  these  browsers  have   WebGL  access.  This  is  due  to  the  addi@onal  requirement  for  users  to  have  up  to  date  video   drivers.    
  4. PAGE 10 25 JANUARY 2012 Three.js Three.js  is  a  library

     that  makes  WebGL  -­‐  3D  in  the  browser  -­‐  easy  to  use.  While  a  simple  cube   in  raw  WebGL  would  turn  out  hundreds  of  lines  of  Javascript  and  shader  code,  a  Three.js   equivalent  is  only  a  frac@on  of  that.  
  5. PAGE 11 25 JANUARY 2012 Benefits of Using Three.js • 

    Easier  to  read/write   •  Materials   •  Extensive  documenta@on   •  Other  renderers  (Canvas,  SVG)  
  6. PAGE 12 25 JANUARY 2012 File Types •  Fbx  (.Wx)

      •  Collada  (.dae)   •  Wavefront/Alias  (.obj)   •  3D  Studio  Max  (.3ds)   Download:   hYp://www.hongkiat.com/blog/60-­‐excellent-­‐free-­‐3d-­‐model-­‐ websites/    
  7. Sources / Credits ¤  h"p://caniuse.com/#feat=webgl   ¤  h"ps://www.khronos.org/webgl/   ¤ 

    h"p://threejs.org/   ¤  h"ps://www.chromeexperiments.com/webgl   ¤  h"p://code.tutsplus.com/tutorials/webgl-­‐with-­‐threejs-­‐basics-­‐-­‐net-­‐35688