Upcoming SlideShare
×

# Begin three.js.key

7,158 views

Published on

Published in: Technology, Art & Photos
1 Like
Statistics
Notes
• Full Name
Comment goes here.

Are you sure you want to Yes No
• Be the first to comment

Views
Total views
7,158
On SlideShare
0
From Embeds
0
Number of Embeds
2,907
Actions
Shares
0
81
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/
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
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
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