Understanding three.js (r75)

my talk at three.js handson at http://connpass.com/event/25563/

Transcript

1. Presented by Akihiro Oyamada (@yomotsu)
   Mar 27, 2016
   Understanding
   three.js
   

   View Slide

2. Frontend Engineer
   at PixelGrid, Inc.
   Akihiro Oyamada
   @yomotsu
   

   View Slide

3. • Low-level JS API
   • Based on OpenGL ES 2.0
   • 3D and 2D graphics
   • Immediate-mode API
   8FC(-
   

   View Slide

4. • Middle-level library
   • Most popular WebGL library
   • Strong community
   UISFFKT
   

   View Slide

5. http://fr.special-t.com/media/ogreen/en/
   

   View Slide

6. https://lightsaber.withgoogle.com/
   

   View Slide

7. http://www.shapespark.com/
   

   View Slide

8. http://www.xavigimenez.net/bcn-commercial-footprints/
   

   View Slide

9. http://www.apple.com/jp/macbook/design/
   

   View Slide

10. https://www.khronos.org/files/rfq/Khronos-glTF-RFQ.pdf
    

    View Slide

11. https://www.khronos.org/files/rfq/Khronos-glTF-RFQ.pdf
    

    View Slide

12. https://developer.mozilla.org/en/docs/Games/Techniques/
    

    View Slide

13. https://developer.mozilla.org/en/docs/Games/Techniques/
    

    View Slide

14. https://msdn.microsoft.com/en-us/library/bg182648%28v=vs.85%29.aspx
    

    View Slide

15. https://msdn.microsoft.com/en-us/library/bg182648%28v=vs.85%29.aspx
    

    View Slide

16. Downloading the lib
    16
    

    View Slide

17. • GitHub Repo
    •http://threejs.org/
    • NPM
    •$ npm install —save three
    • CDN
    •https://cdnjs.com/libraries/three.js/
    •https://developers.google.com/speed/libraries/#threejs (old)
    

    View Slide

18. Hello World
    in three.js
    18
    

    View Slide

19. window.addEventListener( 'DOMContentLoaded', function () {
    //描画領域の大きさに利用する
    var width = window.innerWidth;
    var height = window.innerHeight;
    //シーンを設定
    var scene = new THREE.Scene();
    //カメラを設定
    var fov = 80;
    var aspect = width / height;
    var near = 0.1;
    var far = 1000;
    var camera = new THREE.PerspectiveCamera(fov,aspect,near,far);
    //カメラの位置を手前に10移動
    camera.position.z = 2;
    

    View Slide

20. window.addEventListener( 'DOMContentLoaded', function () {
    //描画領域の大きさに利用する
    var width = window.innerWidth;
    var height = window.innerHeight;
    //シーンを設定
    var scene = new THREE.Scene();
    //カメラを設定
    var fov = 80;
    var aspect = width / height;
    var near = 0.1;
    var far = 1000;
    var camera = new THREE.PerspectiveCamera(fov,aspect,near,far);
    //カメラの位置を手前に10移動
    camera.position.z = 2;
    

    View Slide

21. window.addEventListener( 'DOMContentLoaded', function () {
    //描画領域の大きさに利用する
    var width = window.innerWidth;
    var height = window.innerHeight;
    //シーンを設定
    var scene = new THREE.Scene();
    //カメラを設定
    var fov = 80;
    var aspect = width / height;
    var near = 0.1;
    var far = 1000;
    var camera = new THREE.PerspectiveCamera(fov,aspect,near,far);
    //カメラの位置を手前に10移動
    camera.position.z = 2;
    

    View Slide

22. window.addEventListener( 'DOMContentLoaded', function () {
    //描画領域の大きさに利用する
    var width = window.innerWidth;
    var height = window.innerHeight;
    //シーンを設定
    var scene = new THREE.Scene();
    //カメラを設定
    var fov = 80;
    var aspect = width / height;
    var near = 0.1;
    var far = 1000;
    var camera = new THREE.PerspectiveCamera(fov,aspect,near,far);
    //カメラの位置を手前に10移動
    camera.position.z = 2;
    

    View Slide

23. //シーンを設定
    var scene = new THREE.Scene();
    //カメラを設定
    var fov = 80;
    var aspect = width / height;
    var near = 0.1;
    var far = 1000;
    var camera = new THREE.PerspectiveCamera(fov,aspect,near,far);
    //カメラの位置を手前に10移動
    camera.position.z = 2;
    //レンダラーを設定
    var renderer = new THREE.WebGLRenderer();
    //レンダラーのサイズは当初設定したwidthとheightと同じに
    renderer.setSize( width, height );
    //HTMLのbody要素直下の子要素としてレンダラーを追加
    

    View Slide

24. //シーンを設定
    var scene = new THREE.Scene();
    //カメラを設定
    var fov = 80;
    var aspect = width / height;
    var near = 0.1;
    var far = 1000;
    var camera = new THREE.PerspectiveCamera(fov,aspect,near,far);
    //カメラの位置を手前に10移動
    camera.position.z = 2;
    //レンダラーを設定
    var renderer = new THREE.WebGLRenderer();
    //レンダラーのサイズは当初設定したwidthとheightと同じに
    renderer.setSize( width, height );
    //HTMLのbody要素直下の子要素としてレンダラーを追加
    

    View Slide

25. //シーンを設定
    var scene = new THREE.Scene();
    //カメラを設定
    var fov = 80;
    var aspect = width / height;
    var near = 0.1;
    var far = 1000;
    var camera = new THREE.PerspectiveCamera(fov,aspect,near,far);
    //カメラの位置を手前に10移動
    camera.position.z = 2;
    //レンダラーを設定
    var renderer = new THREE.WebGLRenderer();
    //レンダラーのサイズは当初設定したwidthとheightと同じに
    renderer.setSize( width, height );
    //HTMLのbody要素直下の子要素としてレンダラーを追加
    

    View Slide

26. //シーンを設定
    var scene = new THREE.Scene();
    //カメラを設定
    var fov = 80;
    var aspect = width / height;
    var near = 0.1;
    var far = 1000;
    var camera = new THREE.PerspectiveCamera(fov,aspect,near,far);
    //カメラの位置を手前に10移動
    camera.position.z = 2;
    //レンダラーを設定
    var renderer = new THREE.WebGLRenderer();
    //レンダラーのサイズは当初設定したwidthとheightと同じに
    renderer.setSize( width, height );
    //HTMLのbody要素直下の子要素としてレンダラーを追加
    

    View Slide

27. //シーンを設定
    var scene = new THREE.Scene();
    //カメラを設定
    var fov = 80;
    var aspect = width / height;
    var near = 0.1;
    var far = 1000;
    var camera = new THREE.PerspectiveCamera(fov,aspect,near,far);
    //カメラの位置を手前に10移動
    camera.position.z = 2;
    //レンダラーを設定
    var renderer = new THREE.WebGLRenderer();
    //レンダラーのサイズは当初設定したwidthとheightと同じに
    renderer.setSize( width, height );
    //HTMLのbody要素直下の子要素としてレンダラーを追加
    

    View Slide

28. //シーンを設定
    var scene = new THREE.Scene();
    //カメラを設定
    var fov = 80;
    var aspect = width / height;
    var near = 0.1;
    var far = 1000;
    var camera = new THREE.PerspectiveCamera(fov,aspect,near,far);
    //カメラの位置を手前に10移動
    camera.position.z = 2;
    //レンダラーを設定
    var renderer = new THREE.WebGLRenderer();
    //レンダラーのサイズは当初設定したwidthとheightと同じに
    renderer.setSize( width, height );
    //HTMLのbody要素直下の子要素としてレンダラーを追加
    

    View Slide

29. //シーンを設定
    var scene = new THREE.Scene();
    //カメラを設定
    var fov = 80;
    var aspect = width / height;
    var near = 0.1;
    var far = 1000;
    var camera = new THREE.PerspectiveCamera(fov,aspect,near,far);
    //カメラの位置を手前に10移動
    camera.position.z = 2;
    //レンダラーを設定
    var renderer = new THREE.WebGLRenderer();
    //レンダラーのサイズは当初設定したwidthとheightと同じに
    renderer.setSize( width, height );
    //HTMLのbody要素直下の子要素としてレンダラーを追加
    

    View Slide

30. //シーンを設定
    var scene = new THREE.Scene();
    //カメラを設定
    var fov = 80;
    var aspect = width / height;
    var near = 0.1;
    var far = 1000;
    var camera = new THREE.PerspectiveCamera(fov,aspect,near,far);
    //カメラの位置を手前に10移動
    camera.position.z = 2;
    //レンダラーを設定
    var renderer = new THREE.WebGLRenderer();
    //レンダラーのサイズは当初設定したwidthとheightと同じに
    renderer.setSize( width, height );
    //HTMLのbody要素直下の子要素としてレンダラーを追加
    

    View Slide

31. var camera = new THREE.PerspectiveCamera(fov,aspect,near,far);
    //カメラの位置を手前に10移動
    camera.position.z = 2;
    //レンダラーを設定
    var renderer = new THREE.WebGLRenderer();
    //レンダラーのサイズは当初設定したwidthとheightと同じに
    renderer.setSize( width, height );
    //HTMLのbody要素直下の子要素としてレンダラーを追加
    document.body.appendChild( renderer.domElement );
    //光源を設定
    var directionalLight = new THREE.DirectionalLight( 0xffffff );
    directionalLight.position.set( 1, 0, 1 );
    //光源をシーンに追加
    scene.add( directionalLight );
    //横幅、高さ、奥行きが 1 の立方体のジオメトリーを設定
    

    View Slide

32. var camera = new THREE.PerspectiveCamera(fov,aspect,near,far);
    //カメラの位置を手前に10移動
    camera.position.z = 2;
    //レンダラーを設定
    var renderer = new THREE.WebGLRenderer();
    //レンダラーのサイズは当初設定したwidthとheightと同じに
    renderer.setSize( width, height );
    //HTMLのbody要素直下の子要素としてレンダラーを追加
    document.body.appendChild( renderer.domElement );
    //光源を設定
    var directionalLight = new THREE.DirectionalLight( 0xffffff );
    directionalLight.position.set( 1, 0, 1 );
    //光源をシーンに追加
    scene.add( directionalLight );
    //横幅、高さ、奥行きが 1 の立方体のジオメトリーを設定
    

    View Slide

33. var camera = new THREE.PerspectiveCamera(fov,aspect,near,far);
    //カメラの位置を手前に10移動
    camera.position.z = 2;
    //レンダラーを設定
    var renderer = new THREE.WebGLRenderer();
    //レンダラーのサイズは当初設定したwidthとheightと同じに
    renderer.setSize( width, height );
    //HTMLのbody要素直下の子要素としてレンダラーを追加
    document.body.appendChild( renderer.domElement );
    //光源を設定
    var directionalLight = new THREE.DirectionalLight( 0xffffff );
    directionalLight.position.set( 1, 0, 1 );
    //光源をシーンに追加
    scene.add( directionalLight );
    //横幅、高さ、奥行きが 1 の立方体のジオメトリーを設定
    

    View Slide

34. renderer.setSize( width, height );
    //HTMLのbody要素直下の子要素としてレンダラーを追加
    document.body.appendChild( renderer.domElement );
    //光源を設定
    var directionalLight = new THREE.DirectionalLight( 0xffffff );
    directionalLight.position.set( 1, 0, 1 );
    //光源をシーンに追加
    scene.add( directionalLight );
    //横幅、高さ、奥行きが 1 の立方体のジオメトリーを設定
    var geometry = new THREE.BoxGeometry( 1, 1, 1 );
    //マテリアルを設定
    var material = new THREE.MeshPhongMaterial({color:0x660000});
    //メッシュを作成
    var cubeMesh = new THREE.Mesh( geometry, material );
    //メッシュをシーンに追加
    scene.add( cubeMesh );
    

    View Slide

35. renderer.setSize( width, height );
    //HTMLのbody要素直下の子要素としてレンダラーを追加
    document.body.appendChild( renderer.domElement );
    //光源を設定
    var directionalLight = new THREE.DirectionalLight( 0xffffff );
    directionalLight.position.set( 1, 0, 1 );
    //光源をシーンに追加
    scene.add( directionalLight );
    //横幅、高さ、奥行きが 1 の立方体のジオメトリーを設定
    var geometry = new THREE.BoxGeometry( 1, 1, 1 );
    //マテリアルを設定
    var material = new THREE.MeshPhongMaterial({color:0x660000});
    //メッシュを作成
    var cubeMesh = new THREE.Mesh( geometry, material );
    //メッシュをシーンに追加
    scene.add( cubeMesh );
    

    View Slide

36. renderer.setSize( width, height );
    //HTMLのbody要素直下の子要素としてレンダラーを追加
    document.body.appendChild( renderer.domElement );
    //光源を設定
    var directionalLight = new THREE.DirectionalLight( 0xffffff );
    directionalLight.position.set( 1, 0, 1 );
    //光源をシーンに追加
    scene.add( directionalLight );
    //横幅、高さ、奥行きが 1 の立方体のジオメトリーを設定
    var geometry = new THREE.BoxGeometry( 1, 1, 1 );
    //マテリアルを設定
    var material = new THREE.MeshPhongMaterial({color:0x660000});
    //メッシュを作成
    var cubeMesh = new THREE.Mesh( geometry, material );
    //メッシュをシーンに追加
    scene.add( cubeMesh );
    

    View Slide

37. renderer.setSize( width, height );
    //HTMLのbody要素直下の子要素としてレンダラーを追加
    document.body.appendChild( renderer.domElement );
    //光源を設定
    var directionalLight = new THREE.DirectionalLight( 0xffffff );
    directionalLight.position.set( 1, 0, 1 );
    //光源をシーンに追加
    scene.add( directionalLight );
    //横幅、高さ、奥行きが 1 の立方体のジオメトリーを設定
    var geometry = new THREE.BoxGeometry( 1, 1, 1 );
    //マテリアルを設定
    var material = new THREE.MeshPhongMaterial({color:0x660000});
    //メッシュを作成
    var cubeMesh = new THREE.Mesh( geometry, material );
    //メッシュをシーンに追加
    scene.add( cubeMesh );
    

    View Slide

38. renderer.setSize( width, height );
    //HTMLのbody要素直下の子要素としてレンダラーを追加
    document.body.appendChild( renderer.domElement );
    //光源を設定
    var directionalLight = new THREE.DirectionalLight( 0xffffff );
    directionalLight.position.set( 1, 0, 1 );
    //光源をシーンに追加
    scene.add( directionalLight );
    //横幅、高さ、奥行きが 1 の立方体のジオメトリーを設定
    var geometry = new THREE.BoxGeometry( 1, 1, 1 );
    //マテリアルを設定
    var material = new THREE.MeshPhongMaterial({color:0x660000});
    //メッシュを作成
    var cubeMesh = new THREE.Mesh( geometry, material );
    //メッシュをシーンに追加
    scene.add( cubeMesh );
    

    View Slide

39. //光源をシーンに追加
    scene.add( directionalLight );
    //横幅、高さ、奥行きが 1 の立方体のジオメトリーを設定
    var geometry = new THREE.BoxGeometry( 1, 1, 1 );
    //マテリアルを設定
    var material = new THREE.MeshPhongMaterial({color:0x660000});
    //メッシュを作成
    var cubeMesh = new THREE.Mesh( geometry, material );
    //メッシュをシーンに追加
    scene.add( cubeMesh );
    //レンダリング
    renderer.render( scene, camera );
    } );
    

    View Slide

40. //光源をシーンに追加
    scene.add( directionalLight );
    //横幅、高さ、奥行きが 1 の立方体のジオメトリーを設定
    var geometry = new THREE.BoxGeometry( 1, 1, 1 );
    //マテリアルを設定
    var material = new THREE.MeshPhongMaterial({color:0x660000});
    //メッシュを作成
    var cubeMesh = new THREE.Mesh( geometry, material );
    //メッシュをシーンに追加
    scene.add( cubeMesh );
    //レンダリング
    renderer.render( scene, camera );
    } );
    

    View Slide

41. //光源をシーンに追加
    scene.add( directionalLight );
    //横幅、高さ、奥行きが 1 の立方体のジオメトリーを設定
    var geometry = new THREE.BoxGeometry( 1, 1, 1 );
    //マテリアルを設定
    var material = new THREE.MeshPhongMaterial({color:0x660000});
    //メッシュを作成
    var cubeMesh = new THREE.Mesh( geometry, material );
    //メッシュをシーンに追加
    scene.add( cubeMesh );
    //レンダリング
    renderer.render( scene, camera );
    } );
    

    View Slide

42. //光源をシーンに追加
    scene.add( directionalLight );
    //横幅、高さ、奥行きが 1 の立方体のジオメトリーを設定
    var geometry = new THREE.BoxGeometry( 1, 1, 1 );
    //マテリアルを設定
    var material = new THREE.MeshPhongMaterial({color:0x660000});
    //メッシュを作成
    var cubeMesh = new THREE.Mesh( geometry, material );
    //メッシュをシーンに追加
    scene.add( cubeMesh );
    //レンダリング
    renderer.render( scene, camera );
    } );
    

    View Slide

43. //光源をシーンに追加
    scene.add( directionalLight );
    //横幅、高さ、奥行きが 1 の立方体のジオメトリーを設定
    var geometry = new THREE.BoxGeometry( 1, 1, 1 );
    //マテリアルを設定
    var material = new THREE.MeshPhongMaterial({color:0x660000});
    //メッシュを作成
    var cubeMesh = new THREE.Mesh( geometry, material );
    //メッシュをシーンに追加
    scene.add( cubeMesh );
    //レンダリング
    renderer.render( scene, camera );
    } );
    

    View Slide

44. MeshBasic

    Material
    MeshLambert

    Material
    MeshPhong

    Material
    MeshStandard
    Material
    MeshNormal

    Material
    

    View Slide

45. //光源をシーンに追加
    scene.add( directionalLight );
    //横幅、高さ、奥行きが 1 の立方体のジオメトリーを設定
    var geometry = new THREE.BoxGeometry( 1, 1, 1 );
    //マテリアルを設定
    var material = new THREE.MeshPhongMaterial({color:0x660000});
    //メッシュを作成
    var cubeMesh = new THREE.Mesh( geometry, material );
    //メッシュをシーンに追加
    scene.add( cubeMesh );
    //レンダリング
    renderer.render( scene, camera );
    } );
    

    View Slide

46. //光源をシーンに追加
    scene.add( directionalLight );
    //横幅、高さ、奥行きが 1 の立方体のジオメトリーを設定
    var geometry = new THREE.BoxGeometry( 1, 1, 1 );
    //マテリアルを設定
    var material = new THREE.MeshPhongMaterial({color:0x660000});
    //メッシュを作成
    var cubeMesh = new THREE.Mesh( geometry, material );
    //メッシュをシーンに追加
    scene.add( cubeMesh );
    //レンダリング
    renderer.render( scene, camera );
    } );
    

    View Slide

47. //光源をシーンに追加
    scene.add( directionalLight );
    //横幅、高さ、奥行きが 1 の立方体のジオメトリーを設定
    var geometry = new THREE.BoxGeometry( 1, 1, 1 );
    //マテリアルを設定
    var material = new THREE.MeshPhongMaterial({color:0x660000});
    //メッシュを作成
    var cubeMesh = new THREE.Mesh( geometry, material );
    //メッシュをシーンに追加
    scene.add( cubeMesh );
    //レンダリング
    renderer.render( scene, camera );
    } );
    

    View Slide

48. //光源をシーンに追加
    scene.add( directionalLight );
    //横幅、高さ、奥行きが 1 の立方体のジオメトリーを設定
    var geometry = new THREE.BoxGeometry( 1, 1, 1 );
    //マテリアルを設定
    var material = new THREE.MeshPhongMaterial({color:0x660000});
    //メッシュを作成
    var cubeMesh = new THREE.Mesh( geometry, material );
    //メッシュをシーンに追加
    scene.add( cubeMesh );
    //レンダリング
    renderer.render( scene, camera );
    } );
    

    View Slide

49. //光源をシーンに追加
    scene.add( directionalLight );
    //横幅、高さ、奥行きが 1 の立方体のジオメトリーを設定
    var geometry = new THREE.BoxGeometry( 1, 1, 1 );
    //マテリアルを設定
    var material = new THREE.MeshPhongMaterial({color:0x660000});
    //メッシュを作成
    var cubeMesh = new THREE.Mesh( geometry, material );
    //メッシュをシーンに追加
    scene.add( cubeMesh );
    //レンダリング
    renderer.render( scene, camera );
    } );
    

    View Slide

50. //メッシュを作成
    var cubeMesh = new THREE.Mesh( geometry, material );
    //メッシュをシーンに追加
    scene.add( cubeMesh );
    //レンダリング
    renderer.render( scene, camera );
    } );
    

    View Slide

51. View Slide

52. View Slide

53. scene.add( cubeMesh );
    //レンダリング
    renderer.render( scene, camera );
    } );
    

    View Slide

54. scene.add( cubeMesh );
    //レンダリング
    var anim = function () {
    requestAnimationFrame( anim );
    cubeMesh.rotation.y += THREE.Math.degToRad( 1 );
    renderer.render( scene, camera );
    };
    anim();
    } );
    

    View Slide

55. More examples & Docs
    55
    http://threejs.org/
    

    View Slide

56. http://threejs.org/examples/
    

    View Slide

57. gl.finish();
    @yomotsu
    

    View Slide