BEGIN THREE.JSYi-Fan LiaoSpecial thanks to 3D modelers @shrimp & @yushen
http://mrdoob.github.com/three.js/
DEMO LINKhttp://begeeben.github.io/begin-threejs/
SOURCE CODEhttps://github.com/begeeben/begin-threejs
A SIMPLE EXAMPLE
RENDERERvar	  renderer	  =	  new	  THREE.WebGLRenderer();renderer.setSize(	  window.innerWidth,	  window.innerHeight	  );d...
SCENEvar	  scene	  =	  new	  THREE.Scene();
CAMERA//	  new	  THREE.PerspectiveCamera(fov,	  aspect,	  near,	  far)var	  camera	  =	  new	  THREE.PerspectiveCamera(75,...
PERSPECTIVE	  CAMERA鏡頭與焦距與視⾓角fovfarnearaspect = width/height
OBJECTvar	  geometry	  =	  new	  THREE.CubeGeometry(1,1,1);var	  material	  =	  new	  THREE.MeshBasicMaterial({	  	  color...
RENDER()function	  render()	  {	  	  requestAnimationFrame(render);	  	  mesh.rotation.x	  +=	  0.01;	  	  mesh.rotation.y...
CAMERASCameras on OpenGL ES 2.x – The ModelViewProjection Matrix
ADD TEXTURE
TEXTURE	  MAPvar	  geometry	  =	  new	  THREE.CubeGeometry(1,1,1);//	  Load	  image	  and	  create	  texture.var	  imgUrl	...
LIGHT//	  Directional	  light	  affects	  objects	  using	  MeshLambertMaterial	  or	  MeshPhongMaterial.var	  light	  =	 ...
LIGHTS
MATERIALSLights and Materials inThree.jshttp://threejs.org/examples/webgl_materials.htmlMeshBasicMaterialMeshLambertMateri...
LOAD A 3D MODEL
3D	  MODEL//	  Load	  ufo	  image.var	  ufoMap	  =	  THREE.ImageUtils.loadTexture(models/ufo/textures/ufo.png);var	  ufoMa...
LOADERColladaLoader	  for	  Collada(.dae):	  An	  XML-­‐based	  schema	  to	  make	  it	  easy	  to	  transport	  3D	  ass...
MODEL CONVERSIONEXPORTERS	  Blender	  3DS	  MAX	  MayaCONVERTERSTo	  JSON	  format	  ctm	  Autodesk	  Maya	  .fbx	  Wavefr...
ANIMATE A 3D MODEL
MORPH	  EXAMPLE//	  Load	  3D	  model.var	  loadCounter	  =	  2;function	  checkLoadingComplete()	  {	  	  loadCounter	  -...
MORPH	  EXAMPLE//	  Body.var	  boyMesh;var	  loader	  =	  new	  THREE.JSONLoader();loader.load(models/boy/boy.js,	  functi...
ANIMATIONS
MORPHMorph animation example on three.js website
SKELETAL	  ANIMATIONSkinned animation example on three.js website
BUILD A 3D MENU
TEXT<script	  src="fonts/optimer_regular.typeface.js"></script>var	  textGeometry	  =	  new	  THREE.TextGeometry(	  text,	...
MOUSE	  EVENTvar	  projector	  =	  new	  THREE.Projector();var	  mouse	  =	  new	  THREE.Vector2();mouse.x	  =	  (	  event...
BLEND 3D CONTENT IN HTML
SAMPLE SLOT GAME
RESOURCES	  WebGL:	  Up	  and	  Running	  Tools	  https://github.com/sole/tween.js	  three.js	  boilerplate	  THREECONVERT...
ABOUT廖一帆Front End Engineerbegeeben@gmail.comgithub.com/begeebenYi-Fan Liaobegeeben.wordpress.com/www.facebook.com/yifan.liao
Upcoming SlideShare
Loading in …5
×

Begin three.js.key

7,158 views

Published on

Published in: Technology, Art & Photos
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,158
On SlideShare
0
From Embeds
0
Number of Embeds
2,907
Actions
Shares
0
Downloads
81
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Begin three.js.key

  1. 1. BEGIN THREE.JSYi-Fan LiaoSpecial thanks to 3D modelers @shrimp & @yushen
  2. 2. http://mrdoob.github.com/three.js/
  3. 3. DEMO LINKhttp://begeeben.github.io/begin-threejs/
  4. 4. SOURCE CODEhttps://github.com/begeeben/begin-threejs
  5. 5. A SIMPLE EXAMPLE
  6. 6. RENDERERvar  renderer  =  new  THREE.WebGLRenderer();renderer.setSize(  window.innerWidth,  window.innerHeight  );document.body.appendChild(  renderer.domElement  );
  7. 7. SCENEvar  scene  =  new  THREE.Scene();
  8. 8. CAMERA//  new  THREE.PerspectiveCamera(fov,  aspect,  near,  far)var  camera  =  new  THREE.PerspectiveCamera(75,      window.innerWidth/window.innerHeight,  0.1,  1000);camera.position.set(0,  0,  5);
  9. 9. PERSPECTIVE  CAMERA鏡頭與焦距與視⾓角fovfarnearaspect = width/height
  10. 10. OBJECTvar  geometry  =  new  THREE.CubeGeometry(1,1,1);var  material  =  new  THREE.MeshBasicMaterial({    color:  0x199509});var  mesh  =  new  THREE.Mesh(geometry,  material);scene.add(mesh);
  11. 11. RENDER()function  render()  {    requestAnimationFrame(render);    mesh.rotation.x  +=  0.01;    mesh.rotation.y  +=  0.01;    renderer.render(scene,  camera);}render();requestAnimationFrame for Smart AnimatingBetter JavaScript animations with requestAnimationFrame
  12. 12. CAMERASCameras on OpenGL ES 2.x – The ModelViewProjection Matrix
  13. 13. ADD TEXTURE
  14. 14. TEXTURE  MAPvar  geometry  =  new  THREE.CubeGeometry(1,1,1);//  Load  image  and  create  texture.var  imgUrl  =  images/jumper.jpg;var  map  =  THREE.ImageUtils.loadTexture(imgUrl);//  For  shiny  surfaces.var  material  =  new  THREE.MeshPhongMaterial({  map:  map  });var  mesh  =  new  THREE.Mesh(geometry,  material);scene.add(mesh);
  15. 15. LIGHT//  Directional  light  affects  objects  using  MeshLambertMaterial  or  MeshPhongMaterial.var  light  =  new  THREE.DirectionalLight(  0xffffff,  1  );light.position.set(  0,  0,  1  );scene.add(light);
  16. 16. LIGHTS
  17. 17. MATERIALSLights and Materials inThree.jshttp://threejs.org/examples/webgl_materials.htmlMeshBasicMaterialMeshLambertMaterialMeshPhongMaterial
  18. 18. LOAD A 3D MODEL
  19. 19. 3D  MODEL//  Load  ufo  image.var  ufoMap  =  THREE.ImageUtils.loadTexture(models/ufo/textures/ufo.png);var  ufoMaterial  =  new  THREE.MeshPhongMaterial({map:ufoMap});//  Load  ufo  3D  JSON  model.var  ufo;var  loader  =  new  THREE.JSONLoader();loader.load(models/ufo/ufo.js,  function(geometry)  {    ufo  =  new  THREE.Mesh(geometry,  ufoMaterial);    scene.add(ufo);});
  20. 20. LOADERColladaLoader  for  Collada(.dae):  An  XML-­‐based  schema  to  make  it  easy  to  transport  3D  assets  be-­‐tween  applications.JSONLoader  for  JSON  Model  Format:  More  concise  and  loading  is  faster  than  using  COLLADA  because  browsers  can  load  it  directly  into  JavaScript  data  structures.BinaryLoader  for  Binary  Model  Format:  The  binary  equivalent  to  text-­‐based  JSON  format  but  smaller  in  size.UTF8Loader  for  UTF-­‐8  Encoded  Format:  An  even  more  economical  data  format.SceneLoader  for  JSON  Scene  Format:  The  format  able  to  store  multiple  models  or  an  entire  scene,  including  lights,  camera...  etc.
  21. 21. MODEL CONVERSIONEXPORTERS  Blender  3DS  MAX  MayaCONVERTERSTo  JSON  format  ctm  Autodesk  Maya  .fbx  Wavefront  .objTo  utf8  format  utf8
  22. 22. ANIMATE A 3D MODEL
  23. 23. MORPH  EXAMPLE//  Load  3D  model.var  loadCounter  =  2;function  checkLoadingComplete()  {    loadCounter  -­‐=  1;    if(loadCounter  ===  0)  scene.add(boyMesh);};//  Textures.//  How  the  image  is  applied  to  the  object.var  mapping  =  new  THREE.UVMapping();var  boyMap  =  THREE.ImageUtils.loadTexture(models/boy/textures/boy.png,  mapping,  checkLoadingComplete());
  24. 24. MORPH  EXAMPLE//  Body.var  boyMesh;var  loader  =  new  THREE.JSONLoader();loader.load(models/boy/boy.js,  function(geometry)  {    geometry.computeMorphNormals();    var  materialBoy  =  new  THREE.MeshPhongMaterial({        color:  0xffffff,        specular:  0x111111,        shininess:  50,        map:  boyMap,        morphTargets:  true,        morphNormals:  true,        wrapAround:  true    });    boyMesh  =  new  THREE.MorphAnimMesh(geometry,  materialBoy);    boyMesh.castShadow  =  true;    boyMesh.receiveShadow  =  true;    //  Parse  animations  in  the  model  file.    boyMesh.parseAnimations();    boyMesh.playAnimation(  geometry.firstAnimation,  30  );    checkLoadingComplete();});
  25. 25. ANIMATIONS
  26. 26. MORPHMorph animation example on three.js website
  27. 27. SKELETAL  ANIMATIONSkinned animation example on three.js website
  28. 28. BUILD A 3D MENU
  29. 29. TEXT<script  src="fonts/optimer_regular.typeface.js"></script>var  textGeometry  =  new  THREE.TextGeometry(  text,  {  ...
  30. 30. MOUSE  EVENTvar  projector  =  new  THREE.Projector();var  mouse  =  new  THREE.Vector2();mouse.x  =  (  event.clientX  /  container.clientWidth  )  *  2  -­‐  1;mouse.y  =  -­‐  (  event.clientY  /  container.clientHeight  )  *  2  +  1;//  Unproject  the  screen  space  mouse  point  to  3D  world  space.var  vector  =  new  THREE.Vector3(  mouse.x,  mouse.y,  0.5  );//  Cast  a  ray  from  the  camera  according  to  the  vector.var  raycaster  =  projector.pickingRay(  vector.clone(),  camera  );//  Get  objects  that  intersects  the  ray.var  intersects  =  raycaster.intersectObjects(  items,  true  );if  (  intersects.length  >  0  )  {  ...
  31. 31. BLEND 3D CONTENT IN HTML
  32. 32. SAMPLE SLOT GAME
  33. 33. RESOURCES  WebGL:  Up  and  Running  Tools  https://github.com/sole/tween.js  three.js  boilerplate  THREECONVERT  OSX  BATCH  EXPORTER  UTILITY  FOR  THREE.JS  MD2  to  JSON  ConverterShow  Cases  Verold  STUDIO  Simple  facial  rigging  utilizing  morph  targets  WebGL  -­‐  Three.js  +  impactJSTutorials  Building  the  Game:  Part  3  -­‐  Skinning  &  Animation  Verification  of  using  multiple  textures  with  three.js  cubes
  34. 34. ABOUT廖一帆Front End Engineerbegeeben@gmail.comgithub.com/begeebenYi-Fan Liaobegeeben.wordpress.com/www.facebook.com/yifan.liao

×