Let’s create things in three.js (r63)

Transcript

1. yomotsu@PixelGrid, Inc. 2013-12-09 Let’s create things in three.js (r63) Tuesday, December 10, 13
2. Hello! I’m Yomotsu just a frontend-engineer at PixelGrid A BIG FUN OF Mr.doob and three.js! twitter@yomotsu Tuesday, December 10, 13
3. http://yomotsu.net/blog/assets/2013-12-01-happyholidays/ Tuesday, December 10, 13
4. Guess how does it work? http://yomotsu.net/blog/assets/2013-12-01-happyholidays/ Tuesday, December 10, 13
5. Tuesday, December 10, 13
6. 1. Ground 2.Skybox 3.Snow 4.Boxes 5.Trees 6.Santa 7.Collisions Tuesday, December 10, 13
7. making a ground Tuesday, December 10, 13
8. vertices of geometries allow modifying Tuesday, December 10, 13
9. geometry.vertices[  i  ].z  =  10; Tuesday, December 10, 13
10. shading is strange Tuesday, December 10, 13
11. Tuesday, December 10, 13
12. Tuesday, December 10, 13
13. Tuesday, December 10, 13
14. you need to update normal direction Tuesday, December 10, 13
15. you need to update normal direction Tuesday, December 10, 13
16. mesh.geometry.computeFaceNormals(); mesh.geometry.computeVertexNormals(); mesh.geometry.normalsNeedUpdate = true; Tuesday, December 10, 13
17. mesh.geometry.computeFaceNormals(); mesh.geometry.computeVertexNormals(); mesh.geometry.normalsNeedUpdate = true; Tuesday, December 10, 13
18. Demo http://yomotsu.net/blog/assets/2013-12-01-happyholidays/single-demos/ground_wrongnormal.html http://yomotsu.net/blog/assets/2013-12-01-happyholidays/single-demos/ground.html Tuesday, December 10, 13
19. making a skybox Tuesday, December 10, 13
20. Skybox is just a cube Tuesday, December 10, 13
21. Tuesday, December 10, 13
22. var urls = [ 'right.jpg', 'left.jpg', 'top.jpg', 'bottom.jpg', 'front.jpg', 'back.jpg' ]; var materials = []; for ( var i = 0; i < 6; i ++ ) { materials.push( new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture( urls[ i ] ), side: THREE.BackSide })); } var skyBox = new THREE.Mesh( new THREE.CubeGeometry( 500, 500, 500 ), new THREE.MeshFaceMaterial( materials ) ); scene.add( skyBox ); don’t forget it to show backside! Tuesday, December 10, 13
23. Demo http://yomotsu.net/blog/assets/2013-12-01-happyholidays/single-demos/skybox.html Tuesday, December 10, 13
24. making snow Tuesday, December 10, 13
25. There are 2 ways to make snowing •as sprites •as a particle Tuesday, December 10, 13
26. What is the difference...? Tuesday, December 10, 13
27. 1000 sprites call DrawCall 1000 times! (clear*1, helper*1, sprites*1000) Tuesday, December 10, 13
28. A particle calls DrawCall only once! (clear*1, helper*1, particle*1) Tuesday, December 10, 13
29. When you modified vertices, You need to set myParticle.geometry.verticesNeedUpdate = true; Tuesday, December 10, 13
30. Demo http://yomotsu.net/blog/assets/2013-12-01-happyholidays/single-demos/snow_splite.html http://yomotsu.net/blog/assets/2013-12-01-happyholidays/single-demos/snow.html Tuesday, December 10, 13
31. IE11 may not render THREE.ParticleSystem as expected Tuesday, December 10, 13
32. making boxes Tuesday, December 10, 13
33. Blender allows to export 3D models in JSON for three.js ( FYI: it’s needed a plugin ) Tuesday, December 10, 13
34. var box; var loader = new THREE.JSONLoader(); loader.load( './box.js', function( geo, mat ) { box = new THREE.Mesh( geo, new THREE.MeshFaceMaterial( mat ) ); scene.add( box ); } ); Tuesday, December 10, 13
35. var box, box1, box2; var loader = new THREE.JSONLoader(); loader.load( './box.js', function( geo, mat ) { box = new THREE.Mesh( geo, new THREE.MeshFaceMaterial( mat ) ); box1 = box.clone(); box2 = box.clone(); box1.position.set( -3, 0, 0 ); box2.position.set( 3, 0, 0 ); scene.add( box1 ); scene.add( box2 ); } ); Meshes accept `mesh.clone()` to duplicate Tuesday, December 10, 13
36. Demo http://yomotsu.net/blog/assets/2013-12-01-happyholidays/single-demos/box.html Tuesday, December 10, 13
37. making trees Tuesday, December 10, 13
38. Making a forrest means, adding trees to the scene. Tuesday, December 10, 13
39. It increases the number of DrawCalls... Tuesday, December 10, 13
40. var tmpGeometry = new THREE.Geometry(); for ( var i = 0; i < 5; i ++ ) { ( function () { var treeMeshClone = treeMesh.clone(); treeMeshClone.position.set( i * 10, 0, 0 ); THREE.GeometryUtils.merge( tmpGeometry, treeMeshClone ); } )(); } var forrest = new THREE.Mesh( tmpGeometry, new THREE.MeshFaceMaterial( materials ) ); scene.add( forrest ); Tuesday, December 10, 13
41. Tuesday, December 10, 13
42. Meshes can be merged to a mesh. It reduce rendering cost. Tuesday, December 10, 13
43. Demo http://yomotsu.net/blog/assets/2013-12-01-happyholidays/single-demos/forrest_notmerged.html http://yomotsu.net/blog/assets/2013-12-01-happyholidays/single-demos/forrest.html Tuesday, December 10, 13
44. making Santa Tuesday, December 10, 13
45. The model was originally from MMD http://www.nicovideo.jp/watch/sm19655533 Tuesday, December 10, 13
46. Blender can export models with animations Tuesday, December 10, 13
47. Don’t forget to fix rest pose before export! Tuesday, December 10, 13
48. To do so... 1. Clear all transform to be rest pose 2. Switch to Object Mode 3. Select the mesh and press CTRL+A and select location. Repeat for rotation and scale 4. Select the armature and do the same Tuesday, December 10, 13
49. Tuesday, December 10, 13
50. var  santa,  idle; var  clock  =  new  THREE.Clock(); var  loader  =  new  THREE.JSONLoader(); loader.load(  './santa.js',  function(  geo,  mats  )  {    mats.forEach(  function  (  mat  )  {        mat.skinning  =  true;    }  );    santa  =  new  THREE.SkinnedMesh(        geo,        new  THREE.MeshFaceMaterial(  mats  )    );    THREE.AnimationHandler.add(  santa.geometry.animations[  0  ]  );    idle  =  new  THREE.Animation(        santa,        santa.geometry.animations[  0  ].name,        THREE.AnimationHandler.CATMULLROM    );    scene.add(  santa  );    idle.play(); }  ); Tuesday, December 10, 13
51.        santa.geometry.animations[  0  ].name,        THREE.AnimationHandler.CATMULLROM    );    scene.add(  santa  );    idle.play(); }  ); (  function  renderLoop  (){    requestAnimationFrame(  renderLoop  );    var  delta  =  clock.getDelta();    THREE.AnimationHandler.update(  delta  );    renderer.render(  scene,  camera  ); }  )(); Tuesday, December 10, 13
52. Demo http://yomotsu.net/blog/assets/2013-12-01-happyholidays/single-demos/santa_notfixed.html http://yomotsu.net/blog/assets/2013-12-01-happyholidays/single-demos/santa.html Tuesday, December 10, 13
53. Collision Detection Tuesday, December 10, 13
54. three.js doesn’t have Collision Detections, except Ray. Several physics libs are available instead. Physijs, ammo.js, JigLibJS, Cannon.js, Metrix.js and others. Tuesday, December 10, 13
55. Tuesday, December 10, 13
56. Tuesday, December 10, 13
57. Demo http://yomotsu.net/blog/assets/2013-12-01-happyholidays/single-demos/physics.html Tuesday, December 10, 13
58. Conclusion Tuesday, December 10, 13
59. Many useful utils are available to create things! Tuesday, December 10, 13
60. Thank you! @yomotsu Tuesday, December 10, 13