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

1. THREE.JSハンズオン
面白法人カヤック 比留間 和也

2. 自己紹介

3. 面白法人カヤック
技術部／比留間 和也

4. お台場合衆国
リアルスコープブース
サイネージ
カヤック サイコロ給
EBICHU CUBE
ルービックキューブ

5. THREE.JSでインタラクションを作る
本題

6. THREE.JSとは

7. Three.js
WebGLを劇的に使いやすくしてくれるライブラリ

8. オブジェクトを表示する
STEP1

9. 突然ですが質問です。

10. 映画撮影に必要なものは？

11. • 役者
• カメラ
• ライト
• シーン
• 再生機

12. • 役者
• カメラ
• ライト
• シーン
• 再生機
→オブジェクト
→カメラ
→ライト
→シーン
→レンダラー
Three.jsで考えると・・・

13. イメージ

14. イメージ

15. イメージ

16. イメージ

17. イメージ
シーン

18. イメージ
THREE.PerspectiveCamera
THREE.Mesh
THREE.DirectionalLight
THREE.Scene
THREE.Mesh

19. THREE.Mesh？

20. THREE.Meshは
「形」と「材質」で決まる

21. 形 ･･･ Geometry
e.g. THREE.BoxGeometry,
THREE.PlaneGeometry, etc.
材質 ･･･ Material
e.g. THREE.MeshLambertMaterial,
THREE.MeshPhongMaterial, etc.

22. ハンズオンの前に補足

23. 座標系を理解する

24. 実際にやってみましょう

25. マウスでオブジェクトを選択する
STEP2

26. THREE.JSの世界は”3D”
スクリーンは”2D”

27. マウスが指し示す場所はどこか

28. “点” ではなく ”線”

29. 実際にやってみましょう