BEGIN THREE.JSYi-Fan Liao

Special thanks to 3D modelers @shrimp & @yushen

http://mrdoob.github.com/three.js/

DEMO LINK

http://begeeben.github.io/begin-threejs/

SOURCE CODE

https://github.com/begeeben/begin-threejs

A SIMPLE EXAMPLE

RENDERERvar  renderer  =  new  THREE.WebGLRenderer();

renderer.setSize(  window.innerWidth,  window.innerHeight  );

document.body.appendChild(  renderer.domElement  );

SCENE

var  scene  =  new  THREE.Scene();

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);

PERSPECTIVE  CAMERA

鏡頭與焦距與視⾓角

fov

far

near

aspect = width/height

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);

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

CAMERAS

Cameras 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  =  '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);

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);

LIGHTS

MATERIALS

Lights and Materials in Three.jshttp://threejs.org/examples/webgl_materials.html

MeshBasicMaterial

MeshLambertMaterial

MeshPhongMaterial

LOAD A 3D MODEL

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);});

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.

MODEL CONVERSIONEXPORTERS

 Blender  3DS  MAX  Maya

CONVERTERS

To  JSON  format  ctm  Autodesk  Maya  .fbx  Wavefront  .obj

To  utf8  format  utf8

ANIMATE A 3D MODEL

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());

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();});

ANIMATIONS

MORPH

Morph animation example on three.js website

SKELETAL  ANIMATION

Skinned 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.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  )  {  ...

BLEND 3D CONTENT IN HTML

SAMPLE SLOT GAME

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  Converter

Show  Cases  Verold  STUDIO  Simple  facial  rigging  utilizing  morph  targets  WebGL  -­‐  Three.js  +  impactJS

Tutorials  Building  the  Game:  Part  3  -­‐  Skinning  &  Animation  Verification  of  using  multiple  textures  with  three.js  

cubes

ABOUT廖一帆

Front End Engineer

begeeben@gmail.com

github.com/begeeben

Yi-Fan Liao

begeeben.wordpress.com/

www.facebook.com/yifan.liao