$30 off During Our Annual Pro Sale. View Details »

Understanding three.js (r75)

yomotsu
March 27, 2016

Understanding three.js (r75)

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

yomotsu

March 27, 2016
Tweet

More Decks by yomotsu

Other Decks in Programming

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