Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML5 Conference 2015 WebGLハンズオン資料

2,802 views

Published on

HTML5 Conference 2015のWebGLハンズオンの最初で話した資料です。

Published in: Technology

HTML5 Conference 2015 WebGLハンズオン資料

  1. 1. THREE.JSハンズオン 面白法人カヤック 比留間 和也
  2. 2. 自己紹介
  3. 3. 面白法人カヤック 技術部/比留間 和也
  4. 4. お台場合衆国 リアルスコープブース サイネージ カヤック サイコロ給 EBICHU CUBE ルービックキューブ
  5. 5. THREE.JSでインタラクションを作る 本題
  6. 6. THREE.JSとは
  7. 7. Three.js WebGLを劇的に使いやすくしてくれるライブラリ
  8. 8. オブジェクトを表示する STEP1
  9. 9. 突然ですが質問です。
  10. 10. 映画撮影に必要なものは?
  11. 11. • 役者 • カメラ • ライト • シーン • 再生機
  12. 12. • 役者 • カメラ • ライト • シーン • 再生機 →オブジェクト →カメラ →ライト →シーン →レンダラー Three.jsで考えると・・・
  13. 13. イメージ
  14. 14. イメージ
  15. 15. イメージ
  16. 16. イメージ
  17. 17. イメージ シーン
  18. 18. イメージ THREE.PerspectiveCamera THREE.Mesh THREE.DirectionalLight THREE.Scene THREE.Mesh
  19. 19. THREE.Mesh?
  20. 20. THREE.Meshは 「形」と「材質」で決まる
  21. 21. 形 ・・・ Geometry e.g. THREE.BoxGeometry, THREE.PlaneGeometry, etc. 材質 ・・・ Material e.g. THREE.MeshLambertMaterial, THREE.MeshPhongMaterial, etc.
  22. 22. ハンズオンの前に補足
  23. 23. 座標系を理解する
  24. 24. 実際にやってみましょう
  25. 25. マウスでオブジェクトを選択する STEP2
  26. 26. THREE.JSの世界は”3D” スクリーンは”2D”
  27. 27. マウスが指し示す場所はどこか
  28. 28. “点” ではなく ”線”
  29. 29. 実際にやってみましょう

×