Understanding three.js (r75)

3c557c6103a4addc52f7b76ffd0a0f27?s=47 yomotsu
March 27, 2016

Understanding three.js (r75)

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

3c557c6103a4addc52f7b76ffd0a0f27?s=128

yomotsu

March 27, 2016
Tweet

Transcript

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

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

  3. • Low-level JS API • Based on OpenGL ES 2.0

    • 3D and 2D graphics • Immediate-mode API 8FC(-
  4. • Middle-level library • Most popular WebGL library • Strong

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

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

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

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

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

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

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

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

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

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

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

  16. Downloading the lib 16

  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)
  18. Hello World in three.js 18

  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;
  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;
  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;
  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;
  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要素直下の子要素としてレンダラーを追加
  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要素直下の子要素としてレンダラーを追加
  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要素直下の子要素としてレンダラーを追加
  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要素直下の子要素としてレンダラーを追加
  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要素直下の子要素としてレンダラーを追加
  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要素直下の子要素としてレンダラーを追加
  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要素直下の子要素としてレンダラーを追加
  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要素直下の子要素としてレンダラーを追加
  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 の立方体のジオメトリーを設定
  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 の立方体のジオメトリーを設定
  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 の立方体のジオメトリーを設定
  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 );
  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 );
  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 );
  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 );
  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 );
  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 ); } );
  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 ); } );
  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 ); } );
  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 ); } );
  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 ); } );
  44. MeshBasic
 Material MeshLambert
 Material MeshPhong
 Material MeshStandard Material MeshNormal
 Material

  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 ); } );
  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 ); } );
  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 ); } );
  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 ); } );
  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 ); } );
  50. //メッシュを作成 var cubeMesh = new THREE.Mesh( geometry, material ); //メッシュをシーンに追加

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

  54. scene.add( cubeMesh ); //レンダリング var anim = function () {

    requestAnimationFrame( anim ); cubeMesh.rotation.y += THREE.Math.degToRad( 1 ); renderer.render( scene, camera ); }; anim(); } );
  55. More examples & Docs 55 http://threejs.org/

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

  57. gl.finish(); @yomotsu