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. 実際にやってみましょう

Kazuya Hiruma