このイベントで発表しました。 ↓ http://web3dj.connpass.com/event/30009/

1. エンジニアじゃなくても
3Dゲームが3時間できた話。
～three.jsで3D糸通しをつくってみた～

2. まずは、

3. 自己紹介
■名前：
木下 雄策(27歳・福岡出身) @afroscript10
■略歴：
九州大学大学院で宇宙の研究
2013年 レバレジーズ入社
■今のお仕事：
日本のエンジニア業界を最強にすること!!
→エンジニア特化型Q&Aサイト【teratail】のDevRel担当
→ITの勉強会【ヒカ☆ラボ】
■その他
→Gs'ACADEMY2期生の趣味エンジニア
→LIGブログ「0エンジニアから0.5エンジニアへ」連載中

4. 伝えたいこと

5. three.js使えば
めっちゃ簡単に3D入門できる！！！

6. 目次

7. 目次
■非エンジニア的に3Dの基礎をフワっとまとめてみる
・3Dって実はたった4つのことをやるだけでいい
■3D糸通しつくってみた
・Demo
・作り方を一部紹介
・壁をいっぱいつくる
・当たり判定もどき
・悩んでるとこ

8. 【非エンジニア的に
3Dの基礎をふわふわとまとめてみる】

9. 3Dって実は
たった4つのことをやるだけでいい
3Dは、

10. 3Dって実は
たった4つのことをやるだけでいい
3Dは、
・カメラ(視点)用意する

11. 3Dって実は
たった4つのことをやるだけでいい
3Dは、
・カメラ(視点)用意する

12. 3Dって実は
たった4つのことをやるだけでいい
3Dは、
・カメラ(視点)用意する
・シーンを用意する

13. 3Dって実は
たった4つのことをやるだけでいい
3Dは、
・カメラ(視点)用意する
・シーンを用意する
・ライト(光源)つくる

14. 3Dって実は
たった4つのことをやるだけでいい
3Dは、
・カメラ(視点)用意する
・シーンを用意する
・ライト(光源)つくる→シーンに追加

15. 3Dって実は
たった4つのことをやるだけでいい
3Dは、
・カメラ(視点)用意する
・シーンを用意する
・ライト(光源)つくる→シーンに追加
・物体(Mesh)つくる

16. 3Dって実は
たった4つのことをやるだけでいい
3Dは、
・カメラ(視点)用意する
・シーンを用意する
・ライト(光源)つくる→シーンに追加
・物体(Mesh)つくる→シーンに追加

17. 3Dって実は
たった4つのことをやるだけでいい
3Dは、
・カメラ(視点)用意する
・シーンを用意する
・ライト(光源)つくる→シーンに追加
・物体(Mesh)つくる→シーンに追加
あとは一定時間毎にレンダリングするだけ！！

18. 基本はこれだけ！！
※そしてレンダリング毎に、
カメラ/ライト/物体の位置をずらすとアニメーションになる！

19. 詳しくはこちらの記事で。:)
https://html5experts.jp/yomotsu/5225/

20. 【3D糸通しを作ってみた】

21. Demo

22. 作り方を一部紹介

23. 作り方を一部紹介
今回は2点に絞って。
・物体をランダムで位置変えていっぱいつくる
・当たり判定？

24. ・物体をランダムで位置変えていっぱいつくる

25. 物体をランダムで位置変えていっぱいつくる
当然ですが、
「物体をつくる」を
for文で繰り返すだけ

26. 物体をランダムで位置変えていっぱいつくる
物体(壁)の
大きさを決める
※単位は[m]
壁
2[m]
2[m]
20[m]

27. 物体をランダムで位置変えていっぱいつくる
物体(壁)の色を
ランダムで決める

28. 物体をランダムで位置変えていっぱいつくる
物体(壁)を生成！
(上下2個一気に作ってます)

29. 物体をランダムで位置変えていっぱいつくる
8m間隔で壁が現れるようにz
座標を設定
※z軸は奥行き
※座標は物体の中心を表す

30. 物体をランダムで位置変えていっぱいつくる
8m間隔で壁が現れるようにz
座標を設定
※z軸は奥行き
※座標は物体の中心を表す
重要っ！！

31. 物体をランダムで位置変えていっぱいつくる
壁のy座標を
ランダムで設定
※y軸は上下
※座標は物体の中心を表す

32. ・当たり判定

33. 当たり判定
今回は、レンダリングするごとにカメラの位置を
z軸方向に-0.05[m]ずつ動かしている(前に0.05[m]ずつ進む)

34. 当たり判定
今回は、レンダリングするごとにカメラの位置を
z軸方向に-0.05[m]ずつ動かしている(前に0.05[m]ずつ進む)
↓
zで条件分岐させて、壁が存在するzの範囲(8〜10とか)で、
カメラのy座標と、それぞれ通過する壁のy座標を比較する

35. 当たり判定
こんな感じ

36. 当たり判定
カメラの奥行き(z座標)が
8〜10[m]のとき、
0 8 10
壁1(下)
壁1(上)

37. 当たり判定
カメラの高さの位置(y座標)が
1番目の壁(上)の下面のy座標、
より大きければ、
GAMEOVER!!
0 8 10
壁1(下)
壁1(上)

38. 当たり判定
カメラの高さの位置(y座標)が
1番目の壁(下)の上面のy座標、
より低ければ、
GAMEOVER!!
0 8 10
壁1(下)
壁1(上)

39. 当たり判定
問題なければ通常通り
レンダリング！
0 8 10
壁1(下)
壁1(上)

40. 当たり判定
【2番目の壁とのあたり判定】
カメラの奥行き(z座標)が
18〜20[m]のとき…
18 20
壁2(下)
壁2(上)

41. 当たり判定
以下同文！：）
18 20
壁2(下)
壁2(上)

42. 当たり判定
壁を5個すり抜けると
clear!!
58 60
壁5(下)
壁5(上)

43. 当たり判定
z座標が壁の間を
通過してないときは、
ただレンダリングをして
0.05[m]ずつ進んでいく
壁
(下)
壁
(上)
壁
(下)
壁
(上)

44. 簡単でしょ？？：）

45. 【まとめ】

46. まとめ
・現実世界を再認識できておもしろい
(「確かに現実世界も、シーン/カメラ(視点)/物体/光源で
成り立ってるな〜。」って思ったり)
・数学/物理を多様する気配がプンプンするので、
理系男子的には萌える
・three.jsを使うと超簡単に3D作成を体験できる！

47. みなさんも今すぐ3Dやりましょう！！

48. ご清聴ありがとうございました。